小编典典

HTMLCollection,NodeList和对象数组之间的区别

javascript

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

阅读 329

收藏
2020-04-25

共1个答案

小编典典

首先,我将解释之间的差异NodeListHTMLCollection

两个接口是 集合
DOM节点。它们在提供的方法和可以包含的节点类型方面有所不同。尽管NodeList可以包含任何节点类型,但是HTMLCollection假定仅包含元素节点。
一个HTMLCollection提供相同的方法作为一个NodeList和另外一个被调用的方法namedItem

当必须提供对多个节点的访问时,总是使用集合,例如,大多数选择器方法(例如getElementsByTagName)返回多个节点或获取对所有子节点的引用(element.childNodes)。

有关更多信息,请查看DOM4规范-Collections

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”,以及如何选择一个?

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

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

2020-04-25