Distinguir colecciones HTML, listas de nodos y matrices de objetos en DOM

Al acceder a nodos DOM, los desarrolladores suelen encontrar colecciones HTML, listas de nodos y matrices de objetos. Comprender las diferencias entre estas estructuras de datos es crucial para manipular eficazmente la estructura del documento.

HTMLCollections vs. NodeLists

HTMLCollections y NodeLists comparten similitudes como colecciones de nodos, pero tienen características distintivas:

• Contenido: HTMLCollections contiene solo nodos de elementos, mientras que NodeLists puede contener cualquier tipo de nodo.
• Métodos: En Además de los métodos comunes a todas las colecciones, HTMLCollections proporciona el método llamadoItem para acceder a elementos por nombre.

Colecciones en vivo versus instantáneas

Las colecciones DOM pueden ser en vivo o instantánea:

• En vivo: Las colecciones se actualizan automáticamente cuando se realizan cambios en el DOM.
• Instantánea: Las colecciones permanecen fijas, independientemente de las modificaciones de DOM.

Las colecciones DOM devueltas por los métodos del navegador (p. ej., getElementsByTagName) suelen estar activas, mientras que las selecciones de jQuery son instantáneas.

Arreglos versus arreglos de objetos

Si bien los objetos jQuery aparecen como matrices en los registros de la consola, en realidad son matrices de objetos:

• Matrices: Se accede a colecciones secuenciales mediante índices numéricos.
• Matrices de objetos: Matrices donde se accede a los elementos mediante propiedades numéricas y con nombre.

Selección de nodos

Uso de métodos de documento:

• document.getElementsByTagName("td"): devuelve una colección HTML de todos los elementos td.
• document.getElementsByClassName("myRow"): devuelve una NodeList de todos los elementos con la clase "myRow".

Usando jQuery:

• $("td"): selecciona todos los elementos td y devuelve un objeto jQuery, una matriz de objetos.

Script de ejemplo

El script proporcionado demuestra las diferencias entre las estructuras de datos:

• console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"]: Compara matrices.
• console.log('{ 123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321,cba:"cba"}: Compara matrices de objetos con la sintaxis de objetos.
• console.log('Node=',Node): registra el objeto Node global, que es una matriz de objetos que representa los tipos de nodos.
• console.log('document.links=', document.links): registra una colección HTML de enlaces.
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): registra un solo elemento, no un collection.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): registra una NodeList de elementos con la clase "myRow".
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): registra una colección HTML de todos los elementos td.
• console.log('$(" #myTable")=',$("#myTable")): registra un objeto jQuery que representa el elemento #myTable.
• console.log('$("td")=',$("td ")): registra una matriz de objetos jQuery que contiene todos los elementos td.