Share on facebook
Facebook
Share on google
Google+
Share on twitter
Twitter
Share on linkedin
LinkedIn

Le DOM

La branche DOM (Document Object Model) de javascript va vous permettre de manipuler le code HTML d’un document. C’est grâce au DOM qu’il est possible d’accéder aux éléments HTML, de les éditer, de les modifier, et même de s’infiltrer dans la structure de la page pour rajouter ou supprimer des objets HTML. Apprendre le DOM va donc vous permettre de naviguer dans le document HTML.

Accéder aux éléments

Voici les différentes façons de cibler les éléments en Javascript.

A partir de l’attribut ID de la balise

La méthode getElementById() de l’objet ‘document’ permet de cibler l’élément par son identifiant unique.

Code html

<header id="entete">Tutovisuel</header>

Code Javascript

let cible = document.getElementById("entete");

Cette méthode ne renvoie donc qu’un seul objet puisque l’id est unique dans une page web.

Attention : contrairement aux autres méthodes qui suivent, getElementById ne peut être utilisé qu’avec l’objet document.

A partir de la balise HTML

La méthode getElementsByTagName() permet de cibler les éléments correspondants à un tag précis. Remarquez la présence du ‘s’ après getElement qui signifie que cette méthode retourne une collection (un tableau) d’objets.

Code html

<ul>
    <li>un</li>
    <li>deux</li>
    <li>trois</li>
</ul>

Code Javascript

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

La variable cible contient un tableau.

A partir de l’attribut NAME de la balise

La méthode getElementsByName() permet de cibler l’élément par son attribut Name. Remarquez aussi la présence du ‘s’ après getElement qui signifie que cette méthode retourne une collection (un tableau) d’objets.

L’attribut Name ne concerne que les éléments HTML présents dans un formulaire.

Code html

Sexe : <input type="radio" name="genre"> H <input type="radio" name="genre"> F
let cible = document.getElementsByName("genre");

La variable cible contient un tableau.

A partir d’une collection d’éléments (tableau)

Vous pouvez directement accéder à certains éléments en utilisant des collections.

document.forms retourne tous les formulaires du document sous forme d’un tableau (document.forms[0], par exemple, permet d’accéder au premier formulaire de la page)

document.images retourne toutes les images du document sous forme d’un tableau (document.images[0], par exemple, permet d’accéder à la première images de la page).

document.links retourne tous les liens (balise <a> ou <area> ayant une valeur d’attribut href ) du document sous forme d’un tableau (document.links[0], par exemple, permet d’accéder au premier lien de la page).

A partir d’un sélécteur CSS défini

Les méthodes querySelector() et querySelectorAll() vont étendre les possibilités de ciblage en javascript puisqu’elles permettent de trouver les éléments selon n’importe quel sélecteur CSS.

La première méthode querySelector() ne cible que le premier élément trouvé et ne renvoie donc qu’un seul objet.

La deuxième méthode querySelectorAll() cible tous les éléments trouvés et renvoie donc un tableau d’objets.

Code html

<ul>
    <li class="active">un</li>
    <li>deux</li>
    <li>trois</li>
</ul>

Code Javascript

let objActif = document.querySelector(".active"); // cible le premier li
let tabLi = document.querySelectorAll("ul li"); // cible tous les li

A partir d’un élément quelconque d’un document

Hormis avec la méthode getElementById(), les collections d’éléments, les méthodes querySelector() et querySelectorAll() , toutes les autres méthodes indiquées ci-dessus peuvent être utilisées à partir d’un élément donné.

Code html

<ul id="liste">
    <li class="active">un</li>
    <li>deux</li>
    <li>trois</li>
</ul>

Code Javascript

let obj = document.getElementById("liste"); // cible la balise UL
let liste = obj.getElementsByName("li"); // cible toutes les balises LI contenues dans obj seulement

Notes : on préférera l’utilisation des méthodes querySelector() et querySelectorAll().

Editer les éléments

Javascript est capable de lire ou modifier un élément HTML. Il est possible d’agir sur son contenu mais aussi sur ses attributs.

