Краткий обзор списков узлов и того, как они работают

Знаете ли вы, что Javascript не классифицирует набор нескольких элементов как массив? Вместо этого это то, что называется NodeList. Список узлов — это, по сути, список элементов. Чтобы сгенерировать NodeList, мы можем сделать что-то вроде этого:

let myNodeList = document.querySelectorAll('p');

Приведенный выше код вернет список всех абзацев, найденных на странице, в виде NodeList.

Списки узлов интересны тем, что они не являются массивами, поэтому они не наследуют все различные функции, которыми обладают массивы. Одним из примечательных примеров является то, что в некоторых старых браузерах, таких как Internet Explorer, NodeList не наследуют функцию forEach.

Таким образом, если вы хотите добавить прослушиватель событий к каждому абзацу, следующий код вызовет ошибку в Internet Explorer:

let myNodeList = document.querySelectorAll('p');

myNodeList.forEach(function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});

Поскольку это работает в большинстве современных браузеров, вам обычно не нужно беспокоиться об этом, но если вы хотите поддерживать старые браузеры и использовать forEach, мы должны поместить наш NodeList в массив, например так:

Чтобы преобразовать наш NodeList в более управляемый массив, мы можем использовать следующий код:

let myNodeList = document.querySelectorAll('p');
Array.prototype.forEach.call(myNodeList, function(item) {
    item.addEventListener('click', function(e) {
        // Do some click events
    });
    // For each node item..
});

Немного сложно, но теперь мы можем гарантировать, что все наши пользователи смогут получить доступ к прослушивателям событий, которые мы добавляем к нашим элементам NodeList.

Какие функции поддерживаются NodeLists?

Поскольку в этой статье до сих пор основное внимание уделялось тому, что NodeList не всегда имел forEach по умолчанию, вам может быть интересно, какие функции можно запускать в NodeList. Их 4:

* NodeList.entries — возвращает итератор для получения как идентификатора, так и элемента в виде пары идентификатор/элемент, т. е. [ 1, p ]. * NodeList.forEach — для перебора каждого элемента по отдельности. * NodeList.item - для получения определенного элемента по id, т.е. получить первый абзац по NodeList.item(0). * NodeList.keys - возвращает итератор для получения ключей, т.е. 1 2 3 4 5 ... * NodeList.values — возвращает итератор для получения элементов HTML, т.е. pp p p p ...

Стоит отметить, что NodeList.item — единственная функция, поддерживаемая Internet Explorer. Остальные нет.

В качестве примера, вот как мы будем запускать эти функции в нашем NodeList:

NodeList.entries

let myNodeList = document.querySelectorAll('p');

// entries
let allEntries = myNodeList.entries();
for(var i of allEntries) {
    // Console logs each paragraph with an id individually, such as [ 0, p ] [ 1, p ] [ 2, p ] ...
    console.log(i);
}

Список узлов.для каждого

let myNodeList = document.querySelectorAll('p');

// forEach - iterate over each item
myNodeList.forEach(function(item) {
    // Console logs each paragraph element individually
    console.log(i);
});

NodeList.item

let myNodeList = document.querySelectorAll('p');

// item - get the first element (0)
let firstElement = myNodeList.item(0);
// Console logs the first element only
console.log(firstElement);

NodeList.keys

let myNodeList = document.querySelectorAll('p');

let getKeys = myNodeList.keys();
// Console logs the id of each element, i.e. 1 2 3 4 5 ...
for(var i of getKeys) {
    console.log(i);
}

NodeList.values

let myNodeList = document.querySelectorAll('p');

let getValues = myNodeList.values();
// Console logs each HTML element as an array, i.e. p p p p ...

for(var i of getValues) {
    console.log(i);
}

Также опубликовано здесь