[Autre] HTML5 : quelques nouveautés de l'API DOM pour JavaScript

[Bovino]

La spécification HTML5 définit différents modules indépendants. Cette modularité a pour avantage de permettre de travailler sur certains aspects du standard sans avoir besoin de se soucier de l'état d'avancement des autres.
Parmi ces modules, l'API DOM est celui qui permet de définir les propriétés et méthodes disponibles en JavaScript pour manipuler le DOM.
Nous allons voir les différentes nouveautés particulièrement utiles de cette API.

Standardisation de innerHTML

Introduite par Internet Explorer 4 (de mémoire...), la propriété innerHTML permet de définir le contenu d'un élément en lui affectant sous forme de chaine une portion de code HTML.

Code :

HTMLElement.innerHTML = '<p>chaine HTML</p>';

Notez qu'il s'agit d'une propriété et non d'une méthode, on l'utilise donc sous forme d'une affectation et non comme un appel de fonction.
Bien que propriétaire IE, cette propriété (sic) s'est largement répandue sur les autres navigateurs et est depuis longtemps largement compatible.
Elle est désormais standardisée (innerHTML) et fait pleinement partie de la spécification HTML5.

getElementsByClassName()

Nous connaissions déjà les classiques getElementById(), getElementsByName() et getElementsByTagName(), mais beaucoup de développeurs ont longtemps regretté l'absence de possibilité de recherche d'éléments à partir d'un nom de classe (ce qui amenait souvent à utiliser une bibliothèque JavaScript pour pallier ce manque).
C'est désormais rectifié avec l'apparition de la méthode getElementsByClassName().
Cette méthode peut être appliquée à l'objet document ou à un objet HTMLElement. Comme le 's' de 'elements' le laisse supposer, elle retourne une collection d'éléments (il est donc nécessaire de faire une boucle sur la collection pour traiter individuellement chaque élément).
Il est possible de spécifier plusieurs noms de classe pour un élément séparés par des espaces, la méthode prend bien entendu en compte cette subtilité.

Code :

1
2
var coll = document.getElementsByClassName('classe');
var coll = document.getElementById('un_id').getElementsByClassName('classe');

Cette méthode est accessible sur tous les navigateurs récents, y compris Internet Explorer depuis sa version 8.

querySelector() / querySelectorAll()

Ces deux nouvelles méthodes font leur apparition avec un fonctionnement un peu différent des précédentes.
Les méthodes du type getElement[s]By... prennent comme argument une chaine correspondant au type d'élément recherché (un id, un nom de balise, de classe ou un name).
Les méthodes querySelector() et querySelectorAll() prennent quant à elles en argument une chaine qui correspond à un sélecteur CSS.
Normalement, toute chaine pouvant servir de sélecteur en CSS est acceptée, y compris les plus complexes. Nous ne listerons pas ici les différents sélecteurs possibles, je vous laisse faire vos propres tests.
Ces méthodes s'appliquent soit à l'objet document, soit à un objet HTMLElement.
querySelector() renvoie un élément HTML qui correspond au premier élément trouvé dans le DOM correspondant au sélecteur, son résultat peut donc être exploité directement.
querySelectorAll() renvoie une collection d'éléments HTML correspondant à tous les éléments correspondant au sélecteur. Pour traiter son résultat, il faudra donc faire une boucle sur chacun de ses membres.

Code :

1
2
var complexSelection = document.querySelector('.aChoisir ul[title="Liste à puce"], li > a[href^=www]');
var allImportantDivInMyParagraph = document.getElementById('My').querySelectorAll('div.important');

Ces méthodes sont disponibles sur tous les navigateurs modernes y compris Internet Explorer depuis la version 9.

matchesSelector()

Cette méthode permet de vérifier si un élément correspond à un sélecteur CSS. Tout comme les précédentes, elle prend en argument une chaine correspondant à un sélecteur. Elle renvoie un booléen.

Code :

1
2
3
4
5
6
7
8
var el1 = document.getElementById('elem1');
var el2 = document.getElementsByTagName('div')[0];
if(el1.matchesSelector('h1')){
    // traitement si l'élément est un titre de niveau 1
}
if(el2.matchesSelector('#toto')){
    // traitement si la première div du document possède l'id "toto"
}

Cette méthode est disponible sur tous les navigateurs récents y compris Internet Explorer depuis la version 9, cependant, seules les versions préfixées sont actuellement reconnues : mozMatchesSelector(), webkitMatchesSelector(), oMatchesSelector() et msMatchesSelector().

L'interface classList

Jusqu'à présent, pour manipuler les classes CSS d'un élément, il était nécessaire d'utiliser des méthodes assez complexes, que ce soit pour vérifier la présence d'un nom de classe, pour en ajouter ou en retirer. Il fallait utiliser le plus souvent des expressions régulières et se méfier des erreurs possibles (typiquement, qu'une recherche sur "classe" ne renvoie pas vrai si l'élément possède la classe "classeN").
L'interface classList permet de simplifier tout cela.
Elle s'applique à un élément HTML et renvoie une collection de ses noms de classe.

Code :

var allClasses = HTMLElement.classList;

Elle dispose aussi de plusieurs méthodes permettant de manipuler cette liste de classes :

• add() permet d'ajouter un nom de classe à l'élément ;
• remove() permet de retirer un nom de classe à l'élément ;
• toggle() permet d'ajouter un nom de classe si l'élément ne la possède pas, à le retirer sinon ;
• contains() permet de vérifier l'existence d'un nom de classe parmi celles de l'élément.

Cette interface est disponible sur tous les navigateurs modernes à l'exception d'Internet Explorer avant la version 10.

Conclusion

Ces différentes propriétés et méthodes apportent beaucoup aux développeurs pour ce qui est de la manipulation du DOM. Cependant, il me semble que de nombreuses méthodes utiles ont été oubliées, que ce soit en rapport à l'insertion d'éléments dans le DOM, à la possibilité de faire des recherches en remontant l'arborescence (retrouver facilement un élément à partir d'un de ses descendants). Espérons que les futures implémentations combleront ces manques en s'inspirant, par exemple, des différentes bibliothèques JavaScript.

Voir le billet blog : HTML5 : quelques nouveautés de l'API DOM pour JavaScript