Propriétés des nœuds : type, balise et contenu

Chaque nœud de l'arbre DOM est un object JavaScript, et cet object expose des propriétés qui vous indiquent quel type de nœud il est, quelle balise il représente et quel contenu il contient. Une fois que vous maîtrisez la lecture de ces propriétés, naviguer et modifier une page devient bien moins source d'erreurs. Ce chapitre couvre la hiérarchie des classes de nœuds, les propriétés de type et de nom (nodeType, nodeName, tagName), ainsi que les quatre propriétés de contenu que vous utiliserez au quotidien (textContent, innerHTML, outerHTML et nodeValue/data) — notamment quand chacune est sûre à employer.

Si vous n'avez pas encore découvert comment le DOM est structuré en arbre, lisez d'abord Comprendre les nœuds DOM.

La hiérarchie des classes de nœuds

Les objects DOM ne partagent pas tous le même ensemble de propriétés. Ils sont organisés en une hiérarchie de classes, où chaque classe ajoute des capacités à celle qui la précède :

• Node — la classe de base. Chaque nœud (élément, texte, commentaire, document) en hérite. Elle fournit des propriétés génériques telles que nodeType, nodeName, nodeValue, parentNode et childNodes.
• Element — un nœud qui est une balise. Ajoute tagName, innerHTML, les attributs, children et des méthodes de requête.
• HTMLElement — la base de tous les éléments HTML concrets. Des sous-classes comme HTMLInputElement, HTMLAnchorElement et HTMLTableElement ajoutent des propriétés spécifiques à chaque balise (ex. input.value, a.href).
• Text et Comment — des nœuds feuilles qui contiennent du texte. Ils héritent de CharacterData, qui ajoute la propriété data.

Connaître cette hiérarchie explique pourquoi un <div> possède innerHTML alors qu'un nœud texte n'en a pas : innerHTML appartient à Element, et un nœud texte n'est pas un élément. Vous pouvez vérifier la classe d'un object avec Object.prototype.toString ou le nom du constructeur :

const div = document.createElement('div');
console.log(div.constructor.name);          // "HTMLDivElement"
console.log(div instanceof HTMLElement);    // true
console.log(div instanceof Element);        // true
console.log(div instanceof Node);           // true

Types et noms de nœuds

Types de nœuds (nodeType)

La propriété nodeType est un entier qui identifie la catégorie d'un nœud. Elle est en lecture seule et constitue le moyen le plus fiable de brancher votre logique lors du parcours du DOM, car les nœuds texte et de commentaire sont faciles à confondre avec des éléments. Les valeurs les plus courantes sont :

• 1 — Nœud élément (Node.ELEMENT_NODE) : une balise HTML ou XML telle que <div> ou <p>.
• 2 — Nœud attribut (Node.ATTRIBUTE_NODE) : hérité ; le code moderne lit les attributs avec getAttribute()/setAttribute() plutôt qu'en parcourant les nœuds d'attribut.
• 3 — Nœud texte (Node.TEXT_NODE) : le texte entre les balises, y compris les espaces et les sauts de ligne.
• 8 — Nœud commentaire (Node.COMMENT_NODE) : un commentaire HTML <!-- ... -->.
• 9 — Nœud document (Node.DOCUMENT_NODE) : l'object document lui-même, la racine de l'arbre.

Préférez les constantes nommées aux nombres bruts — elles se lisent mieux et ne changent jamais :

const div = document.createElement('div');
div.textContent = 'Hello';

console.log(div.nodeType);                          // 1
console.log(div.nodeType === Node.ELEMENT_NODE);    // true

const textNode = div.firstChild;
console.log(textNode.nodeType === Node.TEXT_NODE);  // true

<!-- snippet: html-result -->

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

Noms de nœuds : nodeName vs tagName

Ces deux propriétés retournent le nom d'un nœud, mais elles diffèrent par leur portée :

• nodeName existe sur chaque nœud. Pour un élément, il retourne le nom de la balise ; pour un nœud texte, il retourne "#text" ; pour un commentaire, "#comment" ; pour le document, "#document".
• tagName n'existe que sur les éléments. Sur un nœud non-élément, il vaut undefined.

