Question

我刚刚阅读了有关NodeLists的文章：

http://www.nczonline.net/blog/2010/09/28/why-is-getelementsbytagname-faster-that-queryselectorall/

如果我理解正确的getElementsByTag名称是live并且querySelectorAll不是。那么有人可以向我解释为什么pNotLive的标题是“stackoverflow”吗？：

var pLive = document.getElementsByTagName( 'p' )[3];
var pNotLive = document.querySelectorAll( 'p' )[3];

pLive.title = "stackoverflow"
console.log( pNotLive.title ); // stackoverflow

//you can run this snippet in your console to verify

Answer 1

正如您的链接所解释的那样，getElementsByTagName方法返回一个在DOM更改时自动更新的集合。因此，如果您调用该方法，然后将新元素添加到DOM，您的集合将自动使用新元素进行更新。

如果您使用querySelectorAll，您将获得一个DOM元素的静态列表，不会自动更新。

我相信您在示例中使用的行为的原因是因为列表是静态的，而不是元素本身。所以静态方法只是意味着列表不会改变，所以添加/删除元素不会改变你的列表。但是当你调用title属性时，你的列表只是指向元素，并且该元素与创建列表时不同。

简而言之，它更像是一个引用列表（对于DOM节点），而不是一个数据对象列表（带有固定数据）。

关于'live'元素的说明

1 个答案: