Le DOM Document Object Model

Sélectionner les éléments (browsers modernes)

querySelector renvoie la première balise correspondante au sélecteur CSS

document.querySelector('.start + span')
	.style.backgroundColor = 'red';

document.querySelector('#ilove').querySelector('span')
	.style.backgroundColor = 'blue';

querySelectorAll renvoie la liste des balises

var nodes = document.querySelectorAll('#ilove span');
for (var i = 0 ; i < nodes.length ; i++)
	nodes[i].style.color = 'white';

Exemple (cliquez sur les exemples ci-dessus)

I Love DOM

<div id="ilove">
<span class="start">I </span><span id='L'>L</span>ove DOM
</div>

Autres méthodes

Accès direct (pour les vieux browsers)

getElementById (équivalent à #id),

getElementsByName (équivalent à [name=...]),

getElementsByTagName (équivalent à tag),

getElementsByClassName (équivalent à .class).

Traverser l’arbre

Fils : children, firstElementChild, lastElementChild, …

Sœurs : nextElementSibling, previousElementSibling,

Parent : parentElement.

Modifier l’arbre

Créer : document.createElement, cloneNode,

Ajouter : appendChild, insertBefore, …

Supprimer : removeChild, …

Remplacer : replaceChild, …

Agir directement sur le HTML : .innerHTML, .outerHTML

node.innerHTML += "<p>Modifier le <em>HTML</em></p>";

Accès aux attributs

<div class="ma-classe" data-ma-donnee="1" title="hello">

Attributs quelconques : getAttribute, setAttribute

element.setAttribute('title', 'hi');

Accès à la classe : className, classList

element.className = "classe1";
element.classList.add("classe2");
element.classList.remove("classe1");

Accès au style : style

element.style.color = 'white'

API dataset

element.dataset['ma-donnee'] = 2;

Événements

Dans le HTML: onload, onclick, onmouseover, onkeypress, ondrag, …

<!-- passer la souris sur ce bloc -->
<div id="mydiv" onmouseover="this.style.opacity='0.4'"
                onmouseout="this.style.opacity='1'">

De JavaScript: meilleure séparation du HTML, à préférer.

document.querySelector('#mydiv').onmouseover = function(e) {
	this.style.opacity = '0.4';
};

De JavaScript: encore mieux, pas de conflicts avec d’autres scripts !

function fade() {
    this.style.opacity = '0.4';
}

document.querySelector('#mydiv').addEventListener('mouseover', fade);

L’objet evenement

element.onclick = function (event) {
	console.log(event);
}

Le paramètre event du gestionnaire d’événements contient plusieurs champs importants

• currentTarget : élément à qui le gestionnaire est associé ;
• target : élément qui a déclanché l’événement (peut être un fils de currentTarget) ;
• type : type de l’événement (souris, clavier, etc.) ;
• which : quelle touche a été appuyée ;
• …

Et des méthodes

• stopPropagation : arrête la propagation de l’événement aux parents ;
• preventDefault : évite l’action par défaut associée à l’évènement (par ex., arrête la soumission d’un formulaire).

Voir https://developer.mozilla.org/docs/Web/API/Event