Sélection DOM

Avant de modifier un élément HTML avec JavaScript, il faut d’abord le sélectionner.

Le DOM permet de récupérer des éléments de la page afin de les lire ou les modifier.

La sélection DOM est une des bases du JavaScript navigateur.

1. L’objet document

L’objet global document représente la page HTML.

console.log(document);

Toutes les méthodes de sélection commencent généralement par document.

2. getElementById()

La méthode getElementById() sélectionne un élément grâce à son id.

<h1 id="title">

    Bonjour

</h1>

<script>

    const title = document.getElementById("title");

</script>

Ici, JavaScript récupère l’élément ayant :

id="title"

3. querySelector()

La méthode querySelector() sélectionne le premier élément correspondant à un sélecteur CSS.

const title = document.querySelector("h1");

Cette méthode fonctionne avec :

• Les balises HTML
• Les classes CSS
• Les id

4. Sélectionner une classe

Pour sélectionner une classe CSS, on utilise un point .

const button = document.querySelector(".btn");

Ici, JavaScript sélectionne le premier élément ayant la classe :

class="btn"

5. Sélectionner un id

Pour sélectionner un id avec querySelector(), on utilise un dièse #.

const message = document.querySelector("#message");

6. querySelectorAll()

La méthode querySelectorAll() permet de sélectionner plusieurs éléments.

const buttons = document.querySelectorAll("button");

Cette méthode retourne une collection d’éléments.

7. Parcourir une collection DOM

Les éléments récupérés avec querySelectorAll() peuvent être parcourus avec une boucle.

const buttons = document.querySelectorAll("button");

for (const button of buttons) {

    console.log(button);

}

Ici, JavaScript affiche chaque bouton trouvé dans la page.

8. textContent

La propriété textContent permet de lire ou modifier le texte d’un élément.

const title = document.querySelector("h1");

console.log(title.textContent);

Modifier le texte :

title.textContent = "Bonjour Fred";

9. innerHTML

La propriété innerHTML permet de lire ou modifier le HTML interne.

const container = document.querySelector("#container");

container.innerHTML = "<strong>Bonjour</strong>";

10. value

La propriété value permet de lire le contenu d’un champ formulaire.

<input id="username" type="text">

<script>

    const input = document.querySelector("#username");

    console.log(input.value);

</script>

Cette propriété est très utilisée dans les formulaires.

11. null

Si JavaScript ne trouve aucun élément, la sélection retourne :

null

const element = document.querySelector(".unknown");

console.log(element);

Il est donc important de vérifier si un élément existe.

12. Vérifier une sélection

Avant de manipuler un élément, on peut vérifier qu’il existe.

const button = document.querySelector(".btn");

if (button) {

    console.log("Bouton trouvé");

}

Cette technique évite certaines erreurs JavaScript.

13. querySelector() vs getElementById()

Aujourd’hui, querySelector() est souvent préféré parce qu’il est plus flexible.

14. Bonnes pratiques

• Utiliser querySelector() pour la majorité des sélections
• Vérifier qu’un élément existe avant de le manipuler
• Utiliser des noms de variables clairs
• Limiter l’utilisation de innerHTML
• Préférer textContent pour le texte

Résumé rapide