Пусть у нас есть следующий HTML код:
<div>
<p></p>
<p></p>
<p></p>
</div>
Получим ссылку на див в переменную:
let div = document.querySelector('div');
Давайте теперь получим псевдомассив наших абзацев. Здесь, однако, есть нюанс - в зависимости от способа получения мы можем получить псевдомассивы различных типов.
К примеру, через querySelectorAll
мы получим коллекцию NodeList:
let elems = document.querySelectorAll('p');
console.log(elems); // NodeList
А через getElementsByTagName мы получим
коллекцию HTMLCollection:
let elems = document.getElementsByTagName('p');
console.log(elems); // HTMLCollection
Разница между двумя типами псевдомассивов
в различном поведении при изменении DOM элементов.
Пусть, к примеру, мы получили коллекцию абзацев
в виде HTMLCollection и в виде NodeList.
Затем мы создадим и добавим еще один абзац
в наш DOM. В этом случае он автоматически
появится в HTMLCollection, но коллекция
NodeList останется без изменений.
Смотрите пример:
let elems1 = document.querySelectorAll('p'); // NodeList
let elems2 = document.getElementsByTagName('p'); // HTMLCollection
let p = document.createElement('p');
div.append(p);
console.log(elems1); // 3 начальных абзаца
console.log(elems2); // 4 абзаца - с новым
Проверьте, какой тип коллекции будет в свойстве
childNodes
и в свойстве children.