layout | title | subtitle | addons | |||||||
---|---|---|---|---|---|---|---|---|---|---|
lesson |
Le DOM |
Document Object Model |
|
- Une API (des objets JavaScript),
- À chaque élément d'une page HTML correspond un objet,
- Tous les objets héritent de
HTMLElement
(qui hérite deNode
). - Un document HTML valide est représenté par un arbre d'objets du DOM.
- À travers les méthodes du DOM (ajouter, enlever des éléments, modifier le style, etc.),
- À travers les gestionnaires d'évènements (actions de la souris, du clavier, etc.).
La fenêtre du browser
window.innerHeight + " x " + window.innerWidth
Taille courante :
Le document HTML
document.referrer
Vous avez navigué vers cette page de :
<script>document.write(document.referrer)</script>querySelector
renvoie la première balise correspondante au sélecteur CSS
document.querySelector('.start + span')
.style.backgroundColor = 'red';
{: onclick="document.querySelector('.start + span').style.backgroundColor = 'red'"}
document.querySelector('#ilove').querySelector('span')
.style.backgroundColor = 'blue';
{: onclick="document.querySelector('#ilove').$('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';
{: onclick="Array.prototype.forEach.call(document.querySelectorAll('#ilove span'), function(x) {x.style.color='white'})"}
Exemple (cliquez sur les exemples ci-dessus)
<div id="ilove">
<span class="start">I </span><span id='L'>L</span>ove DOM
</div>
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
, ...
node.innerHTML += "<p>Modifier le <em>HTML</em></p>";
{:.javascript}
<div class="ma-classe" data-ma-donnee="1" title="hello">
{:.html}
element.setAttribute('title', 'hi');
element.className = "classe1";
element.classList.add("classe2");
element.classList.remove("classe1");
element.style.color = 'white'
element.dataset['ma-donnee'] = 2;
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);
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 decurrentTarget
) ;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).
Eloquent JavaScript par Marijn Haverbeke, 2nd edition : http://eloquentjavascript.net/, avec exemples interactifs !
JavaScript Éloquent par Marijn Haverbeke, 1e édition (en français) : http://fr.eloquentjavascript.net/,
Le tutoriel de W3Schools : http://www.w3schools.com/jsref/.
La référence du DOM implanté par Firefox : https://developer.mozilla.org/docs/DOM/DOM_Reference.
Plus de ressources, par le MDN : https://developer.mozilla.org/DOM
Plus d'outils (DOM inspectors)
: Dans Firefox (Shift+Ctrl+C
) et Chrome (F12
) : outils du développeur.
Les frameworks client JavaScript sont des bibliothèques qui étendent JavaScript dans le browser.
- Remédier aux incompatibilités des browsers ;
- Simplifier les tâches fréquentes (par ex., utiliser
querySelector
, parser des données XML ou JSON) ; - Enrichir la sémantique de JavaScript (par ex. ajouter
forEach
aux listes d'éléments du DOM) ; - Améliorer l'interface utilisateur (par ex. animations, contrôles avancés).
Ils deviennent indispensables en production, lorsqu'un site doit être largement accessible.
JQuery est un framework JavaScript très populaire. Il hérite de concepts provenants de Prototype et Script.aculo.us.
- Compatibilité Cross-browser ;
- Sélecteurs à la
querySelector
; - Éléments DOM enrichis ;
- Framework AJAX ;
- Noyau très compact (seulement 31k);
- Composants UI modulaires (JQuery UI) ;
- Architecture à plug-ins.
Documentation : http://docs.jquery.com/,
JQquery UI : http://jqueryui.com/.