Travail avec les nœuds en JavaScript
Comme vous le savez, les balises peuvent contenir d'autres balises ou, en termes JavaScript, les éléments DOM peuvent contenir d'autres éléments DOM. Cependant, en plus de cela, ils peuvent contenir des commentaires et du texte simple. Les commentaires, les textes et les éléments DOM sont regroupés sous un seul nom - nœuds.
Vous connaissez déjà les propriétés firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling.
Ces propriétés travaillent précisément avec les éléments DOM,
en ignorant les autres nœuds. En règle générale, c'est exactement
ce dont nous avons besoin.
Cependant, il existe également les propriétés firstChild,
lastChild, nextSibling, previousSibling.
Ces propriétés fonctionnent de manière analogue,
mais prennent en compte tous les nœuds. Regardons
la différence entre ces propriétés avec un exemple.
Supposons que nous ayons une div contenant trois nœuds :
<div id="elem"><!--com-->text<span>tag</span></div>
Récupérons une référence à cette div dans une variable :
let elem = document.querySelector('#elem');
Et maintenant, regardons ce que contiennent
les propriétés firstChild et firstElementChild :
console.log(elem.firstChild); // commentaire
console.log(elem.firstElementChild); // balise span
Écrivez un code qui montrera la différence entre
lastChild et lastElementChild.
Écrivez un code qui montrera la différence entre
nextSibling et nextElementSibling.
Écrivez un code qui montrera la différence entre
previousSibling et previousElementSibling.
