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