Pour les documents HTML, les deux retournent le nom de la balise en majuscules ("DIV", et non "div"), quelle que soit la façon dont vous avez écrit la balise :

const div = document.createElement('div');
console.log(div.nodeName);             // "DIV"
console.log(div.tagName);              // "DIV"

const textNode = document.createTextNode('hi');
console.log(textNode.nodeName);        // "#text"
console.log(textNode.tagName);         // undefined

Règle générale : utilisez tagName lorsque vous savez déjà que vous traitez un élément ; utilisez nodeName lorsque vous pourriez inspecter n'importe quel type de nœud.

<!-- snippet: html-result -->

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

Contenu des nœuds

Il existe quatre propriétés pour lire et écrire ce qui se trouve « à l'intérieur » d'un nœud. Choisir la bonne est important pour la correction, les performances et la sécurité.

textContent — texte brut, sûr

textContent obtient ou définit le texte d'un nœud et de tous ses descendants, en ignorant tout balisage. Lorsque vous le lisez, vous obtenez le texte concaténé avec les balises supprimées. Lorsque vous l'écrivez, la chaîne est insérée comme texte littéral — tout < ou > est échappé, ce qui en fait le choix sûr pour afficher des données non fiables :

const div = document.createElement('div');
div.innerHTML = '<b>Hi</b> there';

console.log(div.textContent);          // "Hi there"  (tags stripped)

div.textContent = '<script>alert(1)<\/script>';
console.log(div.textContent);          // "<script>alert(1)</script>"  (inert text, not executed)

<!-- snippet: html-result -->

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

innerHTML — balisage à l'intérieur de l'élément

innerHTML obtient ou définit le HTML entre les balises ouvrante et fermante d'un élément. Le définir analyse la chaîne en tant que HTML et reconstruit les enfants :

const div = document.createElement('div');
div.innerHTML = '<p>Para <span>one</span></p>';

console.log(div.innerHTML);            // "<p>Para <span>one</span></p>"
console.log(div.children.length);      // 1  (the <p>)

Avertissement de sécurité : n'affectez jamais une entrée non fiable à innerHTML. Parce que le navigateur l'analyse comme du HTML, une chaîne telle que <img src=x onerror=alert(1)> devient un véritable élément exécutant des scripts — une faille classique de cross-site scripting (XSS). Utilisez textContent pour les données fournies par l'utilisateur, ou assainissez avant d'insérer.

outerHTML — l'élément y compris sa propre balise

outerHTML est similaire à innerHTML mais inclut les balises ouvrante et fermante de l'élément lui-même. Écrire dedans remplace l'élément lui-même dans le DOM, ce qui a une conséquence surprenante — votre variable pointe toujours vers l'ancien nœud, désormais détaché :

const div = document.createElement('div');
div.id = 'box';
div.innerHTML = 'content';

console.log(div.outerHTML);            // '<div id="box">content</div>'

// Setting outerHTML replaces the node; `div` is now stale.

nodeValue / data — texte à l'intérieur des nœuds texte et de commentaire

Pour les nœuds texte et de commentaire (qui n'ont pas de innerHTML), utilisez nodeValue ou son équivalent data pour lire et écrire leur contenu :

const text = document.createTextNode('original');
console.log(text.nodeValue);           // "original"
console.log(text.data);                // "original"

text.data = 'changed';
console.log(text.nodeValue);           // "changed"

// On an element node, nodeValue is null.
const div = document.createElement('div');
console.log(div.nodeValue);            // null

Laquelle utiliser ?

Pour en savoir plus sur l'insertion et le remplacement de contenu, consultez Modifier le document.

Conclusion

La lecture des propriétés des nœuds est le fondement d'un scripting DOM fiable. Utilisez nodeType (avec les constantes Node.*) pour distinguer les catégories de nœuds, tagName/nodeName pour identifier les balises, et choisissez délibérément une propriété de contenu : textContent pour du texte brut sûr, innerHTML/outerHTML lorsque vous souhaitez intentionnellement analyser du balisage, et nodeValue/data pour les nœuds texte et de commentaire nus. Par défaut, utilisez textContent pour tout ce qu'un utilisateur a saisi.

Pratique