6. Noeuds et éléments

Pour rappel, un aperçu des types d’objets DOM universels les plus importants:

Node

• implémente le noeud de base dans un arbre XML ou HTML
• implémente toutes les propriétés et méthodes pour examiner et pour traverser un arbre

Element et HTMLElement

• (hérite de Node)
• implémente les éléments (donc ce qui correspond à une balise et son contenu)
• implémente surtout les propriétés et méthodes nécessaires pour manipuler des attributs
• Par rapport à Element, HTMLElement implémente des fonctionalités supplémentaires

Text

• (hérite de Node et de CharacterData)
• implémente les CDATA (texte à l’intérieur d’une balise).

hasAttribute

• Returne une valeur booléenne qui indique si l’attribut existe ou pas.

hasAttributeNS

• pareil, mais pour un namespace

hasAttributes

• Returne une valeur booléenne qui indique si l’élément possède des attributs.

hasChildNodes

• Retourne une valeur booléenne qui indique si l’élément courant a des enfants ou non.

nodeName

• Retourne le nom du noeud.

nodeType

• Retourne les type d’un noeud sous forme d’un nombre entier
• Ces informations sont très importants pour savoir ce qu’un programme doit faire avec un noeud.

Exemple 6-1: Tester si le premier noeud d’un document est un commentaire

var node = document.documentElement.firstChild;

if(node.nodeType != Node.COMMENT_NODE)

  alert("You should comment your code well!");

childNodes

• Renvoie une liste des nœuds enfants de l'élément.

var collNoeuds = elementDeReference.childNodes;

className

• Définit ou obtient la classe de l'élément.

firstChild

• Renvoie le premier enfant direct du nœud.

id

• Définit ou obtient l'identifiant (id) de l'élément courant.

innerHTML (pas compatible W3C DOM !)

• Renvoie ou définit l'ensemble du balisage et du texte contenu au sein d'un élément donné.
• Balisage est une chaîne contenant le contenu de l'élément (y compris ses sous-éléments) au format HTML brut. Par exemple, "<p>Du texte</p>".

var balisage = element.innerHTML;

element.innerHTML = balisage;

lastChild

• Retourne le dernier enfant d’un noeud.

NodeList.length

• Returne le nombre d’items dans une liste (e.g. childNodes).

nodeValue

• Returne la valeur d’un noeud.

textContent

• Retourne/définit le contenu texte d’un élément.

text = element.textContent

element.textContent = "this is some sample text"

appendChild(noeud)

• Insère le nœud spécifié à la fin de la liste de nœuds de l’élément courant.

// Create a new paragraph element

var p = document.createElement("p");

// Append it to the end of the document body

document.body.appendChild(p);

insertBefore (nouvel_élément, élément_cible)

• La méthode insertBefore permet d'insérer un nœud juste avant un élément de référence parmi les enfants du nœud courant.

parentDiv = document.getElementById("div-parent");

span2 = document.getElementById("span-enfant");

span1 = document.createElement("span");

parentDiv.insertBefore(span1, span2);

parentNode

• Retourne le noeud parent.

nextSibling

• Renvoie le nœud suivant immédiatement dans l'arbre (petit frère)

// dans un tableau, les cellules sont des enfants

cell1 = document.getElementById("td1");

cell2 = cell1.nextSibling;

previousSibling

• Retourne le noeud précédant (grande soeur).

style

• retourne l’objet qui contient les définitions du style.
• cf. chapitre 11. “HTML Style” [39]

attributes

• Renvoie une collection des attributs de l'élément.

// récupère le premier élément <p> du document

var para = document.getElementsByTagName("p")[0];

// récupère ses attributs

var attr = para.attributes;

getAttribute(nom_attribut)

• Returns the value of the named attribute on the current node.

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

var align = div1.getAttribute("align");

alert(align); // shows the value of align for the element with id="div1"

getAttributeNode()

• Returne l’attribut du noeud en tant que noeud, c.f. 8. “HTML Attribut” [34]

setAttribute(nom, valeur)

• Ajoute un attribut avec une valeur ou change la valeur d’un attribut qui existe.

setAttributeNode()

• Ajoute un noeud attribute à l’élément courant.

setAttributeNodeNS()

• Pareil, mais avec un namespace.