Le Document Object Model (DOM) est la représentation structurelle d'un document HTML. Le DOM est un arbre de nœuds que le navigateur crée pour chaque page Web sur Internet.

Le DOM est orienté objet. Chaque élément du DOM possède son propre ensemble d'attributs et de méthodes auxquels vous pouvez accéder à l'aide de JavaScript.

Dans cet article de didacticiel, vous apprendrez à utiliser les fonctions de sélection DOM pour accéder aux éléments d'une page Web.

Comment accéder aux éléments DOM

Vous pouvez accéder à l'élément DOM de niveau supérieur d'une page Web via l'objet document global. Par exemple, si vous avez une page Web comme celle-ci :

Bienvenue


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.




Sur


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.







instagram viewer



Des articles



Titre de l'article un


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lire la suite 





Titre de l'article deux


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lire la suite 





Titre de l'article trois


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lire la suite 





Titre de l'article quatre


 Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur asperiores voluptatum et repellat?
 Quae iusto non eligendi hic accusamus itaque ut in delectus sint perspiciatis quos rem a, atque veniam.


 Lire la suite 

Dactylographie document dans la console de votre navigateur et appuyez sur Entrée pour produire le résultat suivant :

La sortie dans votre console est interactive. Vous pouvez cliquez sur le diriger et corps éléments pour les développer. Cela produira le résultat suivant :

Chaque élément de section dans le La balise est également extensible. Selon la structure d'une page Web, les éléments continueront de s'étendre pour révéler plus d'éléments. Cela devrait vous donner une meilleure compréhension de la structure du DOM.

En rapport: Le héros caché des sites Web: comprendre le DOM

L'objet document a une propriété spéciale, corps, représentant l'élément body. Ainsi, pour accéder à l'élément body, vous pouvez taper ce qui suit dans la console :

document.corps

Cela produira la sortie suivante :

Mais c'est aussi loin que vous pouvez aller en utilisant les propriétés de l'objet. Chaque page a une tête et un corps mais est par ailleurs unique. Alors en tapant section.du.corps.du.document ou quelque chose de similaire ne fonctionnera tout simplement pas comme vous le souhaiteriez. Au lieu de cela, il existe des méthodes que vous pouvez appeler sur l'objet document pour accéder à des éléments spécifiques.

Que sont les sélecteurs d'éléments DOM ?

Les sélecteurs d'éléments DOM sont un groupe de méthodes JavaScript que vous pouvez utiliser sur l'objet document pour accéder aux éléments d'une page Web. Les sélecteurs d'éléments DOM ont deux catégories: sélecteurs simples et sélecteurs multiples.

Ces fonctions agissent de manière similaire aux sélecteurs CSS. Ils vous permettent de récupérer des éléments en fonction de leur nom de balise, ou de leurs attributs id et class. Vous pouvez même récupérer des éléments à l'aide de n'importe quel sélecteur CSS.

En rapport: Comment cibler une partie d'une page Web à l'aide de sélecteurs CSS

Les sélecteurs d'élément unique sont :

• getElementById()
• sélecteur de requête()

Les sélecteurs d'éléments multiples sont :

• getElementsByTagName()
• getElementsByClassName()
• querySelectorAll()

Le sélecteur d'élément DOM que vous utilisez dépendra du ou des éléments auxquels vous essayez d'accéder.

Utilisation de sélecteurs d'éléments DOM uniques

Vous verrez principalement des sélecteurs dans les applications JavaScript. Alors, éloignons-nous de la console. Créez un fichier JavaScript et liez-le à votre fichier HTML à l'aide de la balise de script suivante :

Où la valeur src est le nom de votre fichier JavaScript. Placez cette balise script juste avant votre balise body de fermeture, .

le getElementById() La méthode donne accès à un seul élément sur une page Web en utilisant la valeur de son ID. Dans le document HTML ci-dessus, il y a plusieurs éléments avec des ID. Pour cibler le div élément avec l'ID « article-3 », vous pouvez ajouter le code suivant à votre fichier JavaScript :