Lire ou modifier le contenu d’un élément HTML

La propriété innerHTML permet d’accéder en lecture ou en écriture au contenu d’un objet HTML.

Code html

<div></div>

Code Javascript

let obj = document.querySelector("div"); // cible la balise div
obj.innerHTML = "Je suis <strong>toto</strong>"; // on ecris toto dans la balise

Affichage

Il est possible d’éditer du code HTML avec cette propriété.

Travailler avec les attributs d’un élément HTML

La méthode getAttribute() renvoie la valeur d’un attribut ou une chaîne vide(«  ») si l’attribut recherché n’existe pas.

Code html

<a href="//tutowebdesign.com/">Tutovisuel</a>

Code Javascript

let obj = document.querySelector("a"); // cible la balise a
document.write( "<br> Valeur de href : "+ obj.getAttribute("href") ); // on récupère la valeur de href

Affichage

Le script ci-dessous récupère bien la valeur de l’attribut ‘href’.

La méthode setAttribute() rajoute ou change la valeur d’un attribut.

Dans l’exemple ci-dessous, on change le destination du lien par la méthode ‘setAttribute()’.

Code html

<a href="https://tutowebdesign.com/">Changer la destination</a>

Code Javascript

let obj = document.querySelector("a"); // cible la balise a
document.write( "<br> Valeur de href : "+ obj.getAttribute("href") ); // on récupère la valeur de href
obj.setAttribute("href","https://openclassrooms.com");
document.write( "<br> Valeur de href : "+ obj.getAttribute("href") ); // on récupère la nouvelle valeur de href

Affichage

Cliquez sur le lien pour voir le résultat

La méthode hasAttribute() permet de vérifier la présence d’un attribut : renvoie true si c’est le cas et false dans le cas contraire.

Code html

<a href="https://tutowebdesign.com/">Changer la destination</a>

Code Javascript

let obj = document.querySelector("a"); // cible la balise a
document.write( "<br> Présence de href : "+ obj.hasAttribute("href") ); // vérifie la présence de href

Affichage

Vous remarquez que le script renvoie true dans l’exemple ci-dessus.

La méthode removeAttribute() supprime un attribut.

Dans l’exemple ci-dessus, l’attribut style du deuxième lien est supprimé dynamiquement par le javascript.

Code html

<a href="https://tutowebdesign.com/" style="color:green">Tutovisuel</a>
<br>
<a href="https://tutowebdesign.com/" style="color:green">Tutovisuel</a>

Code Javascript

let obj1 = document.querySelectorAll("a")[0]; // cible la première balise a
let obj2 = document.querySelectorAll("a")[1]; // cible la deuxième balise a
obj2.removeAttribute("style"); // supprime l'attribut style du deuxième lien

Affichage

Modifier le style CSS d’un élément HTML

Javascript propose des solutions pour agir dynamiquement sur la présentation des éléments HTML. Cela s’avère utile pour créer des animations ou des effets graphiques sur vos page web.

La propriété STYLE

La propriété style d’un élément HTML permet d’accéder ou de modifier ses propriétés CSS.

Dans l’exemple ci-dessous Javascript rajoute un arrière-plan au paragraphe.

Code html

<p>Lorem ipsum dolor sit amet</p>

Code Javascript

let obj = document.querySelector("p"); // cible la balise a
obj.style.backgroundColor = "orange"; // rajoute un fond orange au paragraphe

Affichage

Note : les propriétés sont les mêmes qu’en CSS, cependant lorsque la propriété contient des termes séparés par le tiret, comme background-color, il faut supprimer le tiret et mettre en majuscule le mot qui suit, ce qui donne backgroundColor.

La propriété CLASSNAME

La propriété className permet d’accéder, en écriture ou en lecture, à l’attribut class un élément HTML. Si cet attribut n’existe pas, Javascript le rajoute dynamiquement.

Dans l’exemple ci-dessous Javascript rajoute rajoute la classe orange au paragraphe.

