Distinguindo HTMLCollections, NodeLists e Object Arrays no DOM

Ao acessar nós DOM, os desenvolvedores geralmente encontram HTMLCollections, NodeLists e arrays de objetos. Compreender as diferenças entre essas estruturas de dados é crucial para manipular efetivamente a estrutura do documento.

HTMLCollections vs. NodeLists

HTMLCollections e NodeLists compartilham semelhanças como coleções de nós, mas têm características distintas:

• Conteúdo: HTMLCollections contêm apenas nós Element, enquanto NodeLists podem conter qualquer tipo de nó.
• Métodos: In além dos métodos comuns a todas as coleções, HTMLCollections fornece o método nomeadoItem para acessar elementos por nome.

Coleções Live vs. live ou snapshot:

Live:

As coleções são atualizadas automaticamente quando alterações são feitas no DOM.
• Snapshot:
As coleções permanecem fixas, independentemente das modificações do DOM.
• As coleções DOM retornadas pelos métodos do navegador (por exemplo, getElementsByTagName) são normalmente ativas, enquanto as seleções do jQuery são instantâneos.

Arrays vs. &&&]

Embora os objetos jQuery apareçam como matrizes nos logs do console, eles são na verdade matrizes de objetos:

Arrays:

Coleções sequenciais acessadas usando índices numéricos.

• Matrizes de objetos: Matrizes onde os elementos são acessados ​​usando propriedades numéricas e nomeadas.
• Selecionando nós

Usando métodos de documento:

document.getElementsByTagName("td"): Retorna uma HTMLCollection de todos os elementos td.

document.getElementsByClassName("myRow"): Retorna uma NodeList de todos os elementos com a classe "myRow".

• Usando jQuery:

$("td"): Seleciona todos os elementos td e retorna um objeto jQuery, uma matriz de objetos.

• Exemplo de script

O script fornecido demonstra as diferenças entre estruturas de dados:

console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"]: Compara matrizes.

console.log('{ 123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321,cba:"cba"}: compara matrizes de objetos com sintaxe de objeto.

• console.log('Node=',Node): Registra o objeto Node global, que é uma matriz de objetos que representa os tipos de nós.
• console.log('document.links=', document.links): Registra uma coleção HTML de links.
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): Registra um único elemento, não um coleção.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): Registra uma NodeList de elementos com a classe "myRow".
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): Registra uma HTMLCollection de todos os elementos td.
• console.log('$(" #myTable")=',$("#myTable")): Registra um objeto jQuery representando o elemento #myTable.
• console.log('$("td")=',$("td ")): Registra uma matriz de objetos jQuery contendo todos os elementos td.