Синтаксис JavaScript Справочник JavaScript JSON Коды клавиш События Строгий режим

Объект NodeList

Объект NodeList представляет собой коллекцию узлов. Такой объект возвращается, когда используются такие методы как document.querySelectorAll(), document.getElementsByName() или свойство Node.childNodes.

Объект NodeList ведёт себя, как доступный только для чтения массив объектов Element.

Обратиться к определённому узлу можно по числовому индексу. Первый узел находится под индексом 0:

var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
alert(child_nodes[1]);

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

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
</head>
<body>

  <div id="parent"><p></p></div>

  <script>
    var parent = document.getElementById('parent');
    
    // Присваиваем объект NodeList
    var child_nodes = parent.childNodes;
    console.log(child_nodes.length); // вернёт 1
    
    // Добавим ещё один дочерний элемент
    parent.appendChild(document.createElement('p'));
    console.log(child_nodes.length); // вернёт 2
  </script>
 
</body>
</html>

В других случаях NodeList является статической коллекцией, это означает, что любые последующие изменения в DOM не отражаются на содержании коллекции. Например, коллекция, возвращаемая методом document.querySelectorAll() является статической:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Название веб-страницы</title>
</head>
<body>

  <div id="parent"><p></p></div>

  <script>
    var parent = document.getElementById('parent');
    
    // Присваиваем объект NodeList
    var child_nodes = document.querySelectorAll('p');
    console.log(child_nodes.length); // вернёт 1
    
    // Добавим ещё один дочерний элемент
    parent.appendChild(document.createElement('p'));
    console.log(child_nodes.length); // вернёт 1
  </script>
 
</body>
</html>

Методы

МетодОписание
NodeList.item(index)Возвращает элемент из списка по указанному индексу или null, если индекс выходит за пределы списка (т. е. обращение к несуществующему элементу). Метод может быть использован как альтернатива простому доступу к элементу списка (NodeList[index]), который возвращает значение undefined, если индекс выходит за пределы списка.

Свойства

СвойствоОписание
lengthКоличество узлов в NodeList.

Почему NodeList не массив?

Объект NodeList часто используется как обычный массив (для обращения к элементам и спросмотра количества элементов), однако он не имеет методов, которые определены для массивов.

Экземпляры массивов могут наследовать методы массивов, так как их цепочка прототипов выглядит следующим образом:

myArray → Array.prototype → Object.prototype

В отличии от массивов, цепочка прототипов объекта NodeList выглядит так:

myNodeList → NodeList.prototype → Object.prototype

NodeList.prototype содержит только метод item(), но не имеет методы определённые в Array.prototype, поэтому методы для работы с массивами не могут быть использованы на NodeLists.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Реклама на сайте | puzinfo@puzzleweb.ru | ruen