Le Document Object Model (DOM) est une interface de programmation pour les documents HTML et XML créés par le navigateur une fois le document chargé. Une page web est essentiellement un document représenté par le DOM sous forme de nœuds et d’objets. Il permet aux programmes de manipuler le contenu, la structure et les styles du document.
Dans ce tutoriel, nous allons apprendre à utiliser JavaScript pour accéder à différents nœuds (éléments HTML) dans le DOM. Commençons par la première méthode : obtenir un élément par ID.
Get Element By ID
La méthode document de getElementById() prend l’ID de l’élément en entrée et renvoie un objet Element représentant l’élément DOM. Voici un exemple:
<div>🦄</div>Voici maintenant comment nous pouvons obtenir l’élément <div> ci-dessus en utilisant son ID:
const unicorn = document.getElementById('unicorn');L’ID est sensible à la casse et unique dans tout le document HTML. Cette méthode renvoie donc toujours un seul élément. Si aucun élément correspondant n’est trouvé, elle renvoie null.
Note : ne mettez pas le signe
#avant la chaîne ID lors de l’appel de la méthodegetElementById(). Vous obtiendreznullau lieu de l’élément, et vous risquez alors de vous demander pendant des heures ce qui s’est passé.
Obtenir des éléments par nom de balise
La méthode getElementsByTagName() est utilisée pour accéder à plusieurs éléments. Elle prend le nom de la balise en entrée et renvoie tous les éléments du DOM qui correspondent au nom de la balise sous la forme HTMLCollection :
<p>🐱</p><p>🐰</p><p>🐯</p><p>🐧</p>Code JavaScript pour accéder à tous les éléments <p>:
const animals = document.getElementsByTagName('p');Cette méthode ne recherche qu’un nom de balise à la fois. Mais si vous passez * comme nom de balise, vous obtiendrez tous les éléments du DOM :
const allNodes = document.getElementsByTagName('*');Get Elements By Name
La méthode getElementsByName() est utilisée pour obtenir une collection d’éléments par leur name attribut, et renvoie un objet NodeList :
<input type="text" name="email"><input type="tel" name="phone"><input type="date" name="dob">Trouvons tous les éléments portant le nom email:
const emails = document.getElementsByName('email');Note : Contrairement à l’attribut
id, qui doit être unique, plusieurs éléments HTML peuvent avoir le même attributname. C’est pourquoigetElementsByName()renvoie une collection de nœuds.
Get Elements By Class Name
Vous voulez utiliser l’attribut class pour obtenir une liste d’éléments correspondants ? Vous pouvez utiliser la méthode getElementsByClassName(), il suffit de lui passer un nom de classe (sans .) et elle retournera un HTMLCollection de tous les éléments DOM qui ont le nom de classe donné :
<div class="bird owl">🦉</div><div class="bird">🐦</div><div class="bird eagle">🦅</div><div class="animal cat">🐱</div>Regardons tous les bird:
const birds = document.getElementsByClassName('bird');Cette méthode accepte également plusieurs noms de classe séparés par des espaces. Obtenons tous les éléments qui ont à la fois les classes bird et eagle :
const eagle = document.getElementsByClassName('bird eagle');Sélecteur de requête
La méthode querySelector() est l’une des deux méthodes JavaScript modernes qui vous permettent d’obtenir des éléments du DOM, sur la base de sélecteurs CSS. Il suffit de passer le sélecteur CSS et vous obtiendrez le premier élément qui correspond au sélecteur spécifié. Si aucune correspondance n’existe, elle renvoie null. Voici un exemple:
const email = document.querySelector('#signup input');Query Selector All
Vous voulez sélectionner une liste d’éléments qui correspondent aux sélecteurs spécifiés ? Utilisez plutôt la méthode querySelectorAll(). Cette méthode prend plusieurs sélecteurs CSS en entrée et renvoie une NodeList – une liste d’éléments DOM qui correspondent aux sélecteurs donnés. Sélectionnons tous les éléments dont la classe est bird ou animal dans le balisage HTML ci-dessus :
const elems = document.querySelectorAll('.bird, .animal');console.log(elems.length); // 4Chaînage de fonctions
Vous pouvez également enchaîner plusieurs fonctions pour rechercher des éléments dans un autre élément. Vous devez d’abord sélectionner un seul élément à l’aide de getElementById() ou querySelector(), puis enchaîner une autre fonction pour rechercher à l’intérieur :
<form> <input type="text" name="email"> <input type="tel" name="phone"> <input type="date" name="date-of-birth"></form>Recevoir tous les éléments input, à l’intérieur d’un élément qui a l’ID signup :
const inputs = document.getElementById('signup').getElementsByTagName('input');// ORconst inputs = document.querySelector('#signup').querySelectorAll('input');Traversing HTMLCollection and NodeList
La plupart des méthodes dont nous avons parlé ci-dessus (sauf getElementById() et querySelector()) renvoient plusieurs éléments sous forme de HTMLCollection ou de NodeList.
Le HTMLCollection n’est pas un tableau mais une collection générique d’éléments. Il n’est donc pas possible de l’itérer avec forEach() ou map(). Cependant, nous pouvons le convertir en un véritable tableau, puis l’itérer à l’aide de la méthode Array.from():
const inputs = document.getElementById('signup').getElementsByTagName('input');// iterate over HTMLCollectionArray.from(inputs).forEach(element => { console.log(element);});Bien que NodeList ne soit pas non plus un tableau, mais il fournit la méthode forEach() pour itérer sur les éléments :
const inputs = document.querySelector('#signup').querySelectorAll('input');//iterate over NodeListinputs.forEach(element => { console.log(element);});Conclusion
C’est tout pour obtenir des éléments du DOM en utilisant JavaScript. Nous avons appris tellement de méthodes différentes pour accéder aux éléments du DOM : en utilisant l’attribut id, le nom de la balise HTML, l’attribut name, l’attribut class et les sélecteurs CSS. Nous avons également abordé les moyens d’itérer sur la collection générique d’éléments renvoyée par ces méthodes.
✌️ Vous aimez cet article ? Suivez @attacomsian sur Twitter. Vous pouvez également me suivre sur LinkedIn et DEV. Abonnez-vous au flux RSS.
👋 Si vous aimez lire mes articles et que vous souhaitez me soutenir pour continuer à créer des tutoriels gratuits, ☕ Achetez-moi un café (coût 5 $) .