introduction
Dans Comprendre l’arbre et les nœuds DOM, nous avons examiné la structure du DOM en tant qu’arborescence d’objets appelés nœuds , et que les nœuds peuvent être du texte, des commentaires ou des éléments. Habituellement, lorsque nous accédons au contenu dans le DOM, ce sera via un nœud d’élément HTML.
Pour pouvoir accéder efficacement aux éléments du DOM, il est nécessaire d’avoir une connaissance pratique des sélecteurs CSS, de la syntaxe et de la terminologie, ainsi qu’une compréhension des éléments HTML. Dans ce tutoriel, nous allons examiner plusieurs manières d’accéder aux éléments du DOM: par sélecteurs d’ID, de classe, de balise et de requête.
Vue d’ensemble
Voici un aperçu des cinq méthodes que nous allons couvrir dans ce tutoriel.
| Gets | Selector Syntax | Method |
|---|---|---|
ID |
|
|
Class |
|
|
Tag |
|
|
Selector (single) |
|
|
Selector (all) |
|
Lors de l’étude du DOM, il est important de taper les exemples sur votre propre ordinateur pour vous assurer que vous comprenez et conservez les informations que vous avez apprises.
Vous pouvez enregistrer ce fichier HTML, + access.html +, dans votre propre projet pour passer en revue les exemples accompagnant cet article. Si vous ne savez pas comment utiliser JavaScript et le code HTML localement, consultez notre tutoriel Comment ajouter JavaScript à HTML.
access.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Elements in the DOM</title>
<style>
html { font-family: sans-serif; color: #333; }
body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
</body>
</html>Dans ce fichier HTML, nous avons accès à de nombreux éléments avec différentes méthodes + document. Lorsque nous rendons le fichier dans un navigateur, cela ressemblera à ceci:
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/html-rendering.png [Rendu du navigateur de la page access.html]
Nous utiliserons les différentes méthodes décrites dans la section Overview ci-dessus pour accéder aux informations disponibles. éléments dans le fichier.
Accéder aux éléments par ID
Le moyen le plus simple d’accéder à un seul élément du DOM consiste à utiliser son unique ID. Nous pouvons récupérer un élément par ID avec la méthode https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById [+ getElementById () +] de l’objet + document +.
document.getElementById();Pour être accessible par ID, l’élément HTML doit avoir un attribut + id +. Nous avons un élément + div avec un identifiant de` + demo + `.
<div id="demo">Access me by ID</div>Dans le Console, récupérons l’élément et l’affectons à la variable + demoId +.
const demoId = document.getElementById('demo');La journalisation + demoId + sur la console retournera l’intégralité de notre élément HTML.
console.log(demoId);Output<div id="demo">Access me by ID</div>Nous pouvons être sûrs d’avoir accès au bon élément en modifiant la propriété + border + en + violet +.
demoId.style.border = '1px solid purple';Une fois que nous le faisons, notre page en direct ressemblera à ceci:
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/id-element.png [Rendu par le navigateur du style de l’élément d’identification]
L’accès à un élément par ID est un moyen efficace d’obtenir rapidement un élément dans le DOM. Cependant, il présente des inconvénients. un identifiant doit toujours être unique pour la page et vous ne pourrez donc accéder à un élément qu’à la fois avec la méthode + getElementById () +. Si vous vouliez ajouter une fonction à de nombreux éléments de la page, votre code deviendrait rapidement répétitif.
Accéder aux éléments par classe
L’attribut class permet d’accéder à un ou plusieurs éléments spécifiques du DOM. Nous pouvons obtenir tous les éléments avec un nom de classe donné avec la méthode https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName [+ getElementsByClassName () +].
document.getElementsByClassName();Maintenant, nous voulons accéder à plus d’un élément, et dans notre exemple, nous avons deux éléments avec une classe + demo +.
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>Accédons à nos éléments dans Console et mettons-les dans une variable appelée + demoClass +.
const demoClass = document.getElementsByClassName('demo');À ce stade, vous pouvez penser que vous pouvez modifier les éléments de la même manière que vous avez fait avec l’exemple d’ID. Cependant, si nous essayons d’exécuter le code suivant et de modifier la propriété + border + des éléments de démonstration de la classe en orange, nous obtiendrons une erreur.
demoClass.style.border = '1px solid orange';OutputUncaught TypeError: Cannot set property 'border' of undefinedCela ne fonctionne pas parce qu’au lieu d’obtenir un seul élément, nous avons un objet d’éléments de type tableau.
console.log(demoClass);Output(2) [div.demo, div.demo]JavaScript arrays doit être accessible avec un numéro d’index. Nous pouvons donc changer le premier élément de ce tableau en utilisant un index de + 0 +.
demoClass[0].style.border = '1px solid orange';Généralement, lorsque vous accédez aux éléments par classe, nous souhaitons appliquer une modification à tous les éléments du document avec cette classe particulière, et non à un seul. Nous pouvons le faire en créant une boucle + pour + et en parcourant tous les éléments du tableau.
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}Lorsque nous exécutons ce code, notre page en direct sera rendue comme suit:
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/class-element.png [Rendu du navigateur du style de l’élément de classe]
Nous avons maintenant sélectionné tous les éléments de la page ayant une classe + demo + et modifié la propriété + border + en + orange +.
Accéder aux éléments par balise
Un moyen moins spécifique d’accéder à plusieurs éléments de la page serait par son nom de balise HTML. Nous accédons à un élément par balise avec la méthode https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName [+ getElementsByTagName () +].
document.getElementsByTagName();Pour notre exemple de tag, nous utilisons des éléments + article +.
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>Tout comme pour accéder à un élément par sa classe, + getElementsByTagName () + retournera un objet d’éléments de type tableau, et nous pouvons modifier chaque balise du document avec une boucle + pour +.
const demoTag = document.getElementsByTagName('article');
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}Lors de l’exécution du code, la page en direct sera modifiée comme suit:
image: https: //assets.digitalocean.com/articles/eng_javascript/dom/tag-element.png [Rendu par le navigateur du style de l’élément de balise]
La boucle a changé la propriété + border + de tous les éléments + article + en + blue +.
Sélecteurs de requêtes
Si vous avez déjà utilisé l’API jQuery, vous connaissez peut-être la méthode utilisée par jQuery pour accéder au DOM avec les sélecteurs CSS.
$('#demo'); // returns the demo ID element in jQueryNous pouvons faire la même chose en JavaScript avec les méthodes + querySelector () + et + querySelectorAll () +.
document.querySelector();
document.querySelectorAll();Pour accéder à un seul élément, nous allons utiliser la méthode https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector [+ querySelector () +]]. Dans votre fichier HTML, nous avons un élément + demo-query
<div id="demo-query">Access me by query</div>Le sélecteur pour un attribut + id + est le symbole de hachage (+ # +). Nous pouvons affecter l’élément avec l’id + demo-query à la variable` + demo Query`.
const demoQuery = document.querySelector('#demo-query');Dans le cas d’un sélecteur avec plusieurs éléments, tels qu’une classe ou une balise, + querySelector () + retournera le premier élément qui correspond à la requête. Nous pouvons utiliser la méthode https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll [+ querySelectorAll () +]] pour collecter tous les éléments correspondant à une requête spécifique.
Dans notre fichier exemple, nous avons deux éléments auxquels la classe + demo-query-all + leur est appliquée.
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>Le sélecteur pour un attribut + class est un point ou un point (` +. + ), Nous pouvons donc accéder à la classe avec + .demo-query-all`.
const demoQueryAll = document.querySelectorAll('.demo-query-all');En utilisant la méthode forEach () +, nous pouvons appliquer la couleur + green à la propriété` + border` de tous les éléments correspondants.
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});image: https: //assets.digitalocean.com/articles/eng_javascript/dom/query-selector.png [Rendu par le navigateur du style de querySelector ()]
Avec + querySelector () +, les valeurs séparées par des virgules fonctionnent comme un opérateur OR. Par exemple, + querySelector ('div, article') + correspondra à '+ div ' _or_ ` article `, selon la première éventualité dans le document. Avec ` querySelectorAll () `, les valeurs séparées par des virgules fonctionnent comme un opérateur AND, et ` querySelectorAll ('div, article' +) correspond à toutes les valeurs` + div + et + article + `du document.
L’utilisation des méthodes de sélecteur de requête est extrêmement puissante, car vous pouvez accéder à n’importe quel élément ou groupe d’éléments du DOM de la même façon que vous le feriez dans un fichier CSS. Pour obtenir une liste complète des sélecteurs, consultez CSS Selectors sur le réseau de développeurs Mozilla.
Code JavaScript complet
Vous trouverez ci-dessous le texte complet du travail que nous avons effectué ci-dessus. Vous pouvez l’utiliser pour accéder à tous les éléments de notre page d’exemple. Enregistrez le fichier sous le nom + access.js et chargez-le dans le fichier HTML juste avant la balise de fermeture` + body`.
access.js
// Assign all elements
const demoId = document.getElementById('demo');
const demoClass = document.getElementsByClassName('demo');
const demoTag = document.getElementsByTagName('article');
const demoQuery = document.querySelector('#demo-query');
const demoQueryAll = document.querySelectorAll('.demo-query-all');
// Change border of ID demo to purple
demoId.style.border = '1px solid purple';
// Change border of class demo to orange
for (i = 0; i < demoClass.length; i++) {
demoClass[i].style.border = '1px solid orange';
}
// Change border of tag demo to blue
for (i = 0; i < demoTag.length; i++) {
demoTag[i].style.border = '1px solid blue';
}
// Change border of ID demo-query to red
demoQuery.style.border = '1px solid red';
// Change border of class query-all to green
demoQueryAll.forEach(query => {
query.style.border = '1px solid green';
});Votre fichier HTML final ressemblera à ceci:
access.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accessing Elements in the DOM</title>
<style>
html { font-family: sans-serif; color: #333; }
body { max-width: 500px; margin: 0 auto; padding: 0 15px; }
div, article { padding: 10px; margin: 5px; border: 1px solid #dedede; }
</style>
</head>
<body>
<h1>Accessing Elements in the DOM</h1>
<h2>ID (#demo)</h2>
<div id="demo">Access me by ID</div>
<h2>Class (.demo)</h2>
<div class="demo">Access me by class (1)</div>
<div class="demo">Access me by class (2)</div>
<h2>Tag (article)</h2>
<article>Access me by tag (1)</article>
<article>Access me by tag (2)</article>
<h2>Query Selector</h2>
<div id="demo-query">Access me by query</div>
<h2>Query Selector All</h2>
<div class="demo-query-all">Access me by query all (1)</div>
<div class="demo-query-all">Access me by query all (2)</div>
<script src="access.js"></script>
</body>
</html>Vous pouvez continuer à travailler sur ces fichiers modèles pour apporter des modifications supplémentaires en accédant aux éléments HTML.
Conclusion
Dans ce didacticiel, nous avons examiné 5 façons d’accéder aux éléments HTML du DOM: par ID, par classe, par nom de balise HTML et par sélecteur. La méthode que vous utiliserez pour obtenir un élément ou un groupe d’éléments dépendra de la prise en charge du navigateur et du nombre d’éléments que vous allez manipuler. Vous devez maintenant avoir confiance pour accéder à tout élément HTML d’un document avec JavaScript via le DOM.