Le DOM : Document Object Model

En Javascript, la page HTML courante du navigateur est modélisée par une série d'objets hiérarchisés. Cette modélisation est normalisée et s'appelle Document Object Model ou DOM.

Document

Le modèle est composé d'un objet document qui représente l'ensemble de la page HTML courante.

Nœuds

Le document contient un ensemble d'objets nœuds hiérarchisés qui représentent les balises, attributs et textes présents dans le code HTML.

Les nœuds sont de plusieurs type :

Type Élément (notation E) : une balise HTML
Type Attribut (notation @) : un attribut d'une balise
Type Texte (notation T) : un texte à l'intérieur d'une balise HTML

Exemple : Page HTML et son arbre DOM

<html>
  <head>
    <title>Une page HTML</title>
  <head>
  <body>
    <div id='titre'>
      <h1>Titre <b>de la page</b></h1>
      <p>Paragraphe.</p>
    </div>
  </body>
</html>

Document

Propriétés et méthodes de l'objet document

Méthodes	Description	Exemple
`document.getElementById('identifiant')`	Renvoie un objet nœud de type Élément correspondant à la balise portant l'attribut `id='identifiant'`	`var divTitre=document.getElementById('titre')` : renvoie l'objet `ElementHTML DIV`
`document.getElementsByTagName('nom de balise')`	Renvoie un tableau de nœuds de type Élément correspondant à toutes les balises de même nom dans le document (quelque soit leur profondeur)	`document.getElementsByTagName('p')` : renvoie [`ElementHTML P]`
`document.createElement('nom de balise')`	Crée un nouveau nœud de type Élément (une balise HTML) portant le nom passé en paramètre.	`var p2 = document.createElement('p')` : renvoie un nouvel objet `ElementHTML P`
`document.createTextNode('texte')`	Crée un nouveau nœud de type Texte portant le texte passé en paramètre.	`ver t2 = document.createTextNode('Un deuxième paragraphe')` renvoie un nouvel objet `Text Un deuxième paragraphe`
Propriétés	Description	Exemple
`documentElement`	Le nœud racine du document (autrement dit l'objet correspondant à la balise html)	`document.documentElement` renvoie l'objet `ElementHTML HTML`
`body`	Le nœud `body` de la page HTML.	`document.body` renvoie l'objet `ElementHTML BODY`

Propriétés et méthodes des objets Node (objet ancêtre de tous les objets nœuds)

Méthodes	Description	Exemple
appendChild(objet nœud)	Ajoute un nœud enfant au nœud courant (une sous balise ou un nœud texte)	`divTitre.appendChild(p2) ;`
removeChild(objet nœud)	Supprime de la liste des enfants l'objet nœud.	`divTitre.removeChild(p2) ;`
hasChildNodes()	Renvoie vrai ou faux selon que le nœud a des enfants ou pas	`divTitre.hasChildNodes() : true`
setAttribute('nom attribut','valeur')	Ajoute ou modifie un attribut sur un nœud de type élement.	p2.setAttribute('id','p2') ;
getAttribute("nom d'attribut")	Récupère la valeur d'un attribut sur un nœud de type élément.	p2.getAttribute('id') ;

Propriétés	Description	Exemple
nodeType	Type de nœud : 1 : Élément 3 : Nœud texte	divTitre.nodeType -> 1
nodeName	Nom du nœud pour les nœuds de type Élément	`divTitre.nodeName` -> DIV
nodeValue	Le texte d'un nœud Text	`t2.nodeValue` -> 'texte'
firstChild	Renvoie le premier nœud enfant du nœud Élément	`h1.firstChild` -> `T Titre`
parentNode	Renvoie le nœud parent d'un élement ou d'un nœud texte	`p2.parentNode` -> `E DIV@id='titre'`
children	Renvoie un tableau des éléments enfants (pas les nœuds texte) de l'élément.	`divTitre.children` -> `[E H1, E P]`
innerHTML	Le contenu sous forme HTML d'un nœud élément	`divTitre.innerHTML` -> `'<h1>Titre <b>de la page</b></h1>` `<p>Paragraphe.</p>'`
id	l'identifiant unique de l'élément	`divTitre.id` -> titre
style	L'objet style associé au nœud élément	`divTitre.style.background = '#888888' ;`

Exemple

Ajout d'un paragraphe au div titre :

var divTitre = document.getElementById('titre');
var p2 = documentCreateElement('p');
var t2 = document.createTextNode('Un deuxième paragraphe');
p2.appendChild(t2);
divTitre.appendChild(p2);
console.log(divTitre.innerHTML);

Exemple

Ce code renvoie :

<h1>Titre <b>de la page</b></h1>
<p>Paragraphe.</p>
<p>Un deuxième paragraphe</p>

AccueilLe DOM : Document Object Model< PrécédentSuivant >