Разница между HTMLCollection, NodeLists и массивами объектов

0. в чем разница между HTMLCollection и NodeList?

вот некоторые определения для вас.

DOM Level 1 Spec-разные определения объектов:

Интерфейс HTMLCollection

HTMLCollection-это список узлов. К отдельному узлу можно получить доступ либо по порядковому индексу, либо по имени узла или атрибутам id. Примечание: предполагается, что коллекции в HTML DOM быть живым означает, что они автоматически обновляются при изменении базового документа.

DOM Level 3 Spec-NodeList

Интерфейс NodeList

интерфейс NodeList обеспечивает абстракцию упорядоченной коллекции узлов, не определяя и не ограничивая способ реализации этой коллекции. Объекты прописаны в доме живут.

элементы в списке узлов доступны через интегральный показатель, начиная с 0.

таким образом, они оба могут содержать живые данные, что означает, что DOM будет обновляться, когда их значения делают. Они также содержат другой набор функций.

вы заметите, если вы проверите консоль, если вы запустите свои скрипты, что table DOM-элемент, который содержит как childNodesNodeList[2] и childrenHTMLCollection[1]. Почему они разные? Потому что HTMLCollection может содержать только узлы элементов, NodeList также содержит текст узел.

1. В чем разница между document.getElementsByTagName("td") и $("td")?

document.getElementsByTagName("td") возвращает массив элементов DOM (a NodeList),$("td") называется объектом jQuery, который имеет элементы из document.getElementsByTagName("td") по своим свойствам 0,1,2 и т. д. Основное отличие заключается в том, что объект jQuery немного медленнее извлекается, но дает доступ ко всем удобным функциям jQuery.

2. $("#myTable") и $("td") есть объекты (jQuery объекты). Почему это console.log также показывает массив элементов DOM рядом с ними, и они не являются объектами и не массив?

это объекты со своими свойствами 0,1,2 и т. д. набор элементов DOM. Вот простой пример: как это работает:

jsFiddle

    var a = {
        1: "first",
        2: "second"
    }
    alert(a[1]);

3. Что такое неуловимые "NodeLists" все о, и как я могу выбрать один?

вы извлекали их в коде getElementsByClassName и getElementsByTagName как вернуть NodeLists

$("td") является расширенным объектом jQuery и имеет методы jQuery, он возвращает объект jquery, содержащий массив объектов html. document.getElementsByTagName("td") является необработанным методом js и возвращает NodeList. эту статью

дополнительная информация

в чем разница между HTMLCollection и NodeList?

A HTMLCollection содержит только узлы-элементы (теги) и NodeList содержит все узлы.

существует четыре типа узлов:

1. элемента
2. узел атрибута
3. текстовый узел
4. комментарий узел

nodeTypes

пробелы внутри элементов рассматриваются как текст, а текст-как узлы.

рассмотрим следующее:

<ul id="myList">
  <!-- List items -->
  <li>List item 1</li> 
  <li>List item 2</li>
  <li>List item 3</li>
  <li>List item 4</li>
  <li>List item 5</li>
</ul>

пробел: <ul id="myList"> <li>List item</li></ul>

нет пробелов: <ul id="myList"><li>List item</li></ul>

The NodeList объекты-это коллекции узлов, возвращаемые, например, x.childNodes собственность или документ.querySelectorAll() метод. В некоторых случаях NodeList-это live, что означает, что изменения в DOM автоматически обновляют коллекцию! Например, узел.childNodes-это видео:

var c = parent.childNodes; //assume c.length is 2
parent.appendChild(document.createElement('div'));
//now c.length is 3, despite the `c` variable is assigned before appendChild()!!
//so, do not cache the list's length in a loop.

но в некоторых других случаях, NodeList-это статический, где любые изменения в DOM не влияет на содержимое коллекции. querySelectorAll() возвращает статический NodeList.

The HTMLCollection это видео и заказал коллекция элементов (она автоматически обновляется при изменении базового документа). Это может быть результатом свойств как дети или методы, такие какдокумент.getElementsByTagName () и могло быть только объект HTMLElement это как их элементы.

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

var f = document.forms; // this is an HTMLCollection
f[0] === f.item(0) === f.myForm //assume first form id is 'myForm'

HTMLElement - это только один тип узлов:

узел может быть несколько видов. Наиболее важными из них являются следующие:

• элемент (1): узел элемента, например <p> или <div>.
(2): атрибут элемента. Атрибуты элемента больше не реализуют интерфейс узла в спецификации DOM4!
• текст (3): фактический текст элемента или атрибута.
• комментарий (8): узел комментариев.
• документ (9): узел документа.

итак, большая разница заключается в том, что HTMLCollection содержит только HTMLElements, но NodeList также содержит комментарии, пробелы (каретка возврат символов, пробелов..), прием. Проверьте это, как в следующем фрагменте:

function printList(x, title) {
  console.log("\r\nprinting "+title+" (length="+x.length+"):");
  for(var i=0; i<x.length; i++) {
    console.log("  "+i+":"+x[i]);
  }
}

var elems = document.body.children; //HTMLCollection
var nodes = document.body.childNodes; //NodeList

printList(elems, "children [HTMLCollection]");
printList(nodes, "childNodes [NodeList]");

<div>para 1</div><!-- MyComment -->
<div>para 2</div>

и HTMLCollection и NodeList содержат длина свойство, которое вы можете использовать для цикл над их элементов. Не использовать for...in или для each...in чтобы перечислить элементы в NodeLists, поскольку они также будут перечислять его длину и свойства элемента и вызывать ошибки, если ваш скрипт предполагает, что он имеет дело только с объектами элементов. Кроме того, for..in есть не гарантируется посещение объектов недвижимости в каком-либо определенном порядке.

for (var i = 0; i < myNodeList.length; i++) {
  var item = myNodeList[i];
}