Modifier les nœuds en javascript

Modifier les nœuds en JavaScript

JavaScript est un langage de programmation dynamique couramment utilisé comme langage de script côté client dans la conception et le développement Web. HTML (Hypertext Markup Language) est l'un des langages les plus basiques de la conception Web. Il décrit la structure des documents Web à l'aide de balises, et JavaScript peut modifier les nœuds du document HTML en accédant aux objets et aux attributs du document HTML. .

Un nœud est une unité de construction dans un document HTML. Il peut s'agir d'un élément (balise), d'un attribut ou d'un nœud de texte. Par conséquent, pour modifier les nœuds dans le document HTML, vous devez d'abord comprendre le type du nœud.

Modifier les nœuds d'éléments

Tout d'abord, voyons comment modifier les nœuds d'éléments. Les nœuds d'éléments font référence aux balises HTML qui ont une balise de début et une balise de fin. Par exemple, le code suivant :

<div id="myDiv">这是一个div标签</div>

La balise div ici a un attribut id et du contenu textuel dans la balise. Pour modifier cet élément, vous pouvez suivre les étapes suivantes :

1. Récupérez cet objet nœud d'élément via DOM (Document Object Model).

let myDiv = document.getElementById("myDiv");

2. Modifiez les attributs ou les sous-nœuds dans les nœuds d'élément.

myDiv.style.backgroundColor = "red";  // 修改背景颜色
myDiv.innerHTML = "这是经过修改后的内容";  // 修改文本内容

L'attribut style utilisé ici peut modifier le style du nœud d'élément, et l'attribut innerHTML peut modifier le contenu du texte dans le nœud d'élément.

3. Réinsérez le nœud modifié dans le document.

let parentDiv = myDiv.parentNode;
parentDiv.replaceChild(myDiv, myDiv); // 将修改后的节点重新插入到文档中

La méthode replaceChild utilisée ici peut remplacer le nœud d'origine par le nœud modifié.

Modifier les nœuds d'attribut

Voyons comment modifier les nœuds d'attribut. Les nœuds d'attribut font référence aux attributs dans les balises HTML. Par exemple, le code suivant :

<img src="image.jpg" alt="这是一张图片">

La balise img ici a les attributs src et alt. Pour modifier cet attribut, vous pouvez suivre les étapes suivantes :

1. Récupérer l'objet nœud élément via le DOM.

let myImg = document.getElementsByTagName("img")[0];

2. Modifiez la valeur du nœud d'attribut.

myImg.src = "new_image.jpg";  // 修改src属性的值
myImg.alt = "新的图片描述文字";  // 修改alt属性的值

La valeur du nœud d'attribut est directement modifiée ici.

Modifier les nœuds de texte

Enfin, voyons comment modifier les nœuds de texte. Les nœuds de texte font référence aux informations textuelles dans les balises HTML. Par exemple, le code suivant :

<p>这是一段文本</p>

La balise p ici contient un morceau de texte. Pour modifier ce texte, vous pouvez suivre les étapes suivantes :

1. Récupérer l'objet nœud élément via le DOM.

let myP = document.getElementsByTagName("p")[0];
let myText = myP.childNodes[0];  // 获取文本节点

2. Modifiez la valeur des nœuds de texte.

myText.nodeValue = "这是经过修改后的文本";  // 修改文本内容

Après avoir obtenu le nœud de texte ici, son attribut nodeValue est directement modifié.

Résumé

Ce qui précède explique comment modifier les nœuds en JavaScript. Pour modifier un nœud, vous devez d'abord obtenir l'objet nœud correspondant, puis modifier les attributs ou le texte. Grâce à la méthode ci-dessus, nous pouvons modifier de manière flexible divers nœuds du document HTML pour répondre à divers besoins de développement 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!