0

我刚刚阅读了这篇关于 NodeLists 的文章：

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

如果我理解正确，getElementsByTag 名称是实时的，而 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
4

1 回答 1

4

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

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

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

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

于 2013-04-29T14:18:43.843 回答