HTML5 nouvelles méthodes pour référencer les noeuds du DOM

Pour référencer les noeuds DOM en JavaScript (c'est à dire les éléments HTML) il est d'usage d'utiliser les méthodes getElementsByTageName, getElementsByClassName mais surtout getElementById de l'objet document.

La fameuse méthode getElementById présente cependant un gros inconvénient. Elle oblige à affecter l'attribut id à tous les noeuds susceptibles d'être manipulés en JavaScript.

Deux nouvelles méthodes (toujours de l'objet document) sont désormais implémentées sur les navigateurs récents : querySelector et querySelectorAll.

Grâce à ces nouvelles méthodes il est en général inutile d'affecter l'attribut id aux noeuds devant être manipulés en JavaScript

. Exemple

Le code de l'exemple (extrait)

... <body> <h5>premier titre</h5> <p class = 'remarque'>premier paragraphe</p> <p>deuxième paragraphe de la page</p> <h5>deuxième titre</h5> <p class = 'remarque' >troisième paragraphe</p> <p id = 'dernier'>quatrième paragraphe</p> <button>Afficher des infos sur la page</button> <script> document.querySelector('button').onclick = function() { alert('R1 :' + document.querySelector('h5').innerHTML); alert('R2 :' + document.querySelectorAll('h5')[1].innerHTML); alert('R3 :' + document.querySelector('p').innerHTML) ; alert('R4 :' + document.querySelector('remarque').innerHTML) ; alert('R5 :' + document.querySelectorAll('remarque')[1].innerHTML) ; alert('R6 :'+ document.querySelectorAll('p')[3].innerHTML) ; alert('R7:'+ document.querySelector('#dernier').innerHTML) ; } </script> ...

Commentaire du code de l'exemple

Rappelons que la propriété innerHTML récupère le contenu d'un noeud.


Retour menu