Connaitre la différence entre NodeList et HTMLCollection
Lorsque vous sélectionnez plusieurs éléments HTML en se basant sur le nom de la balise ou d’un nom de classe, vous recevez plusieurs éléments. Par exemple on a le code ci-dessous :
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
let liste = document.querySelectorAll('li')
let liste2 = document.getElementsByTagName('li')
A priori liste 1 et liste2 sont pareil, mais si nous loggons chaque variable on a HTMLCollection pour liste2 et NodeList pour liste. Quelle est la différence entre les deux?
NodeList est plus général que HTMLCollection
En effet un node peut désigner un élément HTML certes, mais peut aussi désigner un commentaire HTML qui est on le sait pas un élément HTML. Le texte à l’intérieur d’un élément HTML est un node, mais pas un élément HTML
<div>
Je suis un texte
<p>Une phrase</p>
<p>une seconde phrase</p>
</div>
Dans l’exemple ci-dessus « Je suis un texte » n’est pas un élément HTML mais un Node.
Un HTMLCollection ou un Nodelist n’est pas un tableau mais un Iterable !
Vous connaissez sans doute la méthode map relative aux tableaux, si vous essayer d’appliquer map à une Nodelist ou un HTMLCollection, vous aurez une erreur.
liste.map( e=> e ) // erreur
for(let i=0;i< liste.length;i++){
console.log(liste[i])
}
ça marchera aussi pour liste2.
Les index et la propriété length marchent mais c’est tout, ce n’est donc pas un tableau ! On peut boucler dessu, donc c’est un Itérable. Un tableau est un Iterable mais avec plus de propriété.
On peut cependant transformer ces Iterable en tableau avec la fonction Array.from.
HTMLCollection reflète le changement dans le DOM
Soit le HTML:
<p>Paragraph Un</p>
<p>Paragraph Deux</p>
<p>Paragraph Trois</p>
// returns an HTMLCollection
const paragraphs = document.getElementsByTagName('p')
console.log("BEFORE UPDATE: ", paragraphs) // 3 paragraphes
const newParagraph = document.createElement('p')
document.body.appendChild(newParagraph)
console.log("AFTER UPDATE: ", paragraphs) // 4 paragraphes
NodeList quant à lui est généralement statique
Soit le HTML:
<p>Paragraph Un</p>
<p>Paragraph Deux</p>
<p>Paragraph Trois</p>
// returns an HTMLCollection
const paragraphs = document.querySelectorAll('p')
console.log("BEFORE UPDATE: ", paragraphs) // 3 paragraphes
const newParagraph = document.createElement('p')
document.body.appendChild(newParagraph)
console.log("AFTER UPDATE: ", paragraphs) // 3 paragraphes
Exception avec getElementsByName
<body>
<p name="toto">Paragraph Un</p>
<p name="toto">Paragraph Deux</p>
<p name="toto">Paragraph Trois</p>
</body>
// returns an HTMLCollection
const paragraphs = document.getElementsByName('toto')
console.log("BEFORE UPDATE: ", paragraphs) // 3 paragraphes
const newParagraph = document.createElement('p')
newParagraph.setAttribute('name', 'toto')
document.body.appendChild(newParagraph)
console.log("AFTER UPDATE: ", paragraphs) // 4 paragraphes
