HTML5 - API selectors

Pour référencer en JavaScript les noeuds du DOM (c'est à dire les éléments HTML de la page) il est d'usage d'utiliser les méthodes getElementsByTageName(), getElementsByClassName() et 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 via JavaScript.

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 d'application

Le code HTML (extrait) d'une page web

... <h5>Premier titre</h5> <p class = 'remarque'>Premier paragraphe <br>Aaaa aaaaaa aaaaaa aaaaaa aaaaaa aaaa</p> <p>Deuxième paragraphe de la page <br>bbbb bbbbb bbbbbbbbbbbbbbbb</p> <h5>Deuxième titre</h5> <p class = 'remarque' >Troisième paragraphe <br>cccccc ccccc cccccc cccccc</p> <p id = 'dernier'>Quatrième paragraphe <br>ddddd dddd dddddd dddd ddddddddd ddddd</p> <button>Afficher des infos sur la page</button> ...

Le script correspondant

	document.querySelector('button').onclick = function()
		{
		alert('Texte première bvalise H5 :' + document.querySelector('h5').textContent); 
		alert('Texte deuxième balise H5  :' + document.querySelectorAll('h5')[1].textContent); 
		alert('Texte première balise P :' + document.querySelector('p').textContent) ; 
		alert("Texte première balise avec classe 'remarque' :" + document.querySelector('.remarque').textContent) ; 
		alert("Texte deuxième balise avec classe 'remarque' :" + document.querySelectorAll('.remarque')[1].textContent) ; 
		alert('Texte troisième paragraphe :'+ document.querySelectorAll('p')[2].textContent) ; 
		alert("Texte balise identifiée 'dernier':" + document.querySelector('#dernier').textContent) ; 
		}

Rappelons que la propriété textContent récupère seulement le texte (sans le balisage) alors que la propriété innerHTML récupère le texte et le balisage. Testez cette page !
Retour menu