Propriétés des nœuds : Type, Balise et Contenu

Maîtriser le Document Object Model (DOM) est essentiel pour tout développeur web souhaitant manipuler dynamiquement les pages web. Cet article explore en profondeur les aspects fondamentaux des propriétés des nœuds DOM, en fournissant des exemples de code pratiques pour améliorer vos compétences en programmation JavaScript.

Comprendre les types et noms de nœuds

En JavaScript, l'arborescence DOM comprend des nœuds de différents types. Chaque nœud du document est un objet représentant une partie de celui-ci. Les nœuds peuvent être des nœuds d'élément, des nœuds de texte, des nœuds d'attribut, etc. Voici un bref aperçu :

• Nœuds d'élément : Représentent les balises HTML ou XML.
• Nœuds de texte : Contiennent le texte à l'intérieur des éléments HTML.
• Nœuds d'attribut : Attributs des éléments HTML (non utilisés directement dans le DOM JavaScript moderne).

Types de nœuds

Cet extrait de code vous aide à déterminer le type d'un nœud, ce qui est crucial lorsque vous parcourez le DOM et devez prendre des décisions en fonction des types de nœuds. La propriété nodeType est un entier. Chaque type de nœud est associé à une valeur numérique spécifique selon la spécification DOM. Voici les types de nœuds les plus couramment utilisés :

• Nœud d'élément : Représenté par le nombre 1. Ce type correspond aux éléments HTML ou XML.
• Nœud d'attribut : Représenté par le nombre 2. Ces nœuds sont utilisés pour spécifier les attributs des éléments, bien que le JavaScript moderne interagisse généralement avec les attributs directement via des méthodes comme getAttribute() et setAttribute(), plutôt que de les traiter comme des nœuds.
• Nœud de texte : Représenté par le nombre 3. Il s'agit des éléments de texte contenus dans les éléments du document. Les nœuds de texte peuvent contenir du texte réel et sont cruciaux pour manipuler le contenu textuel du document HTML.
• Nœud de commentaire : Représenté par le nombre 8. Ces nœuds représentent les commentaires dans les fichiers HTML ou XML.
• Nœud de document : Représenté par le nombre 9. Ce type de nœud représente le document entier (c'est-à-dire l'élément racine, comme le document HTML lui-même).

---

<div id="example">Example node</div>
<script>
    const node = document.getElementById("example");
    node.innerHTML = 'Node type is: ' + node.nodeType;
</script>

Result

Try it Yourself »

Noms de nœuds

Cet exemple montre comment utiliser nodeName. Il s'agit d'une propriété affichant le nom de la balise utilisée dans votre fichier HTML.

---

<div id="example"></div>
<script>
    const element = document.getElementById('example');
    element.innerHTML = 'nodeName: ' + element.nodeName;
</script>

Result

Try it Yourself »

Manipulation du contenu textuel

Modifier le contenu textuel des nœuds est une tâche fréquente. La propriété textContent est un moyen puissant d'obtenir ou de définir le contenu textuel d'un nœud et de ses descendants, en ignorant les balises HTML.

Exemple de code : Mise à jour du contenu textuel

Ce script montre comment mettre à jour le contenu textuel d'un élément en utilisant textContent :

---

<div id="example"></div>
<script>
  const element = document.getElementById('example');
  element.textContent = 'Updated text content';
</script>

Result

Try it Yourself »

Conclusion

Comprendre et manipuler les propriétés des nœuds DOM est une compétence fondamentale pour tout développeur JavaScript. En apprenant à utiliser correctement des propriétés comme nodeName et textContent, vous pouvez gérer efficacement les éléments de vos pages web. Ces exemples fournissent une base solide pour effectuer des tâches courantes impliquant des nœuds DOM.

Pratique

Que indique la propriété 'nodeType' dans un nœud DOM en JavaScript ?

'nodeType' spécifie si le nœud est un Élément, un Attribut ou un Texte.'nodeType' fournit le nom de classe du nœud.'nodeType' est une valeur numérique, 1 représentant un nœud Élément et 3 un nœud Texte.'nodeType' indique si le nœud est visible dans le document.