Объект NodeList в JavaScript

Question

Может кто-нибудь сказать мне, что это за объект NodeList. Я прочитал, что это объект, похожий на массив, и что к нему можно получить доступ через скобочную нотацию, например var a = someNode.childNode[0];. Как это возможно, поскольку с помощью скобочных обозначений мы можем получить доступ только к свойствам объекта, и, как я знаю, у нас не может быть

Answer 1

A 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]')]

Answer 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];
}

Answer 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

Answer 4

JavaScript похож на Алкоголь, он может вызвать:

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

Answer 5

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 - это структура, похожая на массив, но на самом деле это не массив.Вы можете получить доступ к значениям массива через скобки.

Answer 6

Списки узлов часто реализуются как итераторы узлов с фильтром.Это означает, что получение свойства типа 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.

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

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

Answer 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

Answer 8

Резюме:

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

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

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

* +1025 * Пример:

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>

Вот как Nodelist выглядит в браузере (chrome) devtools:

---

Вы можете получить доступ к элементам NodeList со следующими обозначениями:

 myNodelist[0]; // grabs the first item of the NodeList

Потому что вы просто значение свойства объекта, использующего ключ. В этом примере ключом свойства было число ноль, а значением - элемент DOM.