Manipuler le DOM(document object model) en JavaScript
Qu’est-ce que le DOM ?
Le DOM représente un document HTML sous forme d’arborescence d’objets. Chaque élément HTML est représenté par un objet du DOM, et chaque objet du DOM est un nœud de l’arborescence.
L’objet document représente le document HTML lui-même. Il contient des propriétés et des méthodes qui permettent d'accéder et de manipuler les éléments du DOM.
Les propriétés de l’objet document
L’objet document dispose de nombreuses propriétés qui permettent d'accéder aux informations sur le document HTML via le JavaScript par exemple.
document.body: renvoie l'objet qui représente le corps du document HTML.document.head: renvoie l'objet qui représente la section <head> du document HTML.document.title: renvoie la valeur de l'attributtitlede la section <head> du document HTML.document.querySelector(): renvoie l'objet qui représente le premier élément du DOM qui correspond à la sélection CSS spécifiée.document.querySelectorAll(): renvoie une collection d'objets qui représentent tous les éléments du DOM qui correspondent à la sélection CSS spécifiée.
Les méthodes de l’objet document
L’objet document dispose de nombreuses méthodes qui permettent de manipuler les éléments du DOM.
document.createElement(): crée un nouvel objet du DOM.document.appendChild(): ajoute un élément du DOM à la fin d'un autre élément du DOM.document.removeChild(): supprime un élément du DOM d'un autre élément du DOM.document.getElementById(): renvoie l'objet qui représente l'élément du DOM dont l'ID est spécifié.document.getElementsByTagName(): renvoie une collection d'objets qui représentent tous les éléments du DOM dont le nom est spécifié.
Voici quelques exemples de manipulation du DOM en JavaScript :
// Obtenir le corps du document HTML
const body = document.body;
// Ajouter un élément <p> au corps du document HTML
const p = document.createElement("p");
p.textContent = "Ceci est un paragraphe";
body.appendChild(p);
// Supprimer un élément <p> du corps du document HTML
const p = document.querySelector("p");
body.removeChild(p);
// Obtenir l'élément du DOM dont l'ID est "mon-element"
const element = document.getElementById("mon-element");
// Obtenir tous les éléments du DOM dont le nom est "div"
const elements = document.getElementsByTagName("div");
/* Si vous ne comprenez pas sur le coup,
C’est normal Prenez le temps et relisez ligne par ligne.*/- Modifier le contenu d’un élément
// Utilise la méthode `querySelector()` pour trouver l'élément du DOM dont on souhaite modifier le contenu.
const p = document.querySelector("p");
// Utilise la méthode `textContent` pour modifier le contenu de l'élément.
p.textContent = "Nouveau contenu";- Modifier les propriétés d’un élément
// Utilise la méthode `querySelector()` pour trouver l'élément du DOM dont on souhaite modifier les propriétés.
const p = document.querySelector("p");
// Utilise la propriété `style` pour accéder aux propriétés CSS de l'élément.
p.style.backgroundColor = "red";- Créer une nouvelle structure DOM
// Crée un nouvel élément `div`.
const container = document.createElement("div");
// Définit le contenu de l'élément `div`.
container.textContent = "Contenu du conteneur";
// Crée un nouvel élément `p`.
const p = document.createElement("p");
// Définit le contenu de l'élément `p`.
p.textContent = "Paragraphe";
// Ajoute l'élément `p` à l'élément `div`.
container.appendChild(p);
// Ajoute l'élément `div` au corps du document HTML.
document.body.appendChild(container);Voici trois liens vers des ressources en ligne si vous souhaitez aller plus loin.
MDN Web Docs : DOM, JavaScript HTML DOM, JavaScript DOM Tutorial
Si tu viens de me découvrir, Je suis Serge AMOUSSOUGBO, développeur web Front-end et Spécialiste WordPress.
Tu as aimer cet article ? Partage le, Merci !