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

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 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.

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

.

Une page web

Le code HTML

... <body> <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('R1 :' + document.querySelector('h5').textContent; 
		alert('R2 :' + document.querySelectorAll('h5')[1].textContent); 
		alert('R3 :' + document.querySelector('p').textContent) ; 
		alert('R4 :' + document.querySelector('.remarque').textContent) ; 
		alert('R5 :' + document.querySelectorAll('.remarque')[1].textContent) ; 
		alert('R6 :'+ document.querySelectorAll('p')[3].textContent) ; 
		alert('R7:'+ document.querySelector('#dernier').textContent) ; 
		}

Rappelons que la propriété textContent récupère le contenu d'un noeud (sans le balisage).
Testez cette page !
Retour menu