Hiérarchie de nos éléments

 
Chaque élément HTML a un objet correspondant dans le DOM.

La propriété children

Tous les éléments enfants du body sont accessibles avec la propriété children.

console.log(document.body.children);

Cette propriété nous retourne un array contenant tous les éléments enfants.

Hiérarchie de nos éléments

On peut directement accéder à un de ces éléments enfants.

console.log(document.body.children[0]);

Le DOM est en fait une représentation structurée de nos éléments et grâce à cette hiérarchie, on peut accéder à chacun d’eux.

console.log(document.body.children[0].children[1]);

Propriétés hiérarchiques

On peut accéder au premier élément enfant avec firstElementChild

console.log(document.body.firstElementChild);

 
On peut accéder au dernier élément enfant avec lastElementChild

console.log(document.body.lastElementChild);

 
On peut accéder a l’élément qui suit avec nextElementSibling

console.log(document.body.children[0].nextElementSibling);

 
On peut accéder a l’élément parent avec parentElement

console.log(document.body.children[0].parentElement);