JavaScript - Modèle objet de document (DOM)

Explication détaillée du DOM : Interface de programmation pour les documents Web

DOM (Document Object Model) est une interface de programmation pour documents Web qui représente la structure d'un document HTML ou XML sous la forme d'une arborescence d'objets. Avec le DOM, les développeurs peuvent utiliser JavaScript pour interagir et manipuler dynamiquement les pages Web. Le HTML DOM permet à JavaScript de modifier le contenu des éléments HTML.

Comment rechercher et accéder aux éléments HTML dans les pages HTML ?

• Rechercher un élément HTML par ID

Exemple :

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

• Rechercher des éléments HTML par nom de balise

Exemple :

const element = document.getElementsByTagName("p");

• Rechercher des éléments HTML par nom de classe

Exemple :

const x = document.getElementsByClassName("intro");

• Rechercher des éléments HTML à l'aide des sélecteurs CSS

Utilisez la méthode querySelectorAll() pour rechercher tous les éléments HTML qui correspondent à un sélecteur CSS spécifié (ID, nom de classe, type, attribut, valeur d'attribut, etc.).

Exemple : Rechercher des éléments de paragraphe avec le nom de classe « intro » :

const x = document.querySelectorAll("p.intro");

• Trouver des éléments HTML à l'aide d'une collection d'objets HTML

Nœuds

Tout dans le DOM est un nœud, comme les éléments, le texte et les attributs.

Nœuds d'éléments :

représente un élément HTML ou XML. Par exemple : <div>, <code><h1></h1>, <p></p>, <span></span>, etc.

<h1 id="Hello-World">Hello, World!</h1>

Dans l'exemple ci-dessus, <h1></h1> est un nœud d'élément.

Nœud de texte :

représente le contenu du texte dans l'élément.

<h1 id="Hello-World">Hello, World!</h1>

Le texte "Hello, World!" à l'intérieur de l'élément

<h1></h1> est un nœud de texte.

Créer un nouvel élément HTML (nœud) :

1. Créer un élément : Utilisez la méthode document.createElement() pour créer un élément HTML.
2. Créer un nœud de texte : Utilisez la méthode document.createTextNode() pour créer un nœud de texte.
3. Ajouter du texte à un élément : Utilisez la méthode appendChild() pour ajouter un nœud de texte à un élément déjà créé.
4. Créer un élément div : Utilisez à nouveau document.createElement() pour créer l'élément <div>. <li> <strong>Insérer un élément dans le div :</strong> Utilisez <code>appendChild() pour placer l'élément précédemment créé dans le div.
5. Insérer un div dans le document : Enfin, ajoutez le div au corps du document (ou à tout autre élément parent souhaité).

Exemple d'extrait de code (omettre le code complet, ne conserver que les parties clés) :

// 创建一个段落元素
const para = document.createElement("p");
// 创建一个文本节点
const text = document.createTextNode("这是一个新的段落！");
// 将文本节点添加到段落元素
para.appendChild(text);
// ... (后续代码将段落元素添加到页面)

Changer le style HTML :

Syntaxe :

document.getElementById(id).style.property = new style;

Exemple : (omis)



Grâce aux méthodes ci-dessus, vous pouvez manipuler et modifier efficacement le contenu Web.