Объяснения на «живых» элементах

Question

Я только что прочитал эту статью о нодлистах:

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 

Answer 1

Как объясняет свою ссылку, метод getElementsByTagName возвращает коллекцию, которая автоматически обновляется при изменении DOM. Поэтому, если вы вызываете метод, а затем добавляется новый элемент в DOM, ваша коллекция будет автоматически обновляться новым элементом.

Где, если вы используете querySelectorAll, вам будет предоставлен статический список элементов DOM, который НЕ будет обновляться автоматически.

Я считаю, что причиной того, что вы использовали в своем примере, является то, что этот список является статическим, а не самими элементами. Таким образом, статический подход просто означает, что список не изменится, поэтому добавление/удаление элементов не изменят ваш список. Но когда вы вызываете атрибут title, ваш список просто указывает на элемент, и этот элемент отличается от того, когда вы создали список.

Короче говоря, это скорее список ссылок (на узлы DOM), чем список объектов данных (с фиксированными данными).