Modèle DOM

Le modèle DOM est un arbre d’objets Node (noeud). On aura donc un node racine avec x nodes fils. La relation entre les nodes est donc verticale entre des noeuds enfants et des noeuds parents, mais il existe aussi une relation horizontale entre deux nodes accolés de même niveau hiérarchique. Dans notre contexte, le modèle DOM représente les éléments HTML, mais de façon général, il est applicable dans toutes sortes de documents XML, car le HTML est une réprésentation XML particulière en schématisant.

Exemple : 
<html>
	<head>
	</head>
	<body>
		<div></div>
		<div></div>
	</body>
</html>

Interface Node

L’interface Node fournit donc tous les outils nécessaires au déplacement a l’intérieur de la structure du document ainsi que des méthodes pour modifier cette structure.

Les propriétés

  • attributes (liste des attributs)
  • childNodes (nœuds enfant)
  • firstChild (premier nœud enfant)
  • lastChild (dernier nœud enfant)
  • nextSibling (prochain nœud d'un type)
  • nodeName (nom du nœud)
  • nodeType (type du nœud)
  • nodeValue (valeur/contenu du nœud)
  • parentNode (nœud parent)
  • previousSibling (nœud précédent d'un type)

Les méthodes

  • appendChild() (ajouter un nœud enfant)
  • cloneNode() (copier un nœud)
  • deleteData() (effacer des données en caractères)
  • getAttribute() (rechercher la valeur d'un nœud attribut)
  • getAttributeNode() (rechercher un nœud attribut)
  • hasChildNodes() (vérifier l'existence de nœuds enfants)
  • insertBefore() (insérer un nœud)
  • removeAttribute() (effacer la valeur d'un nœud attribut)
  • removeAttributeNode() (effacer un nœud attribut)
  • removeChild() (effacer un nœud)
  • replaceChild() (remplacer un nœud enfant)
  • setAttribute() (fixer la valeur d'un nœud attribut)
  • setAttributeNode() (créer un nœud attribut)
La navigation à l’intérieur du document peut-être fastidieuse si on doit le parcourir complètement c’est pourquoi on s’appuit sur certaines interfaces d’objet spécifique au document WEB. L’objet document est la node racine à toutes nodes d’une page WEB, par conséquent il possède d’autres méthodes s’appliquant au document dans sa globalité.
  • createElement :créer un nouvel élément pour l’arborescence.
  • createTextNode :créer un nœuds de type texte.
  • createAttribut :créer un nœuds de type attribut.
  • getElementById :retourne l’élément portant l’id spécifié.
  • getElementsByName :retourne les éléments portant le nom spécifié.
  • getElementsByTagName :retourne les éléments correspondant au tag spécifié.

Exemple :

Soit un document web comportant un tag DIV avec l’attribut id égale à ‘container’, essayons de placé à l’intérieur un autre DIV possédant le texte ‘hello world’ ? 
// recherche de l’élément div container
var ocontainer=document.getElementById(‘container’); 

// creation en memoire d’un élément div
var newDiv = document.createElement(‘DIV’);

// creation en de la node de type texte 
var text = document.createTextNode(‘hello world’);

//incorporation de la node text au nouveau div
newDiv.appendChild(text) ;

//incorporation du nouveau div à l’ancien ;
ocontainer.appendChild(newDiv) ;