JavaScript - Modèle objet de document (DOM)

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

<p>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.

<p>

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

• Rechercher un élément HTML par ID

<p>Exemple :

<code class="language-javascript">const element = document.getElementById("intro");</code>

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

<p>Exemple :

<code class="language-javascript">const element = document.getElementsByTagName("p");</code>

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

<p>Exemple :

<code class="language-javascript">const x = document.getElementsByClassName("intro");</code>

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

<p>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.).

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

<code class="language-javascript">const x = document.querySelectorAll("p.intro");</code>

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

<p>Nœuds

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

<p>Nœuds d'éléments :

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

<code class="language-html"><h1>Hello, World!</h1></code>

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

<p>Nœud de texte :

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

<code class="language-html"><h1>Hello, World!</h1></code>

Le texte "Hello, World!" à l'intérieur de l'élément <p><h1> est un nœud de texte.

<p>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>.
5. Insérer un élément dans le div : Utilisez appendChild() pour placer l'élément précédemment créé dans le div.
6. Insérer un div dans le document : Enfin, ajoutez le div au corps du document (ou à tout autre élément parent souhaité).

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

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

<p>Changer le style HTML :

<p>Syntaxe :

<code class="language-javascript">document.getElementById(id).style.property = new style;</code>

<p>Exemple : (omis)

<p>

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!