HTML5 : API selectors

Pour référencer en JavaScript les noeuds (c'est à dire les éléments HTML) 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