1.1 Concepts de base du DOM
Le Document Object Model (DOM) est une interface de programmation pour les documents Web. Il représente la structure du document comme un arbre de nœuds, où chaque nœud est une partie du document, comme un élément, du texte, un commentaire, etc. Comprendre le DOM et ses nœuds est un aspect fondamental du travail avec les technologies web.
Concepts de base du DOM
Qu'est-ce que le DOM ?
Le DOM (Document Object Model) est une structure hiérarchique qui décrit le contenu d'un document HTML. Il permet aux programmes et scripts d'accéder dynamiquement au contenu du document et de modifier sa structure, son style et son contenu.
Nœuds et éléments
Dans le contexte du DOM, toutes les parties d'un document sont considérées comme des nœuds (node). Les nœuds sont de plusieurs types :
- Nœuds d'élément : représentent les balises HTML.
- Nœuds de texte : représentent le texte à l'intérieur des nœuds d'élément.
- Nœuds de commentaire : représentent les commentaires dans le HTML.
- Nœuds de document : représentent le document lui-même.
Arbre de nœuds
Le DOM est une structure en arbre où chaque nœud peut avoir des descendants (nœuds enfants). Le nœud racine est l'objet document, qui représente tout le document HTML.
Exemple de structure DOM :
<!DOCTYPE html>
<html>
<head>
<title>Document Title</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a paragraph.</p>
</body>
</html>
Pour ce document, l'arbre DOM ressemblera à ceci :
document
└── html
├── head
│ └── title
│ └── #text: "Document Title"
└── body
├── h1
│ └── #text: "Hello, World!"
└── p
└── #text: "This is a paragraph."
1.2 Types de nœuds
1. Nœuds d'élément
Les nœuds d'élément correspondent aux balises HTML. Par exemple, le nœud pour la balise <body> est appelé un nœud d'élément.
Exemple :
Dans cet exemple, <body> et <h1> sont des nœuds d'élément.
<body>
<h1>Hello, World!</h1>
</body>
2. Nœuds de texte
Les nœuds de texte contiennent le texte à l'intérieur des nœuds d'élément. Les nœuds de texte sont des descendants des nœuds d'élément et contiennent des données sous forme de chaîne.
Exemple :
Dans cet exemple, le texte "Hello, World!" est un nœud de texte, descendant du nœud <h1>.
<h1>Hello, World!</h1>
3. Nœuds de commentaire
Les nœuds de commentaire représentent les commentaires dans le HTML, commencés par <!-- et terminés par -->.
Exemple :
Dans cet exemple, <!-- This is a comment --> est un nœud de commentaire.
<!-- This is a comment -->
<p>This is a paragraph.</p>
4. Nœuds de document
Le nœud de document représente le nœud racine de l'arbre DOM et est le nœud parent de tous les autres nœuds dans le document.
Exemple :
L'objet document en JavaScript représente un nœud de document :
console.log(document);
1.3 Interaction avec les nœuds DOM
1. Obtention d'informations sur les nœuds
Les propriétés d'un objet nœud permettent d'obtenir des informations sur un nœud spécifique. Par exemple, on peut connaître le type de nœud, son nom et son contenu.
Exemple :
<html>
<head>
<title>Mon site web</title>
</head>
<body>
<h1>Bonjour, monde !</h1>
</body>
</html>
const heading = document.querySelector('h1');
console.log(heading.nodeName); // Affichera : H1
console.log(heading.nodeType); // Affichera : 1 (Nœud d'élément)
console.log(heading.textContent); // Affichera : "Bonjour, monde !"
2. Modification du contenu des nœuds
Le contenu des nœuds peut être modifié à l'aide des propriétés et méthodes du DOM.
Exemple :
const paragraph = document.querySelector('p');
paragraph.textContent = 'Updated text content';
3. Travail avec les nœuds enfants
Chaque nœud DOM peut avoir des nœuds enfants, auxquels on peut accéder et qu'on peut modifier.
Exemple :
<html>
<head>
<title>Mon site web</title>
</head>
<body>
<ul>
<li>À propos</li>
<li>Carrière</li>
<li>Contacts</li>
</ul>
</body>
</html>
const list = document.querySelector('ul');
const firstItem = list.firstElementChild;
const lastItem = list.lastElementChild;
console.log(firstItem.textContent); // Affichera le texte du premier élément de la liste
console.log(lastItem.textContent); // Affichera le texte du dernier élément de la liste
1.4 Propriétés utiles
1. Propriétés nodeName et nodeType
nodeNameretourne le nom du nœudnodeTyperetourne le type de nœud (par exemple, 1 pour les nœuds d'élément, 3 pour les nœuds de texte)
Exemple :
<html>
<head>
<title>Mon site web</title>
</head>
<body>
<h1>Bonjour, monde !</h1>
</body>
</html>
const element = document.querySelector('h1');
console.log(element.nodeName); // Affichera : H1
console.log(element.nodeType); // Affichera : 1
2. Propriétés textContent et innerHTML
textContentretourne ou définit le contenu textuel d'un nœudinnerHTMLretourne ou définit le contenu HTML d'un nœud
Exemple :
<html>
<head>
<title>Mon site web</title>
</head>
<body>
<p>Vraiment <b>intéressant</b> et <b>utile</b> paragraphe!</p>
</body>
</html>
const element = document.querySelector('p');
console.log(element.textContent); // Affichera le contenu textuel du paragraphe
console.log(element.innerHTML); // Affichera le contenu HTML du paragraphe
3. Propriétés parentNode, childNodes, firstChild et lastChild
parentNoderetourne le nœud parentchildNodesretourne une collection de tous les nœuds enfantsfirstChildretourne le premier nœud enfantlastChildretourne le dernier nœud enfant
Exemple :
<html>
<head>
<title>Mon site web</title>
</head>
<body>
<ul>
<li>À propos</li>
<li>Carrière</li>
<li>Contacts</li>
</ul>
</body>
</html>
const element = document.querySelector('ul');
console.log(element.parentNode); // Affichera le nœud parent
console.log(element.childNodes); // Affichera la collection de nœuds enfants
console.log(element.firstChild); // Affichera le premier nœud enfant
console.log(element.lastChild); // Affichera le dernier nœud enfant
GO TO FULL VERSION