Les nœuds du DOM
Pour accéder aux sous-nœuds, on peut utiliser childNodes ou children. La propriété nodeType indique le type de nœud : 1 pour un élément, 3 pour un texte.
<html>
<head>
<meta charset="utf-8">
<title>Exemple DOM</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var conteneur = document.getElementById('conteneur');
var elements = conteneur.children;
for (var compteur = 0; compteur < elements.length; compteur++) {
elements[compteur].style.backgroundColor = '#f0f0f0';
}
});
</script>
</head>
<body>
<div id="conteneur">
<p>Paragraphe 1</p>
<p>Paragraphe 2</p>
</div>
Texte brut
</body>
</html>
Avec childNodes, les nœuds texte sont inclus, tandis que children ne contient que les éléments.
La propriété parentNode permet d'accéder au nœud parent. Par exemple, en cliquant sur un lien, on peut masquer son élément parent.
<html>
<head>
<meta charset="utf-8">
<title>Masquer un élément parent</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var liens = document.querySelectorAll('a.supprimer');
liens.forEach(function(lien) {
lien.addEventListener('click', function() {
this.parentNode.style.display = 'none';
});
});
});
</script>
</head>
<body>
<ul id="liste">
<li>Élément 1 <a href="#" class="supprimer">Masquer</a></li>
<li>Élément 2 <a href="#" class="supprimer">Masquer</a></li>
</ul>
</body>
</html>
offsetParent renvoie l'ancêtre positionné le plus proche, utile pour calculer les positions absolues.
Nœuds frères et extrêmes
Pour obtenir le premier ou dernier enfant, on utilise firstElementChild ou lastElementChild dans les navigateurs modernes, avec des alternatives comme firstChild pour la compatibilité.
<html>
<head>
<meta charset="utf-8">
<title>Premier enfant</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var bloc = document.getElementById('bloc');
var premier = bloc.firstElementChild || bloc.firstChild;
if (premier) {
premier.style.border = '2px solid blue';
}
});
</script>
</head>
<body>
<div id="bloc">
<span>Premier span</span>
<span>Deuxième span</span>
</div>
</body>
</html>
De même, pour naviguer entre frères, nextElementSibling et previousElementSibling sont préférés.
Manipulation des attributs
Les attributs des éléments peuvent être modifiés de plusieurs façons : via la propriété style, par indexation, ou avec les méthodes DOM getAttribute, setAttribute et removeAttribute.
<html>
<head>
<meta charset="utf-8">
<title>Modification d'attributs</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var champ = document.getElementById('saisie');
var bouton = document.getElementById('action');
bouton.addEventListener('click', function() {
champ.setAttribute('value', 'Nouvelle valeur');
});
});
</script>
</head>
<body>
<input id="saisie" type="text" />
<input id="action" type="button" value="Mettre à jour" />
</body>
</html>
Sélection d'éléments par classe
Pour sélectionner des éléments par leur classe CSS, on peut parcourir tous les éléments et filtrer par attribut className.
<html>
<head>
<meta charset="utf-8">
<title>Sélection par classe</title>
<script>
function obtenirParClasse(parent, classe) {
var resultats = [];
var tous = parent.getElementsByTagName('*');
for (var i = 0; i < tous.length; i++) {
if (tous[i].className === classe) {
resultats.push(tous[i]);
}
}
return resultats;
}
document.addEventListener('DOMContentLoaded', function() {
var conteneur = document.getElementById('zone');
var elements = obtenirParClasse(conteneur, 'special');
elements.forEach(function(el) {
el.style.opacity = '0.7';
});
});
</script>
</head>
<body>
<div id="zone">
<div class="special">Élément 1</div>
<div>Élément 2</div>
<div class="special">Élément 3</div>
</div>
</body>
</html>
Création, insertion et suppression d'éléments
Pour créer un nouvel élément, on utilise document.createElement. L'ajout se fait avec appendChild ou insertBefore pour un positionnement spécifique.
<html>
<head>
<meta charset="utf-8">
<title>Ajout d'éléments</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var entree = document.getElementById('texte');
var boutonAjout = document.getElementById('ajouter');
var liste = document.getElementById('liste-elements');
boutonAjout.addEventListener('click', function() {
var nouvelElement = document.createElement('li');
nouvelElement.textContent = entree.value;
var premierEnfant = liste.firstChild;
if (premierEnfant) {
liste.insertBefore(nouvelElement, premierEnfant);
} else {
liste.appendChild(nouvelElement);
}
});
});
</script>
</head>
<body>
<input id="texte" type="text" />
<input id="ajouter" type="button" value="Ajouter" />
<ul id="liste-elements"></ul>
</body>
</html>
La suppression d'un nœud s'effectue avec removeChild.
<html>
<head>
<meta charset="utf-8">
<title>Suppression d'éléments</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var elements = document.querySelectorAll('.supprimable');
elements.forEach(function(el) {
el.addEventListener('click', function() {
el.parentNode.removeChild(el);
});
});
});
</script>
</head>
<body>
<ul id="liste">
<li class="supprimable">Élément A</li>
<li class="supprimable">Élément B</li>
</ul>
</body>
</html>
Les fragments de document (DocumentFragment) peuvent optimiser les insertions multiples en réduisant les reflows, bien que leur utilité soit moindre dans les navigateurs récents.
<html>
<head>
<meta charset="utf-8">
<title>Fragment de document</title>
<script>
document.addEventListener('DOMContentLoaded', function() {
var liste = document.getElementById('grande-liste');
var fragment = document.createDocumentFragment();
for (var j = 0; j < 1000; j++) {
var element = document.createElement('li');
element.textContent = 'Item ' + j;
fragment.appendChild(element);
}
liste.appendChild(fragment);
});
</script>
</head>
<body>
<ul id="grande-liste"></ul>
</body>
</html>