1NSI : Javascript getElementsByName()

La méthode getElementsByName() est accessible depuis le point d'entrée du DOM: document.

Syntaxe document.getElementsByName("jaune");

getElementsByName() renvoie un type HTMLCollection

La méthode getElementsByName("jaune"); renvoie TOUS les Noeuds du DOM qui sont des paragraphes p, disposant d'un attribut name="jaune", càd tous les <p name="jaune">lorem ..</p>. Il peut y en avoir plusieurs (d'où le s dans getElementsByTagName). Javascript renvoie (pour la première fois) un résultat sous la forme d'un (nouveau) type de données primitif appelé une NodeList : une liste/paquet de plusieurs noeuds javascript.

Première Obtention d'une NodeList

Remarquer que c'est la première fois que Javascript nous renvoie un type de données primitif NodeList. Jusqu'à présent, nous avions obtenu des HTMLCollection.

See the Pen getElementsByName by rod2ik (@rod2ik) on CodePen.

Visualiser le résultat avec vos outils web

Visualiser le résultat de l'instruction document.getElementsByName("p") dans les outils web de votre navigateur: Vous devriez voir tous les paragraphes encapsulés dans un type de données primitif HTMLCollection:

NodeList vs HTMLCollection

On peut visualiser:comprendre une différence entre une HTMLCollection et une NodeList, par exemple, en étendant le menu du premier paragraphe jaune (celui d'indice 0). On voit par exemple que ce premier paragraphe jaune admet deux types d'enfants au sens de l'arborescence HTML de la page :

• ChildNodes est une NodeList qui contient \(3\) noeuds :
  • le noeud textuel AVANT la balise span (incluse dans le <p name="jaune">)
  • la balise/l'élément HTML qui est le span
  • le noeud textuel APRÈS la balise span (incluse dans le <p name="jaune">)
• children est une HTMLCollection qui ne contient qu'UN seul Élément HTML:
  • UNIQUEMENT la balise span
• Conclusion: Comparés aux NodeList, les HTMLCollection ne contiennent QUE les éléments HTML, mais les HTMLCollection ne contiennent en particulier PAS les noeuds textuels.