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 : S�lectionner tout - Visualiser dans une fen�tre � part
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 : S�lectionner tout - Visualiser dans une fen�tre � part
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 : S�lectionner tout - Visualiser dans une fen�tre � part
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 : S�lectionner tout - Visualiser dans une fen�tre � part
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 : S�lectionner tout - Visualiser dans une fen�tre � part
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