Qu’est-ce que le DOM et comment le modifier ?

Cet article peut être sujet à des mises à jour

Si vous avez des questions ou bien des remarques, n’hésitez pas à laisser un commentaire.

Document

Le noeud document représente le point de départ, c’est à partir de ce noeud qu’on accède à l’ensemble des éléments du DOM. Il représente également l’objet Document qui fournit diverses méthodes pour accéder aux éléments. ( ex : document.querySelector(‘div.exemple’); )

Élément

Les éléments HTML décrivent la structure d’une page HTML. Pour accéder à l’arbre DOM, commencez par rechercher des éléments via Document. Une fois que vous avez trouvé l’élément que vous voulez, alors vous pouvez accéder à ses noeuds de texte et d’attribut.

Attribut

Les balises d’ouverture des éléments HTML peuvent contenir des attributs ( exemple : id, class, … ) et ceux-ci sont représentés par des noeuds d’attributs dans l’arbre DOM. Les noeuds d’attribut ne sont pas des enfants de l’élément qui les porte. Ils font partie de cet élément et ne peuvent eux-même pas avoir d’enfant. Une fois que vous accédez à un élément, il existe des méthodes et des propriétés JavaScript spécifiques pour lire ou modifier les attributs de cet élément.

Texte

Comme pour le noeud Attribut, vous pouvez accéder à un noeud texte par l’intermédiaire d’un noeud élément et comme pour le noeud attribut, les nœuds de texte ne peuvent pas avoir d’enfants.

Accéder aux éléments

Afin de pouvoir modifier un élément, nous devons d’abord pouvoir y accéder, pour cela ils existent de nombreuses méthodes qui permettent de naviguer à travers le dom et le modifier.

Sélectionnez un élément

• getElementByld() : Permet d’accéder à un élément par l’intermédiaire de son attribut ID.
• querySelector() : Permet de retourner un élément en fonction d’un sélecteur CSS.

Sélectionnez plusieurs éléments

Ces méthodes récupérer nos éléments sous forme d’un tableau

• getElementsByClassName() : Permet de retourner plusieurs éléments par l’intermédiaire d’une classe.
• getElementsByTagName() : Permet de retourner plusieurs éléments par l’intermédiaire d’une balise HTML ( ex: <div> ) .
• querySelectorAll() : Permet de retourner plusieurs éléments en fonction d’un sélecteur CSS.

Passer d’un noeud à un autre

• parentNode : Renvoie l’élément parent de l’élément courant.
• childNodes : Renvoie une liste d’enfants de l’élément courant.
• previousSibling : Renvoie l’élément suivant de l’élément courant.
• nextSibling : Renvoie l’élément précédent de l’élément courant.
• firstChild : Renvoie le premier élément enfant de l’élément courant.
• lastChild : Renvoie le dernier élément enfant de l’élément courant.

Manipuler les attributs

Une fois que vous avez accéder à votre élément vous avez accéder à ses attributs et valeurs avec différente méthodes pour les manipuler.

id

• id : Récupérer ou définit l’id de l’élément

Classe

• className : Récupère ou définit la classe de l’élément.
• classList : Renvoie un tableau listant les classes de l’élément
• add : Ajouter une classe dans la liste
• remove : Enlever une classe de la liste
• toggle : Ajouter/Enlever une classe (Alterne, l’ajoute si elle n’existe pas ou l’enlever si elle existe).
• contains : Renvoie un boolean vrai si une classe est dans la liste.

Attributs en générale

• hasAttribute() : Renvoie un boolean vrai si un attribut existe dans l’élément courant.
• getAttribute() : Retourne la valeur d’un élément.
• setAttribute() : Ajouter un attribut et sa valeur en second argument dans l’élément.
• removeAttribute() : Enlever un attribut dans l’élément.

Accéder aux valeurs.

• nodeValue : Permet de renvoyer le contenue d’un noeud, dans le cadre d’un paragraphe, renvoi son texte mais si le noeud est un attribut, renvoi la valeur de l’attribut.
• innerText : récupère le texte sans prendre en compte le balisage..
• innerHTML : récupère le texte ainsi que le balisage du noeud.
• textContent : textContent le texte comme innerText ainsi que le <script> et <style> à l’inverse de innerText.

Ajouter des éléments en 3 étapes

Une des choses les plus important quand on manipule le DOM c’est de pouvoir créer de nouveaux éléments, on peut créer un élément complet en 3 étapes:

1. createElement() : Vous commencez par créer un nouveau noeud d’élément à l’aide de la méthode createElement(). Ce noeud élément est stocké dans une variable.

   var element= document.createElement("p");

2. createTextNode() : createTextNode() crée un nouveau nœud de texte. Encore une fois, le nœud est stocké dans une variable, il peut être ajouté au nœud élément en utilisant la méthode appendChild().

   var texte = document.createTextNode("Lorem Ipsum");

3. appendChild() : Maintenant que vous avez votre élément avec ou pas un contenu dans un nœud de texte, vous pouvez l’ajouter à l’arbre DOM à l’aide de cette méthode.

   var element = document.createElement('p');
   var texte = document.createTextNode('Lorem Ipsum');
   element.appendChild(texte);
   document.body.appendChild(element);

La méthode write

Peut être vous avez entendu parlez de la méthode document.write pour créer un balisage et du texte dans un document toutefois cette méthode apporte de nombreux inconvénient et des problèmes car il ne fonctionne que lorsque la page est chargée initialement et après qu’il soit chargé, il peut causer différents problèmes.

• Écraser toute la page
• Ne pas ajouter le contenu à la page
• Créer une nouvelle page

Enlever un élément en 3 étapes

Comme pour ajouter un élément dans le DOM, il nous arrivent de devoir supprimer un élément du DOM.

1. Pour ce faire, vous devez stocker dans une variable la variable l’élément que vous voulez supprimer.

   var removeElement= document.getElementById('monId');

2. Ensuite, à partir de cette variable, on doit accéder à l’élément parent via la méthode parentNode .

   var parentElement = removeElement.parentNode;

3. Avec cette seconde variable, vous allez pouvoir supprimer l’élément que vous avez stocké durant la première étape.

   var removeElement= document.getElementById('monId');
   var parentElement = removeElement.parentNode;
   parentElement .removeChild(removeElement);