109

在谈到 DOM 时,我一直对 HTMLCollections、对象和数组感到困惑。例如...

  1. document.getElementsByTagName("td")和 和有什么不一样$("td")
  2. $("#myTable")并且$("td")是对象(jQuery 对象)。为什么console.log 还显示它们旁边的DOM 元素数组,它们不是对象也不是数组?
  3. 什么是难以捉摸的“NodeLists”,我该如何选择?

还请提供对以下脚本的任何解释。

[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>
4

6 回答 6

126

NodeList首先,我将解释和之间的区别HTMLCollection

这两个接口都是DOM 节点的集合。它们在提供的方法和可以包含的节点类型上有所不同。虽然 aNodeList可以包含任何节点类型,但 anHTMLCollection应该只包含 Element 节点。
AnHTMLCollection提供了与 a 相同的方法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 对象是类数组对象,即它们具有数字属性和一个length属性(请记住,数组只是对象本身)。浏览器倾向于以一种特殊的方式显示数组和类似数组的对象,例如[ ... , ... , ... ].

什么是难以捉摸的“NodeLists”,我该如何选择?

请参阅我的答案的第一部分。您不能选择 NodeLists,它们是选择的结果

据我所知,甚至没有一种以NodeList编程方式创建 s 的方法(即创建一个空的并稍后添加节点),它们仅由某些 DOM 方法/属性返回。

于 2013-04-02T12:06:42.847 回答
36

0. anHTMLCollection和 a 和有什么不一样NodeList

这里有一些定义给你。

DOM 1 级规范 - 杂项对象定义

接口 HTMLCollection

HTMLCollection 是一个节点列表。可以通过序号索引或节点的名称或 id 属性访问单个节点。注意:假定 HTML DOM 中的集合是实时的,这意味着当基础文档更改时它们会自动更新。

DOM 3 级规范 - 节点列表

接口节点列表

NodeList 接口提供了节点有序集合的抽象,而无需定义或限制该集合的实现方式。DOM 中的 NodeList 对象是活动的。

NodeList 中的项目可通过从 0 开始的整数索引访问。

因此它们都可以包含实时数据,这意味着 DOM 将在它们的值发生时更新。它们还包含一组不同的功能。

如果您在运行脚本时检查控制台,您会注意到tableDOM 元素同时包含 achildNodes NodeList[2]和 a children HTMLCollection[1]。为什么它们不同?因为HTMLCollection只能包含元素节点,所以 NodeList 还包含一个文本节点。

在此处输入图像描述

document.getElementsByTagName("td")1.和有什么区别$("td")

document.getElementsByTagName("td")返回一个 DOM 元素数组 (a NodeList),$("td")称为 jQuery 对象,其中包含来自document.getElementsByTagName("td")其属性012等的元素。主要区别在于 jQuery 对象检索速度稍慢,但可以访问所有方便的jQuery 函数。

2.$("#myTable")并且$("td")是对象(jQueryobjects)。为什么console.log还要在它们旁边显示 DOM 元素的数组,它们不是对象而不是数组吗?

它们是其属性012等设置为 DOM 元素的对象。这是一个简单的例子:它是如何工作的:

jsFiddle

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

3. 什么是难以捉摸的“NodeLists”,我该如何选择?

您一直在代码中检索它们,getElementsByClassName并且getElementsByTagName都返回NodeLists

节点列表

于 2013-04-02T12:07:31.623 回答
17

附加说明

HTMLCollection 和 NodeList 有什么区别?

HTMLCollection包含元素节点(标签),而NodeList包含所有节点

最重要的节点类型:

  1. 元素节点
  2. 属性节点
  3. 文本节点
  4. 评论节点

节点类型

元素内的空白被视为文本,文本被视为节点。

考虑以下:

<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>

HTMLCollection 和 NodeList 之间的区别

于 2018-06-01T10:55:03.897 回答
8

已经讲了这么多,但想了一个更概括的答案版本,并举个例子来解释和之间的区别HTMLCollectionNodeList这会有所帮助。

DOM 中的节点类型

  • 有 12 种不同的节点类型,它们可能有各种节点类型的子节点:

在此处输入图像描述

  • 我们可以使用以下三个属性来检查和查询 DOM 中的节点:

    • nodeType财产
    • nodeName财产
    • nodeValue财产
  • nodeType属性以数字形式返回指定节点的节点类型。

    • 如果节点是元素节点,则该nodeType属性将返回1
    • 如果节点是属性节点,则nodeType属性将返回2
    • 如果节点是文本节点,则该nodeType属性将返回3
    • 如果节点是评论节点,则该nodeType属性将返回8
    • 该属性是只读的。

HTMLCollection 与 NodeList

在此处输入图像描述

通过以下示例,我们可以更清楚地HTMLCollection理解它们之间的区别。NodeList请尝试在您自己的浏览器控制台中检查输出以更好地理解。

<ul>
  <li>foo</li>
  <li>bar</li>
  <li>bar</li>
</ul>
// retrieve element using querySelectorAll
const listItems_querySelector = document.querySelectorAll('li');
console.log('querySelector', listItems_querySelector);

// retrieve element using childNodes
const list  = document.querySelector('ul')
const listItems_childNodes = list.childNodes;
console.log('childNodes', listItems_childNodes);
const listItems_children = list.children;
console.log('children', listItems_children);

const listItems_getElementsByTagName = document.getElementsByTagName('li');
console.log('getElementsByTagName', listItems_getElementsByTagName);

console.log('*************************');
console.log('add one list item');
console.log('*************************');
list.appendChild(document.createElement('li'));

console.log('querySelector', listItems_querySelector);
console.log('childNodes', listItems_childNodes);
console.log('children', listItems_children);
console.log('getElementsByTagName', listItems_getElementsByTagName);

console.log('*************************');
console.log('add one more list item');
console.log('*************************');
listItems_getElementsByTagName[0].parentNode.appendChild(document.createElement('li'));

console.log('querySelector', listItems_querySelector);
console.log('childNodes', listItems_childNodes);
console.log('children', listItems_children);
console.log('getElementsByTagName', listItems_getElementsByTagName); 
于 2020-06-01T20:31:56.920 回答
2

$("td")是扩展的 jQuery 对象,它具有 jQuery 方法,它返回包含 html 对象数组的 jquery 对象。document.getElementsByTagName("td")是原始 js 方法并返回 NodeList。看这篇文章

于 2013-04-02T12:02:41.317 回答
0

NodeList对象是 Node的集合,例如由 x 返回。childNodes属性或document.querySelectorAll()方法。在某些情况下,NodeList 是live的,这意味着 DOM 中的更改会自动更新集合!例如,Node.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。

HTMLCollection是一个实时且有序的元素集合(当基础文档更改时它会自动更新)。它可以是子属性或 document.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 只是节点的一种类型:

节点 << HTMLElement 继承

节点可以是多种类型。最重要的如下:

  • element (1):一个 Element 节点,例如<p><div>
  • 属性 (2):元素的属性。元素属性不再实现 DOM4 规范中的 Node 接口!
  • text (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 或 for each...in 来枚举 NodeLists 中的项目,因为如果您的脚本假定它只需要处理元素对象,它们也会枚举其长度和项目属性并导致错误。此外,for..in 不保证以任何特定顺序访问属性。

for (var i = 0; i < myNodeList.length; i++) {
  var item = myNodeList[i];
}
于 2018-10-02T06:28:34.880 回答