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

Я всегда смущался между HTMLCollections, объектами и массивами, когда дело доходит до DOM. Например...

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

Просьба также предоставить любую интерпретацию ниже script.

Спасибо

[123,"abc",321,"cba"]=[123,"abc",321,"cba"]
{123:123,abc:"abc",321:321,cba:"cba"}=Object { 123=123, abc="abc", 321=321, more...}
Node= Node { ELEMENT_NODE=1, ATTRIBUTE_NODE=2, TEXT_NODE=3, more...}
document.links= HTMLCollection[a #, a #]
document.getElementById("myTable")= <table id="myTable">
document.getElementsByClassName("myRow")= HTMLCollection[tr.myRow, tr.myRow]
document.getElementsByTagName("td")= HTMLCollection[td, td, td, td]
$("#myTable")= Object[table#myTable]
$("td")= Object[td, td, td, td]


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" /> 
        <title>Collections?</title>  
        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 
        <script type="text/javascript">
            $(function(){
                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);
                console.log('document.links=',document.links);
                console.log('document.getElementById("myTable")=',document.getElementById("myTable"));
                console.log('document.getElementsByClassName("myRow")=',document.getElementsByClassName("myRow"))
                console.log('document.getElementsByTagName("td")=',document.getElementsByTagName("td"));
                console.log('$("#myTable")=',$("#myTable"));
                console.log('$("td")=',$("td"));
            });
        </script>
    </head>

    <body>
        <a href="#">Link1</a>
        <a href="#">Link2</a>
        <table id="myTable">
            <tr class="myRow"><td>td11</td><td>td12</td></tr>
            <tr class="myRow"><td>td21</td><td>td22</td></tr>
        </table>
    </body> 
</html>

Ответы

Ответ 1

Сначала я объясню разницу между NodeList и HTMLCollection.

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

Коллекции всегда используются, когда доступ должен предоставляться нескольким узлам, например. большинство методов выбора (например, getElementsByTagName) возвращают несколько узлов или получают ссылку на всех дочерних элементов ( element.childNodes).

Для получения дополнительной информации см. спецификация DOM4 - коллекции.

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

getElementsByTagName - это метод интерфейса DOM. Он принимает имя тега как ввод и возвращает HTMLCollection (см. спецификация DOM4).

$( "td" ) предположительно jQuery. Он принимает любой допустимый селектор CSS/jQuery и возвращает объект jQuery.

Самые большие различия между стандартными коллекциями DOM и выборами jQuery заключаются в том, что коллекции DOM обычно живут (не все методы возвращают живую коллекцию, хотя), то есть любые изменения в DOM отражаются в коллекциях, если они затронуты. Они похожи на представление в дереве DOM, тогда как выбор jQuery - это моментальные снимки дерева DOM в момент вызова функции.

Почему console.log также показывает массив элементов DOM рядом с ними и не являются ли они объектами, а не массивом?

Объектами jQuery являются объекты array-like, то есть они имеют числовые свойства и свойство length (имейте в виду, что массивы - это сами объекты). Браузеры, как правило, отображают массивы и подобные массиву объекты, например [...,...,...].

Что такое неуловимые "NodeLists" и как его выбрать?

См. первую часть моего ответа. Вы не можете выбрать NodeList s, это результат .

Насколько я знаю, нет даже возможности программно программировать NodeList (т.е. создавать пустую и добавлять узлы позже), они возвращаются только некоторыми методами/свойствами DOM.

Ответ 2

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

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

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

Интерфейс HTMLCollection

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

DOM Level 3 Spec - NodeList

Интерфейс NodeList

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

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

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

Вы заметите, если вы проверите консоль, если вы запустите свои скрипты, чтобы элемент table DOM содержал как childNodes NodeList[2], так и children HTMLCollection[1]. Почему они разные? Поскольку HTMLCollection может содержать только узлы элементов, NodeList также содержит текст node.

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 оба возвращали NodeList s

Ответ 3

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