Sélectionner des éléments du DOM

Pour commencer à manipuler le DOM, nous allons avoir besoin de savoir sélectionner ses éléments. Il existe de nombreuses techniques, en voici quelques-unes.

Les techniques sans sélecteurs

Sélectionner un élément avec son id

Si un élément de votre HTML a un id, vous pouvez le sélectionner avec la méthode :

document.getElementById('id');

Exemple d'utilisation de getElementById

<ul id="ingredients">
    <li>Salade</li>
    <li>Tomate</li>
    <li>Oignon</li>
</ul>

let ingredientList = document.getElementById('ingredients');

Sélectionner des éléments avec leur class

Si des éléments de votre HTML ont une classe, vous pouvez les sélectionner avec la méthode :

document.getElementsByClassName('class');

Attention, même si votre HTML n'a qu'un seul élément avec cette class, la méthode vous renvoie un tableau.

Exemple d'utilisation de getElementsByClassName

<ul>
    <li class="crudite">Salade</li>
    <li class="crudite">Tomate</li>
    <li class="crudite">Oignon</li>
    <li>Harissa</li>
</ul>

let cruditesList = document.getElementsByClassName("crudite");

for(let crudite of cruditesList)
{
    console.log(crudite);
}

Sélectionner des éléments avec leurs types

Si vos éléments HTML n'ont ni id ni classe vous pouvez toujours utiliser le nom de leur balise avec la méthode suivante :

document.getElementsByTagName("balise");

Attention, même si votre HTML n'a qu'un seul élément avec de cette balise, la méthode vous renvoie un tableau.

Exemple d'utilisation de getElementsByTagName

<ul>
    <li>Salade</li>
    <li>Tomate</li>
    <li>Oignon</li>
</ul>

let ingredientList = document.getElementsByTagName("li");

for(let li of ingredientList)
{
    console.log(li);
}

Utiliser les sélecteurs CSS

Lorsque vous avez appris à faire du CSS, vous avez au passage appris l'arme ultime pour sélectionner des éléments HTML : les sélecteurs CSS. Vous pouvez également les utiliser depuis votre JavaScript avec les deux méthodes suivantes :

Sélectionner un élément unique

Si vous cherchez à ne sélectionner qu'un seul élément utilisez la méthode document.querySelector:

document.querySelector("selector");

Exemple d'utilisation de querySelector

<ul>
    <li>Salade</li>
    <li>Tomate</li>
    <li>Oignon</li>
</ul>

let salad = document.querySelector("li:first-of-type");

Sélectionner plusieurs éléments

Si vous cherchez à sélectionner plusieurs éléments, utilisez la méthode document.querySelectorAll qui renvoie un tableau :

document.querySelectorAll("selector");

Exemple d'utilisation de querySelectorAll

<ul>
    <li>Salade</li>
    <li>Tomate</li>
    <li>Oignon</li>
</ul>

let notSalad = document.querySelectorAll("li:not(:first-of-type)");

08 January 2026