Question

我是关于JS数据类型的JS新手阅读，它指向了这些页面上的实时节点列表和静态节点列表：Why is getElementsByTagName() faster than querySelectorAll()?和{{3}提到的页面使用非常相似的例子描述了它们之间的区别：

实时节点列表：

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;

RESP。这一个：

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}}的结果总是1.然后我尝试通过typeof()打印它它告诉我这是对象。这里发生了什么，是一些特殊的JS语法糖还是什么？

Answer 1

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

与

相同

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

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

Answer 2

此代码：

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

与此相同：

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

它创建了3个变量：

包含页面上所有div元素的变量div
包含值5
变量i包含值0

typeof返回'object'的原因是因为JavaScript中的typeof运算符搞砸了。它只返回大多数基于对象的实体的“对象”，包括Arrays和NodeLists。

要回答原始问题，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');
}

JavaScript请解释这个语法

2 个答案: