2.1 Méthodes d'accès aux éléments
Naviguer dans le DOM (Document Object Model) est une tâche importante lors de la manipulation des documents web. JavaScript fournit une multitude de méthodes pour rechercher et accéder aux éléments du document. Ces méthodes permettent aux développeurs de facilement trouver les éléments nécessaires et de les manipuler.
1. Méthode getElementById()
La méthode getElementById() retourne l'élément qui possède l'attribut id avec la valeur spécifiée.
C'est l'une des méthodes les plus simples et les plus couramment utilisées.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="content">This is the content</div>
<script>
const contentDiv = document.getElementById('content');
console.log(contentDiv.textContent); // Affichera : This is the content
</script>
</body>
</html>
2. Méthode getElementsByClassName()
La méthode getElementsByClassName() retourne une collection de tous les éléments qui ont la classe spécifiée.
La collection est "live", ce qui signifie qu'elle est automatiquement mise à jour lorsque le DOM change.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>
<p class="text">Paragraph 3</p>
<script>
const paragraphs = document.getElementsByClassName('text');
console.log(paragraphs.length); // Affichera : 3
</script>
</body>
</html>
3. Méthode getElementsByTagName()
La méthode getElementsByTagName() retourne une collection de tous les éléments avec le tag spécifié.
Cette collection est aussi "live".
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<script>
const paragraphs = document.getElementsByTagName('p');
console.log(paragraphs.length); // Affichera : 3
</script>
</body>
</html>
4. Méthode querySelector()
La méthode querySelector() retourne le premier élément qui correspond au sélecteur CSS spécifié.
C'est une méthode très puissante et flexible pour rechercher des éléments.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const highlightedParagraph = document.querySelector('.highlight');
console.log(highlightedParagraph.textContent); // Affichera : Paragraph 2
</script>
</body>
</html>
5. Méthode querySelectorAll()
La méthode querySelectorAll() retourne une collection statique (non changeante) de tous les éléments
qui correspondent au sélecteur CSS spécifié.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div class="container">
<p>Paragraph 1</p>
<p class="highlight">Paragraph 2</p>
<p>Paragraph 3</p>
</div>
<script>
const paragraphs = document.querySelectorAll('.container p');
console.log(paragraphs.length); // Affichera : 3
</script>
</body>
</html>
2.2 Navigation des nœuds
Le DOM fournit également des méthodes pour naviguer entre les nœuds par rapport au nœud actuel.
1. Propriété parentNode
La propriété parentNode retourne le nœud parent du nœud actuel.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<div id="container">
<p>Paragraph</p>
</div>
<script>
const paragraph = document.querySelector('p');
const parent = paragraph.parentNode;
console.log(parent.id); // Affichera : container
</script>
</body>
</html>
2. Propriété childNodes
La propriété childNodes retourne une collection de tous les nœuds enfants du nœud actuel, y compris les nœuds texte.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.childNodes;
console.log(children.length); // Affichera le nombre de tous les nœuds enfants, y compris les textes
</script>
</body>
</html>
Tu te demandes peut-être pourquoi le résultat est 7 ?
Comme mentionné plus haut, la propriété childNodes retourne une collection de tous les nœuds enfants, y compris
les nœuds de texte (espaces, symboles, nouvelles lignes, etc.). La structure HTML contient des espaces et des nouvelles lignes entre
les éléments <li>, qui sont aussi considérés comme des nœuds distincts.
Dans l'exemple ci-dessus, il y a une nouvelle ligne (et éventuellement un espace) entre le tag <ul> et le premier <li>,
ce qui est considéré comme un nœud texte. Même situation entre tous les <li> et après le dernier <li>.
Donc, au lieu de trois éléments de liste, childNodes inclut ces nœuds texte, ce qui donne un total de 7.
Pour obtenir uniquement les éléments (ignorant les nœuds texte), tu peux utiliser la propriété children, qui retourne uniquement les éléments enfants :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const children = list.children;
console.log(children.length); // 3
</script>
</body>
</html>
3. Propriétés firstChild et lastChild
Les propriétés firstChild et lastChild retournent respectivement le premier et le dernier nœud enfant.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstChild;
const last = list.lastChild;
console.log(first.textContent);
console.log(last.textContent);
</script>
</body>
</html>
Tu pourrais être surpris de ne rien voir affiché dans la console. Cependant, ce n'est pas le cas. Les nœuds enfants Item 1 et Item 3 (nouvelle ligne) sont affichés. Si tu es tombé dans le piège, lis encore une fois le paragraphe 2. Propriété childNodes
4. Propriétés nextSibling et previousSibling
Les propriétés nextSibling et previousSibling retournent les nœuds suivants et précédents au même niveau d'hiérarchie.
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextSibling;
const prev = secondItem.previousSibling;
console.log(next.textContent); // Affichera : Item 3
console.log(prev.textContent); // Affichera : Item 1 (si tu ignores les nœuds texte)
</script>
</body>
</html>
2.3 Navigation des nœuds d'éléments
5. Propriétés nextElementSibling et previousElementSibling
Ces propriétés retournent les nœuds d'éléments suivants et précédents (en ignorant les textes et les commentaires).
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const secondItem = document.querySelector('li:nth-child(2)');
const next = secondItem.nextElementSibling;
const prev = secondItem.previousElementSibling;
console.log(next.textContent); // Affichera : Item 3
console.log(prev.textContent); // Affichera : Item 1
</script>
</body>
</html>
6. Propriétés firstElementChild et lastElementChild
Ces propriétés retournent les premiers et derniers nœuds d'éléments enfants (en ignorant les textes et les commentaires).
Exemple :
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<ul id="list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script>
const list = document.getElementById('list');
const first = list.firstElementChild;
const last = list.lastElementChild;
console.log(first.textContent); // Affichera : Item 1
console.log(last.textContent); // Affichera : Item 3
</script>
</body>
</html>
GO TO FULL VERSION