Comment modifier les nœuds DOM à l'aide de JavaScript

Avec le développement des applications web, JavaScript est devenu une partie intégrante. JavaScript peut être utilisé pour modifier le contenu Web et obtenir des effets dynamiques. Parmi eux, la modification du DOM est une partie très importante car c'est la clé pour interagir avec la page Web.

Qu'est-ce que le DOM ?
DOM est le modèle objet de document, qui est une représentation arborescente d'un document HTML. Dans ce document, chaque élément HTML est un nœud, tel que : , ,

, etc. Ces nœuds peuvent avoir des nœuds enfants et des attributs. Par exemple, le nœud

peut contenir des nœuds enfants , et il peut également avoir des attributs, tels que la classe, l'identifiant, etc. JavaScript modifie le contenu de la page Web en manipulant ces nœuds.

Comment sélectionner les nœuds ?
Pour manipuler le DOM, nous devons sélectionner des nœuds. Ceci peut être réalisé de différentes manières, les principales sont les suivantes :

1. Sélectionner un nœud par identifiant

Utilisez la méthode document.getElementById() pour sélectionner un nœud en fonction de l'identifiant spécifié. Comme indiqué ci-dessous :

var myNode = document.getElementById("myNode");

Le code ci-dessus sélectionnera un élément HTML avec id="myNode".

2. Sélectionner les nœuds par classe

Pour sélectionner un ou plusieurs nœuds avec le même attribut de classe, vous pouvez utiliser la méthode getElementsByClassName(). Comme indiqué ci-dessous :

var myNodes = document.getElementsByClassName("classNode");

Le code ci-dessus sélectionnera tous les éléments HTML dont l'attribut class est égal à "classNode".

3. Sélectionner les nœuds par nom de balise

Pour sélectionner tous les nœuds avec des noms de balises spécifiés, vous pouvez utiliser la méthode getElementsByTagName(). Comme indiqué ci-dessous :

var myNodes = document.getElementsByTagName("p");

Le code ci-dessus sélectionnera toutes les balises

Fonctionnement des attributs des nœuds DOM
Les nœuds DOM ont de nombreux attributs, tels que : identifiant, classe, titre, etc. Nous pouvons modifier ou obtenir les valeurs de ces propriétés via JavaScript. Voici quelques méthodes de manipulation des attributs de nœud DOM couramment utilisées :

1. Obtenez ou définissez l'attribut innerHTML

Vous pouvez utiliser la méthode getInnerHTML() pour obtenir l'attribut innerHTML du nœud. Vous pouvez également utiliser la méthode setInnerHTML() pour définir la propriété innerHTML d'un nœud. Comme indiqué ci-dessous :

var myNode = document.getElementById("myNode");

// 获取节点的innerHTML属性
var myNodeInnerHTML = myNode.innerHTML;

// 设置节点的innerHTML属性
myNode.innerHTML = "新的HTML内容";

2. Obtenez ou définissez l'attribut innerText

Pour obtenir l'attribut innerText, vous pouvez utiliser la méthode getInnerText(), et pour définir l'attribut innerText, vous pouvez utiliser la méthode setInnerText(). Comme indiqué ci-dessous :

var myNode = document.getElementById("myNode");

// 获取节点的innerText属性
var myNodeInnerText = myNode.innerText;

// 设置节点的innerText属性
myNode.innerText = "新的文本内容";

3. Obtenez ou définissez l'attribut nodeType

L'attribut nodeType renvoie le type du nœud actuel. Vous pouvez utiliser la méthode getNodeType() pour obtenir l'attribut nodeType du nœud. Vous pouvez également utiliser la méthode setNodeType() pour définir l'attribut nodeType d'un nœud. Comme indiqué ci-dessous :

var myNode = document.getElementById("myNode");

// 获取节点的nodeType属性
var myNodeType = myNode.nodeType;

// 设置节点的nodeType属性
myNode.nodeType = 1;

4. Obtenez ou définissez l'attribut nodeName

L'attribut nodeName renvoie le nom du nœud. Vous pouvez utiliser la méthode getnodeName() pour obtenir l'attribut nodeName du nœud. Vous pouvez également utiliser la méthode setnodeName() pour définir l'attribut nodeName d'un nœud. Comme indiqué ci-dessous :

