HTMLCollection，NodeLists和对象数组之间的区别
当涉及到DOM时，我一直在HTMLCollections，对象和数组之间感到困惑。 例如…
-
document.getElementsByTagName("td")和$("td")什么区别？ -
$("#myTable")和$("td")是对象（jQuery对象）。 为什么console.log也显示旁边的DOM元素数组，他们不是对象，而不是数组？ - 什么是难以捉摸的“NodeLists”所有关于，我如何select一个？
请同时提供以下脚本的任何解释。
谢谢
[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>
首先我将解释NodeList和HTMLCollection 。
这两个接口都是DOM节点的集合。 它们在提供的方法和节点types方面有所不同。 虽然NodeList可以包含任何节点types，但HTMLCollection应该只包含Element节点。
HTMLCollection提供了与NodeList相同的方法，另外还提供了一个名为namedItem的方法。
当访问必须提供给多个节点时，总是使用集合，例如，大多数select器方法（如getElementsByTagName ）会返回多个节点或获取对所有子节点（ element.childNodes ）的引用。
有关更多信息，请参阅DOM4规范 – 集合 。
document.getElementsByTagName("td")和$("td")什么区别？
getElementsByTagName是DOM接口的方法。 它接受一个标签名称作为input，并返回一个NodeList （一些浏览器select返回HTMLCollection ，这是好的，因为它是NodeList的超集）。
$("td")大概是jQuery。 它接受任何有效的CSS / jQueryselect器并返回一个jQuery对象。
标准DOM集合和jQueryselect之间最大的区别是，DOM集合通常是实时的（不是所有的方法都会返回一个实时集合），也就是说，如果受到影响，DOM中的任何更改都会反映在集合中。 它们就像DOM树上的视图 ，而jQueryselect是在调用函数的时候DOM树的快照。
为什么console.log也显示旁边的DOM元素数组，他们不是对象，而不是数组？
jQuery对象是类似数组的对象，即它们具有数字属性和length属性（请记住数组本身就是对象）。 浏览器倾向于以特殊的方式显示数组和类似数组的对象，如[ ... , ... , ... ] 。
什么是难以捉摸的“NodeLists”所有关于，我如何select一个？
看到我的答案的第一部分。 你不能select NodeList ，它们是select的结果 。
据我所知，甚至没有办法以编程的方式创buildNodeList （即创build一个空的并且稍后添加节点），它们只能由一些DOM方法/属性返回。
0. HTMLCollection和NodeList什么区别？
这里有一些你的定义。
DOM级别1规范 – 其他对象定义 ：
接口HTMLCollection
HTMLCollection是一个节点列表。 单个节点可以通过序号索引或节点的名称或ID属性进行访问。 注意：假设HTML DOM中的集合是活的，意味着当底层文档发生更改时，它们会自动更新。
DOM Level 3 Spec – NodeList
接口NodeList
NodeList接口提供了一个有序的节点集合的抽象，而不需要定义或约束这个集合是如何实现的。 DOM中的NodeList对象是活的。
NodeList中的项目可以通过从0开始的整数索引来访问。
所以他们都可以包含实时数据，这意味着DOM的值会更新。 它们还包含一组不同的function。
你会注意到，如果你检查控制台，如果你运行你的脚本， table DOM元素同时包含childNodes NodeList[2]和一个children HTMLCollection[1] 。 他们为什么不同？ 因为HTMLCollection只能包含元素节点，所以NodeList也包含一个文本节点。
1. document.getElementsByTagName("td")和$("td")什么区别？
document.getElementsByTagName("td")返回一个DOM元素数组（一个NodeList ）， $("td")被称为一个jQuery对象，它具有document.getElementsByTagName("td")元素的属性0 ， 2等。主要区别在于jQuery对象的检索速度稍慢，但是可以访问所有方便的jQuery函数。
2. $("#myTable")和$("td")是对象（ jQuery对象）。 为什么console.log也显示旁边的DOM元素数组，他们不是对象，而不是数组？
它们是属性0等设置为DOM元素的对象。 这是一个简单的例子：它是如何工作的：
的jsfiddle
var a = { 1: "first", 2: "second" } alert(a[1]);
3.什么是难以捉摸的“NodeLists”所有关于，我如何select一个？
您一直在您的代码中检索它们， getElementsByClassName和getElementsByTagName都返回NodeList
$("td")是扩展jQuery对象，它有jQuery方法，它返回包含html对象数组的jquery对象。 document.getElementsByTagName("td")是原始的js方法，并返回NodeList。 看到这篇文章
