Объект NodeList в javascript

Ответ 1

NodeList - это набор DOM elements. Это похоже на массив (но это не так). Чтобы работать с ним, вы должны превратить его в обычный массив JavaScript. Следующий фрагмент может получить работу для вас.

const nodeList = document.getElementsByClassName('.yourClass'),
      nodeArray = [].slice.call(nodeList);

ОБНОВИТЬ:

// newer syntax
const nodeList = Array.from(document.querySelectorAll('[selector]'))

// or
const nodeList = [...document.querySelectorAll('[selector]')]

Ответ 2

NodeList является объектом-хозяином и не подчиняется обычным правилам, применимым к родным объектам JavaScript. Таким образом, вы должны придерживаться документированного API для него, который состоит из свойства length и доступа к его членам через синтаксис доступа к свойствам с квадратной скобкой. Вы можете использовать этот API для создания Array, содержащего моментальный снимок членов NodeList:

var nodeList = document.getElementsByTagName("div");
var nodeArray = [];
for (var i = 0; i < nodeList.length; ++i) {
    nodeArray[i] = nodeList[i];
}

Ответ 3

NodeList не является основным объектом Javascript, он предоставляется браузером с DOM. Подумайте о функции, которая возвращает интерфейс к динамическому или живому объекту, поэтому forEach() недоступен, но вы можете преобразовать его в реальный массив, чтобы иметь моментальный снимок, например.

// turns nodelist into an array to enable forEach
function toArray(list) {
  var i, array = [];
  for  (i=0; i<list.length;i++) {array[i] = list[i];}
  return array;
}

Подробности: http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-536297177

Ответ 4

NodeLists "живут", что означает, что они обновляются, когда структура документа изменяется так, что они всегда текут с самой точной информацией. В действительности, все объекты NodeList являются запросами, которые выполняются против DOM при каждом доступе.

В любое время, когда вы хотите перебирать NodeList, лучше всего инициализировать вторую переменную длиной, а затем сравнить итератор с этой переменной:

var divs = document.getElementsByTagName("div");

for (var i=0, lens=divs.length; i  <  len; i++){
    var div = document.createElement("div");
    document.body.appendChild(div);
} 

NodeList - это массив, подобный структуре, но на самом деле это не массив. Вы можете получить доступ к значениям массива через нотацию в виде скобок.

Ответ 5

JavaScript похож на Алкоголь, он может принуждать:

var links = document.getElementsByTagName('a');
Array.prototype.slice.call(links).forEach(function(anchor, index, arr) {
  anchor.addEventListener('click', onClickFN, false);
});

Ответ 6

Node списки часто реализуются как node итераторы с фильтром. Это означает, что получение свойства типа length O (n), и повторение по списку путем повторной проверки длины будет O (n ^ 2).

var paragraphs = document.getElementsByTagName('p');
for (var i = 0; i < paragraphs.length; i++) {
  doSomething(paragraphs[i]);
}

Лучше сделать это вместо:

var paragraphs = document.getElementsByTagName('p');
for (var i = 0, paragraph; paragraph = paragraphs[i]; i++) {
   doSomething(paragraph);
} 

Это хорошо работает для всех коллекций и массивов, если массив не содержит вещей, которые обрабатываются как логические false.

В случаях, когда вы выполняете итерацию над childNodes, вы также можете использовать свойства firstChild и nextSibling.

var parentNode = document.getElementById('foo');
for (var child = parentNode.firstChild; child; child = child.nextSibling) {
  doSomething(child);
}

Ответ 7

Теперь в ES2015 вы можете использовать метод Array.from который создает экземпляр Array из любого объекта, подобного массиву, поэтому это должно работать:

const divList = Array.from( document.getElementsByTagName("div") );

Для получения дополнительной информации: https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/from

Ответ 8

Резюме:

Объект NodeList представляет собой структуру данных, которая представляет собой набор узлов. Узлами в контексте DOM могут быть следующие вещи:

1. Сам документ
2. Элементы DOM (т.е. элементы HTML/SVG)
3. Текст
4. Комментарии

NodeList не является массивом, однако NodeList является итерируемой структурой данных, что означает, что мы можем перебирать значения (то есть элементы узла) с использованием цикла for..of. Кроме того, их некоторая хорошая функция полезности на прототипе NodeList что делает работу с ними более удобной.

Пример:

const parent = document.querySelector('.parent');
const myNodeList1 = parent.childNodes; // this property is a Nodelist
console.log(myNodeList1 instanceof NodeList);

const myNodeList2 = document.querySelectorAll('.foo'); // this method returns a Nodelist
console.log(myNodeList2 instanceof NodeList);

// looping over the items of a nodelist
for (let el of myNodeList2) {
  el.innerHTML = 'hi';
}

// getting the length of a nodeList 
console.log(myNodeList2.length);

<div class="parent">
  <div class="foo"></div>
  <div class="foo"></div>
</div>