L'objet document

C'est le point d'entrée du DOM : il contient une représentation de tous les objets de la page (visibles ou non) et une (très) grande quantité de méthodes et propriétés utiles.

Quelques exemples de commandes que vous pouvez taper dans les dev-tools du navigateur :

console.dir(document)
console.dir(document.head)
console.dir(document.body)
console.dir(document.images)

Par exemple, pour console.dir(document.images) sur cette page, vous verrez quelque chose comme ceci :

HTMLCollection

0: <img class="VPImage logo" data-v-42373035="" src="/favicon-32x32.png" alt="">
1: <img src="/dom/DOM-example.png" alt="Representation DOM">

length: 2

<prototype>: HTMLCollectionPrototype { item: item(), namedItem: namedItem(), length: Getter, … }

C'est-à-dire la liste des éléments images de cette page.

Récupérer les éléments du DOM

La manipulation des éléments du DOM nécessite d'abord de récupérer ces éléments. L'API DOM fournit plusieurs méthodes pour cela. Regardons celles que nous utiliserons le plus.

document.querySelector() et document.querySelectorAll()

Les méthodes précédentes sont des méthodes très anciennes, mais les besoins en manipulation du DOM ayant énormément grandi, de nouvelles méthodes ont été créées, qui sont plus pratiques. Elles nécessitent de connaître les sélecteurs CSS, au moins ceux que nous avons vu précédemment.

document.querySelector() ne renvoie qu'un élément, quel que soit le nombre d'éléments sur la page qui correspondent au sélecteur CSS utilisé :

const firstEltWithExtraClass = document.querySelector('.extra-class') // Notez le . du début

Cette méthode renvoie un élément DOM.

const allEltsWithExtraClass = document.querySelectorAll('.extra-class')

L'objet retourné est cette fois non pas un objet HTMLCollection mais un objet de type NodeList, qui est aussi un Array-like, et donc aussi transformable facilement en Array avec Array.from().