Comment attribuer des valeurs aux nœuds en JavaScript

JavaScript est un langage important dans le développement Web moderne et peut réaliser de nombreuses fonctions, parmi lesquelles le fonctionnement du DOM est la plus courante. Dans le développement réel, l'attribution de valeurs aux nœuds (c'est-à-dire aux éléments sur HTML) est une opération courante. Ce qui suit présente en détail comment attribuer des valeurs aux nœuds en JavaScript.

1. Obtenez le nœud

Avant d'attribuer une valeur au nœud, vous devez d'abord obtenir le nœud. Les méthodes couramment utilisées pour obtenir des nœuds sont les suivantes :

1. Obtenir les nœuds par ID

Nous pouvons obtenir le nœud avec l'ID spécifié via la méthode getElementById, par exemple :

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

où "id_name" est la valeur de l'attribut ID de l'élément HTML.

2. Obtenir des nœuds par nom de balise

Nous pouvons obtenir tous les nœuds avec le nom de balise spécifié via la méthode getElementsByTagName, par exemple :

var nodes = document.getElementsByTagName("div");

3. Obtenir des nœuds par nom de classe

Nous pouvons obtenir le nom de classe spécifié via la méthode getElementsByClassName Tous les nœuds, par exemple :

var nodes = document.getElementsByClassName("class_name");

où "class_name" est la valeur de l'attribut de classe de l'élément HTML.

4. Obtenir les nœuds via le sélecteur CSS

Nous pouvons obtenir tous les premiers nœuds qui correspondent au sélecteur CSS via la méthode querySelector, par exemple :

var node = document.querySelector("#id_name .class_name");

où "#id_name" est la valeur de l'attribut ID de l'élément HTML, " .class_name" est la valeur de l'attribut de classe de l'élément.

2. Attribuez des valeurs aux nœuds

Après avoir obtenu les nœuds, vous pouvez leur attribuer des valeurs. Les méthodes d'affectation courantes sont les suivantes :

1. Modifier le innerHTML du nœud

Nous pouvons changer le contenu du nœud en modifiant l'attribut innerHTML du nœud, par exemple :

node.innerHTML = "新的节点内容";

Il est à noter que la modification du innerHTML L'attribut supprimera tous les nœuds enfants d'origine du nœud et les remplacera par un nouveau contenu HTML. Si vous devez ajouter du contenu au nœud au lieu de le remplacer, vous pouvez utiliser la méthode appendChild.

2. Modifier le textContent du nœud

On peut changer le contenu textuel du nœud en modifiant l'attribut textContent du nœud, par exemple :

node.textContent = "新的文本内容";

Il est à noter que la modification de l'attribut textContent supprimera tous les nœuds enfants dans le nœud d'origine et remplacer par un nouveau contenu textuel.

3. Modifier la valeur du nœud

Pour les éléments de formulaire (tels que input, textarea, etc.), on peut changer la valeur en modifiant l'attribut value du nœud, par exemple :

node.value = "新的表单值";

Il est à noter que la modification de l'attribut value concerne uniquement le formulaire Valide pour les éléments, non valide pour les autres nœuds.

4. Modifier la valeur de l'attribut du nœud

Puisque les éléments HTML peuvent avoir des attributs personnalisés, nous pouvons modifier sa valeur en définissant l'attribut du nœud, par exemple :

node.setAttribute("attr_name", "新的属性值");

où "attr_name" est le nom du nœud personnalisé attribut, par exemple data-xxx. "Nouvelle valeur d'attribut" est la nouvelle valeur d'attribut qui doit être définie.

Il convient de noter que les nœuds ont de nombreux attributs à définir, tels que le style, la classe, etc. Vous pouvez définir différents attributs selon vos besoins.

Les méthodes ci-dessus sont courantes pour attribuer des valeurs aux nœuds en JavaScript. Dans le développement réel, comment obtenir rapidement et précisément des nœuds et leur attribuer des valeurs est également une compétence très importante.

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!