Table des matières

Javascript - DOM

Le DOM, Document Object Model correspond à l'ensemble des objets définis de manière arborescente générés par le navigateur depuis l'interprétation d'un document HTML.

Le DOM fourni une API permettant sa manipulation, à partir de Javascript.

Les éléments du DOM sont des objets, disposant de propriétés, de méthodes et peuvent être associés à des évènements.

document & accès aux objets

La variable document est l'objet racine généré par un document HTML. Elle permet d'accéder à l'ensemble des objets instanciés dans une page.

Exemple d'accès à un élément par son id,
et modification de son contenu grace à la propriété innerHTML : 

<html>
<body>
    <p id="demo"></p>
    <script>
    document.getElementById('demo').innerHTML = 'Hello World!';
    </script>
</body>
</html>

La propriété innerHTML est accessible sur tous les éléments d'une page (y compris son body), et permet d'affecter un contenu HTML à l'élément.

Accès par id

Un id est unique dans une page Web : le meilleur moyen d'accéder à un élément précis de la page est de le faire par son id :

Accès à l'élément d'id intro : 

const element=document.getElementById('intro');


<h1>Introduction</h1>
<div id="intro">
    <p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>

Accès par tagName

Le tagName correspond au type d'un élément défini par sa balise ouvrante (p, div, a, span…).

Recherche des éléments de type p : 

const elements=document.getElementsByTagName('p');


<h1>Introduction</h1>
<div id="intro">
    <p>Lorem ipsum</p>
</div>
<p>Lorem ipsum</p>

Accès par Classe CSS

La classe CSS permet bien évidemment d'attribuer des styles CSS, mais offre également la possibilité de sélectionner des éléments.

Recherche des éléments de la classe myClass : 

const elements=document.getElementsByClassName('myClass');


<h1>Introduction</h1>
<div id="intro" class="myClass">
    <p>Lorem ipsum</p>
</div>
<p class="para myClass">Lorem ipsum</p>

Accès par sélecteur CSS

Les sélecteurs CSS permettent également de sélectionner des éléments.

Recherche des éléments de type p contenus dans un élément de classe myClass : 

const elements=document.querySelectorAll('.myClass p');

querySelectorAll() retourne la collection d'éléments sélectionnés, tandis que querySelector() retourne le premier élément correspondant. 

<h1>Introduction</h1>
<div id="intro" class="myClass">
    <p>Lorem ipsum</p>
</div>
<p class="para myClass">Lorem ipsum</p>

Collections existantes

Certains objets ou collections sont accessibles depuis l'instance de document :

Objet/collection Description
document.forms Formulaires du document
document.links Liens du document
document.scripts Scripts du document
document.images Images du document
document.body Body du document

Parcours d'une collection

Il est possible de parcourir une collection d'objets retournée, pour réaliser une opération sur chacun de ses éléments, en faisant un forEach :

Paragraphes en rouge : 

document.querySelectorAll("p").forEach(function (p) {
    p.style.color = "red";
});

Attributs

Il est possible d'accéder aux attributs d'un élément du DOM, en lecture pour connaître sa valeur, ou en écriture pour la modifier.

Lecture

<img id="img1" src="https://cdn-icons-png.flaticon.com/512/1249/1249903.png" alt="freepicks sample" title="User image">
<p id="src-image"></p>
<script>
document.querySelector("#src-image").innerHTML=document.getElementById("img1").src;
</script>

freepicks sample

Ecriture

<img id="img2" src="https://cdn-icons-png.flaticon.com/512/1249/1249903.png" alt="freepicks sample" title="User image" width="64px">
<script>
document.getElementById("img2").src="https://cdn-icons-png.flaticon.com/512/1214/1214338.png";
document.getElementById("img2").title='Updated user image'
</script>

freepicks sample

Modification du DOM

innerHTML

Tous les éléments du DOM ont une propriété innerHTML accessible en lecture ou en écriture. 

<p id="para1">Lorem <strong>ipsum</strong></p>
<textarea id="para1-content"></textarea>
<script>
document.getElementById('para1-content').value=document.getElementById('para1').innerHTML;
</script>

Lorem ipsum

L'utilisation de innerHTML en lecture est à utiliser avec précaution, étant donné que le contenu HTML ne peut pas être vérifié et peut produire un DOM incohérent. 

<div id="myDiv">
    <p></p>
    <p></p>
</div>
<script>
document.querySelectorAll("#myDiv p").forEach(function(p){
    p.innerHTML='Hello <strong>world!</strong>';
});
</script>

1

2

write

document.write() permet d'écrire sur la page, à l'endroit où la méthode est appelée. 

<script>
document.write('<p>Hello <strong>world</strong>!</p>');
</script>

createElement & appendChild

La méthode createElement crée un élément et le retourne, tandis que appendChild permet de le placer dans le DOM. 

<p id="append">Ancien contenu...</p>
<script>
const h3=document.createElement("h3");
h3.innerHTML="Hello world!";
document.getElementById('append').appendChild(h3);
</script>

Ancien contenu...

Evènements

Listener

La méthode addEventListener() attache un gestionnaire d'événements à l'élément spécifié. 

<button id="bt-alert">Click me!</button>
<script>
document.getElementById('bt-alert').addEventListener("click", function(){ alert("Hello World!"); });
</script>

Il est possible d'ajouter plusieurs gestionnaires sur le même évènement d'un élément.

Suppression de Listener

<button id="bt-alert-2">Click me...</button>
<script>
const message=function(){ alert('Hello World!'); };
const bt=document.getElementById('bt-alert-2');
bt.addEventListener('click', message);
bt.removeEventListener('click', message);
</script>