DOM.md

Qu'est-ce que le DOM ( Document Object Model )

Le DOM est une API définie par le W3C. On utilise l'implémention de l'API DOM de javascript pour manipuler le DOM. C'est donc à travers le DOM que l'on agit sur une page web.

Le DOM ce n'est pas le HTML que l'on écrit, ce n'est pas non plus le code source d'une page web, mais vous pouvez avoir une représentation du DOM dans le panneau "Éléments" de la console de développement intégré à votre navigateur.

Le DOM est une norme éditée par le consortium W3C, Une traduction en français des différents parties de la spécificaiton est disponible ici.

La spécification du DOM définit donc principalement des types de noeuds organisés sous la forme d'une arborescence et susceptibles d'être manipulés, elle définit des méthodes pour parcourir cette arboresence, pour sélectionner des éléments et ajouter des évenements sur ces élements.

Node vs Element

L'object de base du DOM est le Node. Un node peut être un élément (div,a, ...) un attribut, un noeud textuel, etc ... Un Element fait référence à un élément XML/HTML ( une balise ).

On peut voir la présentation de ce type de noeud au sein de la spécification : (http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#ID-745549614) et la comparer avec l'interface "Node" pour constater leut différence. Les méthodes définies pour l'interface Node etant accessible à tout élément implémentant l'interface Element.

Il est aussi intéressant de comparer les panneaux affichant les propriétés du DOM dans les consoles de developpement de Firefox et de chrome.

De là ou s'apercoit que les propriété "parentNode" qui retourne le noued parent et la méthode "childNodes" qui renvoie l'ensemble des noeuds enfants sont définis au niveau de l'interface "Node".

Les méthodes "getAttribute" et "getElementsByTagName" sont elles définies dans l'interface "Element".

Nodelist vs HTMLCollection

Un Nodelist est une liste de Node ( peu importe le type ), tandis qu'un object HTMLCollection est une liste d'object de type "Element". L'interface "Elements" est préférée à "HTMLCollection, celle çi est encore présente dans les outils de dev. intégrés aux navigateurs.

L'object "window"

Du point de vue de Javascript, c'est l'object de pus haut niveau disponible dans un navigateur. Cet object contient tous les autres auxquels JS peut avoir accès :

Window.location                // objet
window.location.href           // propriété
window.location.pathnale       // propriété
window.location.assgin(url)    // méthode

Le DOM est donc accessible via l'object "window" en accédant à la propriété "windiw.document".

window.document // Le noeud "[Document]", http://www.yoyodesign.org/doc/w3c/dom2-core/core.html#i-Document
document.contentType     // propriété
document.cookie   
document.anchors
document.getElementById  // méthode
document.createElement   // méthode

Les sélécteurs d'éléments

//vanilla
document.getElementById(nom)
document.getElementsByClassName(nom)
document.getElementsByTagName(nom)
document.querySelector(css)
document.querySelectorAll(css)

// équivalent avec jQuery
jQuery(tag|id|css|...)
$(tag|id|css|...)

Parcours du DOM

Enfants

// jQuery
jQuery('#my-id').children()

// vanilla
document.getElementById('my-id').children // "children" est une propriété !

// jQuery
if($('#my-id').is(':empty'))

// Vanilla
if(!document.getElementById('my-id').hasChildNodes())

Parent

// Jquery
jQuery('#my-id').parent()

// vanilla
document.getElementById('my-id').parentNode 

Frères

// Jquery
jQuery('#my-id').siblings()

// vanilla
var el = document.getElementById('my-id');
Array.prototype.filter.call(el.parentNode.children, function(child){
  return child !== el;
});

Élements précedents et suivants

// Jquery
jQuery('#my-id').prev()
jQuery('#my-id').next()

// vanilla
document.getElementById('my-id').previousElementSibling 
document.getElementById('my-id').nextElementSibling

Les évenements

// jQuery
$(document).ready(function() {
  // code
})

// Vanilla
document.addEventListener('DOMContentLoaded', function() {
  // code
})

$(el).off(eventName, eventHandler);
el.removeEventListener(eventName, eventHandler);

$(el).on(eventName, eventHandler);
el.addEventListener(eventName, eventHandler);

méthodes disponibles depuis la consoles js

console.log 
console.dir
console.time
console.timeEnd
console.error

Liens :

• http://www.yoyodesign.org/doc/w3c/dom2-core/introduction.html
• https://developer.mozilla.org/fr/docs/DOM/window
• https://developer.mozilla.org/fr/docs/DOM/document
• http://api.jquery.com/category/selectors/content-filter-selector/
• https://developer.mozilla.org/fr/docs/DOM/element.hasChildNodes
• https://developer.mozilla.org/fr/docs/Web/API/Console