Distinguer les collections HTML, les listes de nœuds et les tableaux d'objets dans le DOM

Lors de l'accès aux nœuds DOM, les développeurs rencontrent souvent des collections HTML, des listes de nœuds et des tableaux d'objets. Comprendre les différences entre ces structures de données est crucial pour manipuler efficacement la structure du document.

HTMLCollections vs. NodeLists

HTMLCollections et NodeLists partagent des similitudes en tant que collections de nœuds, mais elles ont caractéristiques distinctes :

• Contenu : Les HTMLCollections contiennent uniquement des nœuds d'élément, tandis que les NodeLists peuvent contenir n'importe quel type de nœud.
• Méthodes : In En plus des méthodes communes à toutes les collections, HTMLCollections fournit la méthode nomméeItem pour accéder aux éléments par leur nom.

Live vs. Snapshot Collections

Les collections DOM peuvent être soit live ou snapshot :

• Live : Les collections sont mises à jour automatiquement lorsque des modifications sont apportées au DOM.
• Snapshot : Les collections restent fixes, quelles que soient les modifications du DOM.

Les collections DOM renvoyées par les méthodes du navigateur (par exemple, getElementsByTagName) sont généralement actives, tandis que les sélections jQuery sont des instantanés.

Tableaux vs tableaux d'objets

Bien que les objets jQuery apparaissent sous forme de tableaux dans les journaux de la console, ce sont en réalité des tableaux d'objets :

• Tableaux : Collections séquentielles accessibles à l'aide d'index numériques.
• Tableaux d'objets : Tableaux dans lesquels les éléments sont accessibles à l'aide de propriétés numériques et nommées.

Sélection de nœuds

Utilisation des méthodes de document :

• document.getElementsByTagName("td") : renvoie une collection HTML de tous les éléments td.
• document.getElementsByClassName("myRow") : renvoie une NodeList de tous les éléments avec la classe "myRow".

Utilisation de jQuery :

• $("td") : sélectionne tous les éléments td et renvoie un objet jQuery, un tableau d'objets.

Exemple de script

Le script fourni montre les différences entre les structures de données :

• console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"] : compare les tableaux.
• console.log('{ 123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321,cba:"cba"} : compare les tableaux d'objets avec la syntaxe d'objet.
• console.log('Node=',Node) : enregistre l'objet Node global, qui est un tableau d'objets représentant les types de nœuds.
• console.log('document.links=', document.links) : Enregistre une collection HTML de liens.
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")) : Enregistre un seul élément, pas un collection.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")) : enregistre une NodeList d'éléments avec la classe "myRow".
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")) : enregistre une collection HTML de tous les éléments td.
• console.log('$(" #myTable")=',$("#myTable")) : enregistre un objet jQuery représentant l'élément #myTable.
• console.log('$("td")=',$("td ")) : Enregistre un tableau d'objets jQuery contenant tous les éléments td.