В чем разница между HTMLCollection, возвращаемой getElementsByTagName и getElementsByClassName?

Question

[Дмитрий]

Почему eventListener работает только на варианте №0 ? (код ниже)
Почему в варианте №1 length = 1, а во втором length = 0, если там же в консоли мы видим, что это одинаковые HTMLCollection?
Описания на TagName и на ClassName одинаковы, перечитал уже и MDN, и Кантора, и w3c:
"The NodeList object represents a collection of nodes. The nodes can be accessed by index numbers. The index starts at 0."
Так почему же они возвращают разные вещи?

Ищу текст тремя способами:

var paragraph0 = document.querySelectorAll("p");
var paragraph1 = document.getElementsByTagName("p");
var paragraph2 = document.getElementsByClassName("p");

И вижу в консоли:

Answer 1

[Назар Мокринский]

Почитайте что такое тэг, класс и селектор. После этого станет понятно на сколько ваш вопрос простой, и на сколько долго нужно разжевывать почему вы получаете РАЗНЫЕ коллекции.
По поводу сообщений в консоли рекомендую почитать про приведение типов в JavaScript, в частности, как объекты конвертируются в строки.

Comments

[Дмитрий]

Дичайше прощу прощения, я ужасающе опечатался: искал по несуществующему классу.
Теперь у меня теория и практика сходятся.
Но почему Вы говорите, что это две разные коллекции? Понятно, что они занимают разные адреса в памяти, т.е. это не одна и та же коллекция. Но ведь они одинаковы по сути своей?

[Назар Мокринский]

Дмитрий: Разные в плане содержимого. То есть и одна и другая являются экземплярами HTMLCollection, но коллекции содержат разные элементы в зависимости от того, что именно выбераете. По сути своей они аналогичны, да.

[Дмитрий]

Назар Мокринский: Спасибо огромное.

Answer 2

[Дмитрий Беляев]

HTMLCollection - это динамическая коллекция, при изменениях в DOM дереве, с которым она связана, изменится и содержимое коллекции
NodeList статичный и содержит только те элементы, которые присутствовали в дереве на момент запроса

Comments

[RSVTS]

NodeList при поиске с getElementsByName тоже динамичный, а вот с querySelectorAll статичный.

[Дмитрий Беляев]

Rysiavets, getElementsByName возвращает HTMLCollection, а querySelectorAll - NodeList

[RSVTS]

Дмитрий Беляев, а у меня NodeList, или я реально что-то не так делаю....

Answer 3

[Олег]

// По тегу, найдет все <p>....</p>
var paragraph1 = document.getElementsByTagName("p");

// По классу, найдет все <div сlass="p">....</div> (тег может быть любой)
var paragraph2 = document.getElementsByClassName("p");