UPPREVIOUSNEXT  Technologies Internet et Education, © TECFA
  6. Noeuds et éléments

6. Noeuds et éléments

6.1 DOM Node et DOM Element

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

Node

Element et HTMLElement

Text

6.2 Tests

hasAttribute

hasAttributeNS

hasAttributes

hasChildNodes

6.3 Informations sur l’élément

nodeName

nodeType

Résumé des types de noeuds et leur nom sous forme de constante ou de valeur

 

Interface

(type de noeud)

Nom de la constante

Valeur retournée

par nodeType

Element

Node.ELEMENT_NODE

1

Attribut

Node.ATTRIBUTE_NODE

2

Noeud texte

Node.TEXT_NODE

3

 

Node.CDATA_SECTION_NODE

4

 

Node.ENTITY_REFERENCE_NODE

5

 

Node.ENTITY_NODE

6

Instruction de traitement

Node.PROCESSING_INSTRUCTION_NODE

7

Commentaire

Node.COMMENT_NODE

8

 

Node.DOCUMENT_NODE

9

 

Node.DOCUMENT_TYPE_NODE

10

Fragment XML

Node.DOCUMENT_FRAGMENT_NODE

11

 

Node.NOTATION_NODE

12

 

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!");

6.4 Contenu d’un élément

childNodes

var collNoeuds = elementDeReference.childNodes;

className

firstChild

id

innerHTML (pas compatible W3C DOM !)

var balisage = element.innerHTML;

element.innerHTML = balisage;

lastChild

NodeList.length

nodeValue

textContent

text = element.textContent

element.textContent = "this is some sample text"

appendChild(noeud)

// 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)

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

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

span1 = document.createElement("span");

parentDiv.insertBefore(span1, span2);

6.5 Voisinage d’un élément

parentNode

nextSibling

// dans un tableau, les cellules sont des enfants

cell1 = document.getElementById("td1");

cell2 = cell1.nextSibling;

previousSibling

6.6 Style

style

6.7 Attributs

attributes

// 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)

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

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

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

getAttributeNode()

setAttribute(nom, valeur)

setAttributeNode()

setAttributeNodeNS()


UPPREVIOUS NEXT -- TIE