0

我是 JS 新手，正在阅读有关 JS 数据类型的内容，这些数据类型将我指向这些页面上的Live NodeLists和Static NodeLists ：为什么 getElementsByTagName() 比 querySelectorAll() 快？和HTMLCollections & NodeLists提到的页面使用非常相似的示例描述了它们的区别：

实时节点列表：

var divs = document.getElementsByTagName("div"),
    i=0;

while(i < divs.length){
    document.body.appendChild(document.createElement("div"));
    i++;
}

静态节点列表：

var divs = document.querySelectorAll("div"),
    i=0;

while(i < divs.length){
    document.body.appendChild(document.createElement("div"));
    i++;
}

我对这段特定的代码很感兴趣：

var divs = document.getElementsByTagName("div"),
    i=0;

分别 这个：

var divs = document.querySelectorAll("div"),
    i=0;

有人可以澄清一下这个建筑在做什么吗？或者问题可能应该是：这divs之后变量的内容和类型是什么？我假设这是数组，所以我尝试了这个简约的 JS，在这里我添加了更多变量：

var divs = document.getElementsByTagName("div"), 
    j=5,   
    i=0;
alert(divs.length);

但是我添加了多少其他变量divs以及document.getElementsByTagName结果alert()始终为1。然后我尝试通过打印它typeof()并返回我这是对象。这里发生了什么，是一些特殊的 JS 语法糖还是什么？

4

2 回答 2

2 
var divs = document.getElementsByTagName("div"),
i=0;

是相同的

var divs = document.getElementsByTagName("div");
var i=0;

var您可以使用逗号分隔的列表声明多个变量。

于 2013-11-07T15:56:10.030 回答
0

这段代码：

var divs = document.getElementsByTagName("div"), 
    j=5,   
    i=0;

与此相同：

var divs = document.getElementsByTagName("div");
var j=5;
var i=0;

它创建了 3 个变量：

  1. 包含页面上所有 div 元素的变量 div
  2. 包含值 5 的变量 j
  3. 变量 i 包含值 0

typeof 返回 'object' 的原因是 JavaScript 中的 typeof 操作符搞砸了。它只为大多数基于对象的实体返回“对象”，包括数组和节点列表。

要回答您的原始问题，document.getElementsByTagName 和 document.querySelectorAll 的返回值都是 NodeList。这意味着您将无法改变它们，这与数组不同。此外，document.getElementsByTagName 返回的值是一个活动节点列表，这意味着它始终反映 DOM 的当前状态。

澄清：

var liveNodeList = document.getElementsByTagName('div');
var nodeList = document.querySelectorAll('div');
console.log(liveNodeList.length, nodeList.length); //Should output the same value twice
document.body.appendChild(document.createElement('div')); //Add a new div to the DOM
console.log(liveNodeList.length, nodeList.length); //Now, the live node list length should be one more since it updated to reflect the DOM state

try{
    nodeList.push('test');
}catch(e){
    console.log('NodeLists may not be mutated');
}
于 2013-11-07T15:56:21.677 回答