JavaScript 请解释一下这个语法

Question

我是 JS 新手，正在阅读 JS 数据类型，这些数据类型将我指向这些页面上的 Live NodeLists 和 Static NodeLists：Why is getElementsByTagName() faster than 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 语法糖还是什么？

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 个变量：

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');
}