var myNode = document.getElementById("myNode");

// 获取节点的nodeName属性
var myNodeName = myNode.nodeName;

// 设置节点的nodeName属性
myNode.nodeName = "span";

5. Obtenez ou définissez la propriété nodeValue

La propriété nodeValue renvoie ou définit la valeur d'un nœud. La propriété nodeValue peut être obtenue à l'aide de la méthode getNodeValue(). Pour définir la valeur de la propriété, utilisez la méthode setNodeValue(). Comme indiqué ci-dessous :

var myNode = document.getElementById("myNode");

// 获取节点的nodeValue属性
var myNodeValue = myNode.nodeValue;

// 设置节点的nodeValue属性
myNode.nodeValue = "新的节点内容";

6. Obtenez ou définissez l'attribut className

L'attribut className renvoie ou définit le nom de classe du nœud. L'attribut className peut être obtenu à l'aide de la méthode getclassName(). Pour définir la valeur de l'attribut, vous pouvez utiliser la méthode setclassName(). Comme indiqué ci-dessous :

var myNode = document.getElementById("myNode");

// 获取节点的className属性
var myClassName = myNode.className;

// 设置节点的className属性
myNode.className = "newClass";

7. Obtenez ou définissez l'attribut id

id L'attribut id renvoie ou définit l'identifiant du nœud. L'attribut id peut être obtenu à l'aide de la méthode getId(). Pour définir la valeur de l'attribut, vous pouvez utiliser la méthode setId(). Comme indiqué ci-dessous :

var myNode = document.getElementById("myNode");

// 获取节点的id属性
var myId = myNode.id;

// 设置节点的id属性
myNode.id = "newNode";

Création et insertion de nœuds DOM
En plus de modifier les propriétés des nœuds DOM, les nœuds DOM peuvent également être créés et insérés dans la structure DOM existante.

Créer un nœud DOM
Pour créer un nœud DOM, vous pouvez utiliser la méthode createElement(). Comme indiqué ci-dessous :

// 创建一个新的 <p> 元素
var newNode = document.createElement("p");

// 设置元素的内容
newNode.innerHTML = "新的 HTML 内容";

// 将新元素添加到文档中
document.body.appendChild(newNode);

Insertion de nœuds DOM
Il existe les points suivants pour insérer des nœuds DOM :

1. Insertion de nœuds parents
   Utilisez la méthode appendChild() pour ajouter des éléments à la fin du nœud parent. Comme indiqué ci-dessous :

var parent = document.getElementById("parent");

// 创建新的 <li> 元素
var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到父节点的末尾
parent.appendChild(newNode);

2. Insérer des nœuds frères et sœurs
   Utilisez la méthode insertBefore() pour insérer un nouveau nœud avant un autre nœud. Comme indiqué ci-dessous :

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 将新元素添加到 "node" 元素之前
parent.insertBefore(newNode, node);

3. Replace Node
   Utilisez la méthode replaceChild() pour remplacer un nœud. Comme indiqué ci-dessous :

var newNode = document.createElement("li");

// 设置元素的内容
newNode.innerHTML = "新的列表项";

// 替换父节点下的第二个子节点
parent.replaceChild(newNode, parent.childNodes[1]);

Suppression des nœuds DOM
Les nœuds DOM peuvent être supprimés de différentes manières. Voici quelques méthodes couramment utilisées :

1. Supprimer les nœuds enfants
   Utilisez la méthode removeChild() pour supprimer un nœud enfant. Comme indiqué ci-dessous :

var parent = document.getElementById("parent");

// 移除 "node" 元素
parent.removeChild(node);

2. Remove self
   Le nœud lui-même peut être supprimé à l'aide de la méthode Remove(). Comme indiqué ci-dessous :

var node = document.getElementById("node");

// 移除节点本身
node.remove();

Résumé
En manipulant le DOM à l'aide de JavaScript, le contenu des pages Web, y compris le balisage HTML et le contenu du texte, peut être facilement modifié. Nous pouvons sélectionner des nœuds, modifier les propriétés des nœuds, créer et insérer de nouveaux éléments et supprimer des nœuds existants. Ces opérations permettent au site Web de se mettre à jour dynamiquement et de répondre au comportement des utilisateurs.

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!