实时和静态节点列表

时间:2016-08-10 11:02:53

标签: javascript dom htmlcollection

好的,所以我正在玩静态||实时节点列表,试图测试这个概念,我尝试了不同的场景,但有两个场景引起了我的注意:

var toBeLogged = document.getElementsByTagName('p');
console.log(toBeLogged.length); // Returns 1 to the console
var newEl = document.createElement('p');
document.body.appendChild(newEl);
console.log(toBeLogged.length); // Returns 2 to the console

这是有道理的,因为getElementsBy ...是一个实时节点集合,因此在更新后再次询问值时,它显然会返回更新的值。

但是第二个场景只有很小的变化,这使得" Live" nodelist充当静态:

var toBeLogged = document.getElementsByTagName('p').length;
console.log(toBeLogged); // Returns 1 to the console
var newEl = document.createElement('p');
document.body.appendChild(newEl);
console.log(toBeLogged); // Returns 1 also to the console

所以我的问题是:为什么创建用于表示实时节点列表的长度属性的变量不会返回实时值,就像在不添加属性的情况下直接表示节点列表的变量值一样。

我试图尽可能准确地描述事物。 提前致谢。感谢你花在上面的时间。

1 个答案:

答案 0 :(得分:1)

document.getElementsByTagName('p').length返回不可变的原始值,它不能被更改,只能被替换。 .length每次访问时都会返回新的原始值,而document.getElementsByTagName('p')每次都会返回相同的对象。