Javascript HTMLCollection、节点列表和对象数组之间的差异_Javascript_Jquery_Dom

Javascript HTMLCollection、节点列表和对象数组之间的差异

javascript jquery dom

Javascript HTMLCollection、节点列表和对象数组之间的差异,javascript,jquery,dom,Javascript,Jquery,Dom,谈到DOM，我总是混淆HTMLCollections、Object和Array。例如 document.getElementsByTagName（“td”）和$（“td”）之间有什么区别 $（“#myTable”）和$（“td”）是对象（jQuery对象）。为什么console.log还会在它们旁边显示DOM元素数组，它们不是对象也不是数组难以捉摸的“节点列表”是关于什么的？我如何选择一个还请提供以下脚本的任何解释多谢各位 [123,"abc",321,"cba"]=[123,"abc",

谈到DOM，我总是混淆HTMLCollections、Object和Array。例如

document.getElementsByTagName（“td”）

和

$（“td”）

之间有什么区别

$（“#myTable”）

和

$（“td”）

是对象（jQuery对象）。为什么console.log还会在它们旁边显示DOM元素数组，它们不是对象也不是数组

难以捉摸的“节点列表”是关于什么的？我如何选择一个

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

多谢各位

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

[123，“abc”，321，“cba”]=[123，“abc”，321，“cba”]
{123:123，abc:“abc”，321:321，cba:“cba”}=Object{123=123，abc=“abc”，321=321，更多…}
Node=Node{ELEMENT\u Node=1，ATTRIBUTE\u Node=2，TEXT\u Node=3，更多…}
document.links=HTMLCollection[a#，a#]
document.getElementById（“myTable”）=
document.getElementsByClassName（“myRow”）=HTMLCollection[tr.myRow，tr.myRow]
document.getElementsByTagName（“td”）=HTMLCollection[td，td，td，td]
$（“#myTable”）=对象[表#myTable]
$（“td”）=对象[td，td，td，td]
收藏？
$（函数（）{
log（'[123，“abc”，321，“cba”]='，[123，“abc”，321，“cba”]）；
log（{123:123，abc:abc，321:321，cba:cba}='，{123:123，abc:abc，321:321，cba:cba}）；
log（'Node='，Node）；
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”）；
log（“$（“#myTable”）=”，$（“#myTable”）；
log（'$（“td”）='，$（“td”）；
});
td11td12
td21td22

$（“td”）

是扩展的jQuery对象，它有jQuery方法，它返回包含html对象数组的jQuery对象

document.getElementsByTagName（“td”）

是原始js方法并返回NodeList

首先，我将解释

NodeList

和

HTMLCollection

之间的区别

这两个接口都是DOM节点的集合。它们提供的方法不同，可以包含的节点类型也不同。虽然

NodeList

可以包含任何节点类型，但是

HTMLCollection

应该只包含元素节点。

HTMLCollection

提供了与

NodeList

相同的方法，另外还有一个名为

namedItem

的方法

当必须向多个节点提供访问权限时，总是使用集合，例如，大多数选择器方法（如

getElementsByTagName

）返回多个节点或获取对所有子节点的引用（

element.childNodes

）

有关更多信息，请查看

document.getElementsByTagName（“td”）

和

$（“td”）

之间有什么区别

getElementsByTagName

是DOM接口的方法。它接受标记名作为输入，并返回

HTMLCollection

（请参阅）

$（“td”）

大概是jQuery。它接受任何有效的CSS/jQuery选择器并返回jQuery对象

标准DOM集合和jQuery选择之间的最大区别在于，DOM集合通常是活动的（但并非所有方法都返回活动集合），也就是说，对DOM的任何更改如果受到影响，都会反映在集合中。它们类似于DOM树上的视图，而jQuery选择是调用函数时DOM树的快照

为什么console.log还会在它们旁边显示DOM元素数组，它们不是对象也不是数组

jQuery对象是类似数组的对象，即它们具有数值属性和

长度属性（请记住数组本身就是对象）。浏览器倾向于以特殊的方式显示数组和类似数组的对象，如[…，…，…]

难以捉摸的“节点列表”是关于什么的？我如何选择一个
请看我答案的第一部分。您不能选择NodeList
s，它们是选择的结果
据我所知，甚至没有一种方法可以通过编程方式创建NodeList
s（即创建一个空的节点并在以后添加节点），它们只能由一些DOM方法/属性返回。
0一个HTMLCollection
和一个NodeList
之间有什么区别？
这里有一些定义
:
接口HTMLCollection
HTMLCollection是一个节点列表。可以通过顺序索引或节点的名称或id属性访问单个节点。注意：HTMLDOM中的集合被假定为活动的，这意味着当基础文档发生更改时，它们会自动更新

接口节点列表
NodeList接口提供节点有序集合的抽象，而不定义或约束如何实现该集合。DOM中的节点列表对象是活动的
节点列表中的项可以通过整数索引访问，从0开始
因此，它们都可以包含实时数据，这意味着DOM将在它们的值更新时更新。它们还包含一组不同的函数
如果在运行脚本时检查控制台，您会注意到表
DOM元素既包含子节点节点列表[2]
又包含子节点HTMLCollection[1]
。为什么它们不同？因为HTMLCollection只能包含元素
    var a = {
        1: "first",
        2: "second"
    }
    alert(a[1]);

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

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.

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