JavaScript

DOM - Document Object Model

Remi Forax

DOM ?

“The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML, and XML documents.”

source: Wikipedia.org - DOM

DOM ?

“Le modèle objet de document (DOM) est une convention indépendante d'un language et multi-plateforme pour représenter et interagir avec des objets issus de documents HTML, XHTML et XML.”

source : Wikipedia.org - DOM

Arbre DOM

L'API DOM permet de manipuler l'arbre correspondant
à une page HTML en JavaScript

Le document (racine), les éléments, les attributs des éléments, le texte à l'intérieur des éléments sont des nœuds de l'arbre

Children / childNodes

Il y a deux façons d'obtenir les enfants d'un élement

element.children: renvoie uniquement les sous-éléments
element.childNodes: renvoie les éléments, avec les textes et les commentaires

API DOM

children et childNodes renvoient des HTMLCollection,
pas des tableaux, seuls length et [ ] fonctionnent

L'API est la même quel que soit le langage de programmation donc l'API n'est intégrée avec aucun langage de programmation :(

Chercher des éléments

document.getElementById(id): renvoie élément par son id
document.getElementsByClassName(classname): renvoie les éléments ayant la classe
document.querySelectorAll(css_selector): renvoie les éléments par un sélecteur CSS

Changer le contenu d'un élément

element.innerHTML: accepte le contenu HTML
element.innerText: uniquement pour le contenu texte

Évènement onclick

Il est possible d'enregistrer des évènements
sur des éléments

element.style permet d'accéder au style d'un élément

Ajouter un nouvel élément

document.createElement permet de créer un élément
parent.appendChild(element) ajoute un élément

Ajouter du texte

Pour le DOM, le texte est un nœud TextNode qui doit être un fils d'un élément classique (comme un DIV).

Element.append(...text|element)

Permet d'ajouter des éléments ou des textes (concaténés)
appel appendChild() et createTextNode() si nécessaire

Champs de texte

La balise input permet à l'utilisateur de saisir des données


<input type="text" id="dom-input-text"></input>

onkeyup est appelée pour chaque touche

Label

On peut associer un label à un champ texte


<label for="username">Enter your username:</label>
<input type="text" id="username"></input>

Enter your username:

onchange est appelée lorsque l'on valide (ou hors focus)

Autre types d'inputs

L'attribute type permet de spécifier un type particulier de champ.

Choix d'options

La balise select permet de sectionner parmi plusieurs options.


<select id="food">
  <option value="chicken">Poulet</option>
  <option value="beef">Boeuf</option>
</select>