Code html

<p>Lorem ipsum dolor sit amet</p>

Code Css

.orange{
  background-color: orange;
}

Code Javascript

let obj = document.querySelector("p"); // cible la balise a
obj.className = "orange"; // rajoute la classe orange au paragraphe
alert(obj.className);

Affichage

 Attention : si vous appliquez une autre valeur à className les anciennes valeurs seront supprimées.

L’API CLASSLIST

Cet API (compatible qu’à partir d’Internet Explorer 10) permet d’étendre les possibilités de manipulation des classes HTML.

  • connaitre le nombre de classes : obj.classList.length
  • ajouter une valeur de classe : obj.classList.add(« uneClassCss »)
  • supprimer une valeur de classe : obj.classList.remove(« uneClassCss »)
  • ajouter ou supprimer une valeur de classe existante : obj.classList.toggle(« uneClassCss »)
  • retourner la chaîne complète d’une classe : obj.classList.toString()

L’exemple ci-dessous permet de rajouter ou de supprimer la classe .border au bouton orange.

Code html

<button onclick="change()">click!</button>
<input type="button" value="remove" onclick="remove()">

Code Css

.orange{
  background-color: orange;
}
.border{
  border: solid red;
}

Code Javascript

let obj = document.querySelector("button"); // cible la balise a
obj.className = "orange"; // rajoute la classe orange au paragraphe
obj.classList.add("border"); // ajoute une autre valeur de classe sans supprimer 'orange'
function change(){
  obj.classList.toggle("border"); // ajoute ou supprime la classe
}
function remove(){
  obj.classList.remove("border"); // supprime la classe
}

Affichage

Cliquez sur le bouton click! plusieurs fois pour rajouter ou supprimer la bordure. En cliquant sur le bouton remove, vous supprimer la classe ‘.border’ si elle existe.

Naviguer dans le DOM

Avec Javascript, il est possible de s’infiltrer dans une structure HTML existante pour la modifier, rajouter des éléments, ou récupérer du contenu.

Comprendre les noeuds

En HTML, les balises sont organisés de manière hiérarchique : on se retrouve avec des objets parents et des objets enfants direct ou enfants descendants (la balise <ul> contient la balise <li> qui contient la balise <a> ). Chaque élément de la structure est désigné comme étant un noeud.

Il existe cepandant trois types de noeud :

  •  Le noeud élément qui fait référence à la balise HTML
  •  Le noeud attribut ou noeud associé qui fait référence à un attribut (comme l’attribut class)
  •  Le noeud texte qui fait référence au contenu texte (attention, un espace ou un retour à la ligne est considéré comme un noeud)

Informations sur un noeud

Pour savoir s’il s’agit d’un noeud élément, ou d’un noeud attribut ou bien d’un noeud texte, utilisez la proprieté nodeType qui retourne :

  •  Le valeur 1 pour un noeud élément
  •  Le valeur 2 pour un noeud attribut
  •  Le valeur 3 pour un noeud texte

Pour connaitre le nom courant d’un noeud, utilisez la proprieté nodeName. Cette propriété retourne, par exemple la chaine IMG pour la balise image.

L’exemple ci-dessous retourne les informations du nœud élément INPUT.

Code html

Nom : <input type="text" id="nom" name="nom">

Code Javascript

let obj= document.getElementById("nom");
document.write("<br> Information type du noeud : "+obj.nodeType); // affiche le type de noeud
document.write("<br>Nom de l'attribut : "+obj.nodeName); // affiche le nom du noeud

Affichage

Pour rappel, la valeur 1 désigne un nœud de type élément.

Récupérer tous les noeuds d’attribut

La propriété attributes retourne dans l’ordre un tableau d’attributs de l’élément HTML.

Code html

Nom : <input type="text" id="nom" name="nom">

Code Javascript

let obj= document.getElementById("nom"); // cible la balise INPUT
document.write("Valeur de l'attribut type : "+obj.attributes[0].value); // affiche le premier attribut

Affichage

