En quoi les collections HTML, les listes de nœuds et les tableaux d'objets diffèrent-ils dans la manipulation du DOM ?

Distinguer les HTMLCollections, les NodeLists et les tableaux d'objets dans le DOM

Lors de l'accès aux nœuds DOM, les développeurs rencontrent souvent des HTMLCollections, des NodeLists 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 :Dans 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.

Collections Live vs. Snapshot

Les collections DOM peuvent être soit live ou snapshot :

• Live : Les collections se mettent à 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 fait 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 une 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.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!