Различие HTMLCollections, NodeLists и массивов объектов в DOM

При доступе к узлам DOM разработчики часто сталкиваются с HTMLCollections, NodeLists и массивами объектов. Понимание различий между этими структурами данных имеет решающее значение для эффективного манипулирования структурой документа. отдельные характеристики:

Содержимое:

HTMLCollections содержат только узлы Element, а NodeLists могут содержать узлы любого типа.

Методы:
• In Помимо методов, общих для всех коллекций, HTMLCollections предоставляет метод NameItem для доступа к элементам по имени.
• Коллекции Live и Snapshot
Коллекции DOM могут быть либо live или снимок:

Live:

Коллекции обновляются автоматически при внесении изменений в DOM.

Снимок:
• Коллекции остаются неизменными, независимо от модификаций DOM.
Коллекции DOM, возвращаемые методами браузера (например, getElementsByTagName), обычно являются активными, а выборки jQuery представляют собой снимки.
• Массивы и массивы объектов

Хотя объекты jQuery отображаются в журналах консоли в виде массивов, на самом деле они представляют собой массивы объектов:

Массивы:

Последовательные коллекции, доступ к которым осуществляется с использованием числовых индексов.

Массивы объектов:
• Массивы, в которых доступ к элементам осуществляется с использованием как числовых, так и именованных свойств.
• Выбор узлов

Использование методов документа:

document.getElementsByTagName("td"): возвращает HTMLCollection всех элементов td.

document.getElementsByClassName("myRow"): возвращает NodeList всех элементов с классом "myRow".

• Использование jQuery:

$("td"): выбирает все элементы td и возвращает объект jQuery, массив объектов.

Пример скрипта

• Приведенный скрипт демонстрирует различия между структурами данных:

console.log('[123,"abc",321,"cba"]=[123,"abc",321,"cba"]: сравнивает массивы.

console.log('{ 123:123,abc:"abc",321:321,cba:"cba"}={123:123,abc:"abc",321:321,cba:"cba"}: сравнивает массивы объектов с синтаксисом объекта.

console.log('Node=',Node): регистрирует глобальный объект Node, который представляет собой массив объектов, представляющий типы узлов.

• console.log('document.links=', document.links): регистрирует HTML-коллекцию ссылок.
• console.log('document.getElementById("myTable")=',document.getElementById("myTable")): регистрирует один элемент, а не Collection.
• console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow")): регистрирует NodeList элементов с классом "myRow".
• console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td")): регистрирует HTMLCollection всех элементов td.
• console.log('$(" #myTable")=',$("#myTable")): регистрирует объект jQuery, представляющий элемент #myTable.
• console.log('$("td")=',$("td "))): регистрирует массив объектов jQuery, содержащий все элементы td.