L’attribut value retourne la valeur de la cible.

Accès aux noeuds enfants

Pour accéder aux noeuds d’un élément donné :

  •  Le propriété obj.childNodes renvoie un tableau de tous les noeuds enfants
  •  Le propriété obj.firstChild renvoie le premier noeud : equivalent à obj.childNodes[0]
  •  Le propriété obj.lastChild renvoie le dernier noeud :

Attention au nœuds vides.

Dans l’exemple ci-dessous, vous remarquez que le script renvoie 7 enfants et non pas trois.

En effet les espaces et les retours à la ligne à l’intérieur du parent sont considérés comment des nœuds texte.

Avant de récupérer les nœuds enfants, vous pouvez vérifier la présence d’enfants avec la méthode hasChildNodes() à appliquer sur le parent. La méthode renvoie true si au moins un enfant est trouvé.

Code html

<p id="p1">Contenu <span>texte</span></p>

Code Javascript

let obj= document.getElementById("p1"); // cible la balise P
alert(obj.hasChildNodes()); // retourne 'true'

Ce code retournera la valeur ‘true’.

Accès aux noeuds ancêtres

Pour remonter d’un niveau supérieur à partir d’un élément donné, utilisez la propriété parentNode.

L’exemple ci-dessous ajoute une bordure à l’élément parent du premier LI, à savoir au UL.

On ne remonte que d’un seul cran dans la hiérarchie des noeuds avec cette propriété.

Accès aux noeuds frères

La propriété previousSibling permet de naviguer vers le nœud précédent tandis que nextSiblingcible le nœud suivant.

Comme dans le cas précédent, attention au nœuds vides.

Dans l’exemple ci-dessous entre le premier SPAN et le deuxième, il y a un espace (considéré comme un nœud), d’où l’utilisation du double nextSibling.

La propriété previousElementSibling permet de naviguer vers le nœud de type élément précédent tandis que nextElementSibling cible le nœud de type élément suivant. Ceci permet d’éviter les nœuds de type texte vides.

Dans l’exemple ci-dessous entre le premier SPAN et le deuxième, l’espace (considéré comme un nœud), est ignoré d’où l’utilisation du simple nextElementSibling.

La propriété firstElementSibling permet de naviguer vers le premier nœud de type élément tandis que lastElementSibling cible le dernier nœud de type élément.

Récupérer la valeur d’un noeud texte

La propriété nodeValue retourne la valeur d’un nœud texte seulement. Un nœud texte est toujours enfant d’un nœud élément

Dans l’exemple ci-dessous, on récupère la valeur du premier enfant de la balise P.

Création et insertion de nœuds

Javascript ne permet pas seulement de naviguer dans le DOM, il peut aussi modifier en profondeur le document et créer de nouveaux nœuds. Attention le fait de créer un nœud ne suffit pas pour qu’il soit affiché : il faudra utiliser les méthodes d’insertion détaillées ci-dessous.

Création d’un nœud élément

La méthode createElement() permet de créer un élément HTML. Elle prend comme paramètre le nom de la balise à créer.

let p = document.createElement("p"); // création de la balise P

Vous pouvez rajouter des attributs avec la méthode setAttribute() vue plus haut ou directement sur le nœud avec la syntaxe pointée.

p.id = "p1"; // création de l'attribut 'id'
p.setAttribute("accesskey","a"); // creation de l'attribut 'accesskey'

On vient de créer un paragraphe mais le contenu est vide.

Création d’un noeud texte

La méthode createTextNode() permet de créer du contenu texte. Elle prend comme paramètre la chaîne à créer.

let txt = document.createTextNode("Contenu de mon paragraphe"); // création du contenu texte

Insertion d’un noeud

La méthode appendChild() permet d’insérer un élément en tant que dernier enfant d’un élément parent.

Le nœud texte étant l’enfant d’un nœud élément, le code qui suit insère le texte (txt) dans la balise paragraphe (p).

p.appendChild(txt); // insertion du texte dans le paragraphe