value = document.getElementById('article-3')

Maintenant, l'élément div avec le article-3 ID et toutes ses propriétés correspondantes sont accessibles depuis le valeur variable. Vous pouvez imprimer le valeur variable à la console en utilisant la ligne de code suivante :

console.log (valeur)

Vous verrez le nom de classe attribué à l'élément div ainsi que d'autres attributs importants, tels que le code HTML interne.

L'autre sélecteur d'élément unique est le sélecteur de requête(). Cette fonction est plus polyvalente, car vous pouvez lui passer n'importe quelle chaîne de sélection CSS. Cependant, vous ne pouvez toujours l'utiliser que pour sélectionner un élément à la fois.

Par exemple, il n'y a qu'une seule classe dans la mise en page HTML ci-dessus: les articles. Quatre éléments div utilisent cette classe, mais le sélecteur de requête() La fonction ne renverra que le premier élément qui a la classe "articles".

Utilisation de querySelector() avec une classe

Ajoutez le code suivant à la fin de votre script :

value = document.querySelector('.articles')
console.log (valeur)

Cela ne retournera que le premier div élément avec une classe « articles ». Notez que vous spécifiez le sélecteur dans le même format qu'un sélecteur CSS. En CSS, un point de début spécifie un nom de classe.

Utilisation de querySelector() avec un identifiant

value = document.querySelector('#article-3')
console.log (valeur)

Ce code renverra le seul élément avec un identifiant « article-3 », le troisième div élément avec une classe « articles ». Encore une fois, la chaîne de sélection utilise la syntaxe CSS standard, avec un # symbole spécifiant un identifiant.

Utilisation de plusieurs sélecteurs d'éléments DOM

Les fonctions de sélection restantes récupèrent des groupes d'éléments. Ils sont getElementsByTagName(), getElementsByClassName(), et querySelectorAll().

Utilisation de getElementsByTagName()

le getElementsByTagName() selector récupère un groupe d'éléments avec le même nom de balise. Par exemple, si vous souhaitez sélectionner tous les h2 éléments sur une page Web, vous pouvez utiliser le code suivant :

value = document.getElementsByTagName('h2')
console.log (valeur)

Cela stocke tous les éléments h2 dans une collection HTML appelée value.

Utilisation de getElementsByClassName()

le getElementsByClassName() selector renvoie une collection d'éléments avec le même nom de classe.

value = document.getElementsByClassName('articles')
console.log (valeur)

L'insertion du code ci-dessus dans votre fichier JavaScript renverra les quatre éléments div avec le nom de classe « articles » dans la console du navigateur.

Utilisation de querySelectorAll()

le querySelectorAll() La méthode renvoie une liste de nœuds de tous les éléments qui correspondent au sélecteur donné. Pour accéder à tous les éléments de paragraphe de la section blog, vous pouvez utiliser le code suivant :

value = document.querySelectorAll('#blog p')
console.log (valeur)

Vous pouvez même inclure plusieurs sélecteurs dans la chaîne, en les séparant chacun par une virgule, comme en CSS :

value = document.querySelectorAll('h2, .articles')
console.log (valeur)

Utilisez les sélecteurs DOM pour créer des pages Web dynamiques

À ce stade, vous devriez avoir une compréhension claire du DOM et de son fonctionnement. Vous devez également connaître les différents sélecteurs simples et multiples, ainsi que leur utilisation.

Pourtant, accéder aux éléments HTML n'est que la première étape de ce que vous pouvez faire avec les sélecteurs DOM. Les sélecteurs DOM vous aideront grandement à développer les aspects fonctionnels de votre site Web, tels que la gestion des événements onclick et onscroll.

Comment rendre votre site Web réactif et interactif avec CSS et JavaScript

Vous avez configuré votre site Web avec HTML et CSS, mais vous devez maintenant ajouter de la logique. Voici quoi faire.

Lire la suite

A propos de l'auteur