Si vous souhaitez insérer un nœud sur un élément existant, il suffit d’utiliser une méthode d’accessibilité pour cibler l’élément et appliquer à nouveau la méthode appendChild().

Code html

<p id="ct"></p>

Code Javascript

let txt = document.createTextNode("Contenu de mon paragraphe"); // création du contenu texte
let obj = document.getElementById("ct"); // on accéde à l'identifiant présant sur la page
obj.appendChild(txt); // insertion du texte dans 'obj'

Affichage

Il est possible de rajouter un nœud avec la méthode insertBefore() qui prend comme premier paramètre l’élément à insérer et comme deuxième paramètre l’élément avant lequel on doit insérer le nouvel élément. Attention la méthode doit être appliquée sur l’élément parent de l’élément à ajouter.

Code html

<p id="ct"><span id="span">le contenu texte</span></p>

Code Javascript

let txt = document.createTextNode("Voici "); // création du contenu texte
let objB = document.createElement("b"); // création de la balise B
objB.appendChild(txt); // insertion du texte dans B
let ct = document.getElementById("ct"); // on accéde au parent
let span = document.getElementById("span"); // on accéde au span présant sur la page
ct.insertBefore(objB,span);// insertion de B avant span

Affichage

N’oubliez pas de rajouter du contenu texte à un élément avant de l’insérer

Supprimer un élément

On peut supprimer un élément enfant d’un élément parent avec la méthode removeChild() à appliquer au parent.

Code html

<ul id="liste">
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
</ul>

Code Javascript

let liste = document.getElementById("liste");  // accede au parent
liste.removeChild(liste.childNodes[3]); // supprime le quatrième noeud (le retour à la ligne est un noeud)

Affichage

N’oubliez pas que les retours à la ligne sont considérés comme des nœuds.

Cloner un élément

On peut créer une copie d’un élément en appliquant sur cet élément la méthode cloneNode(). Elle pend comme paramètre un booléen : si true les enfants sont aussi cloner, dans le cas contraire utiliser false comme valeur.

L’exemple ci-dessous crée une copie de UL et l’affiche en dessous.

Code html

<ul id="liste">
  <li>un</li>
  <li>deux</li>
  <li>trois</li>
</ul>

Code Javascript

//on cible la liste
let liste = document.getElementById("liste");
// on créer une copie
let clone = liste.cloneNode(true);
//On insert la copie
liste.parentNode.appendChild(clone);

Affichage

Un élément cloné n’est pas insérer. il faudra penser à utiliser une méthode d’insertion comme appendChild ou insertBefore().

Remplacer un élément

On peut remplacer un élément par un autre en utilisant la méthode replaceChild(). Elle pend comme premier paramètre le nouvel élément et comme deuxième paramètre l’élément qui doit être remplacé. La méthode replaceChild() doit s’appliquer sur l’élément parent du nœud à remplacer.

L’exemple ci-dessous remplace le contenu du paragraphe par un autre contenu texte.

Code html

<p id="p1">Contenu à remplacer</p>

Code Javascript

// on cible le paragraphe
let liste = document.getElementById("p1");
// on cible le noeud texte du paragraphe
let ancienTexte = liste.firstChild;
// on crée le nouveau noeud texte
let nvxTexte = document.createTextNode("Nouveau texte");
// on remplace le texte
liste.replaceChild(nvxTexte,ancienTexte);

Affichage

A lire aussi

tutowebdesign

Afficher du contenu au scroll

Afficher du contenu au scroll Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire

Lire »
tutowebdesign

Créer un menu latéral animé

Créer un menu latéral animé Idéal pour les formats mobiles, voici un menu latéral animé facile à faire dont l’ouverture est déclenchée par Javascript. Commençons

Lire »
MegaphoNews - Closer Than Ever

The leading news agency comes to your smartphone.  Download now.

Politique d'utilisation des cookies

En poursuivant votre navigation sur ce site, vous acceptez l’utilisation de cookies. Les cookies nous permettent de personnaliser le contenu, les sorties et d’optimiser notre trafic.