Списки узлов HTML DOM на JavaScript

Объект NodeList HTML DOM

NodeList Объекты - это списки узлов, извлеченные из документа (коллекции).

Объекты NodeList и HTMLCollection почти идентичны.

Если использовать getElementsByClassName() метод, некоторые (старые) браузеры возвращают NodeList вместо HTMLCollection.

Все браузеры возвращает childNodes функция возвращает объект NodeList.

Большинство браузеров возвращает querySelectorAll() Этот метод возвращает объект NodeList.

Следующий код выбирает все узлы <p> в документе:

Пример

var myNodeList = document.querySelectorAll("p");

}

Элементы NodeList можно получить по индексу.

Чтобы получить доступ ко второму узлу <p>, можно написать так:

y = myNodeList[1];

Комментарий:Индекс начинается с 0.

Длина NodeList HTML DOM

length Эта функция определяет количество узлов в списке узлов:

Пример

var myNodelist = document.querySelectorAll("p");
document.getElementById("demo").innerHTML = myNodelist.length;

}

Объяснение примера:

  • Создать список всех элементов <p>
  • Показать длину этого списка

length Эта функция полезна, когда нужно пройтись по узлам списка узлов:

Пример

Изменить цвет фона всех элементов <p> в списке узлов:

var myNodelist = document.querySelectorAll("p");
var i;
for (i = 0; i < myNodelist.length; i++) {
    myNodelist[i].style.backgroundColor = "red";
}

}

Попробуйте сами

Разница между HTMLCollection и NodeList

HTMLCollection (в предыдущей главе) является集合ом HTML элементов.

NodeList является集合ом документных узлов.

Объекты HTMLCollection и NodeList являются списками объектов (сборниками) типа массива.

У них есть определенный список (сборник) элементов. length Атрибуты.

Они могут быть доступны через индекс (0, 1, 2, 3, 4, ...) как массив.

Доступ к элементам HTMLCollection можно получить через их имя, id или индекс.

Доступ к элементам NodeList можно получить только через их индекс.

Только объект NodeList может содержать атрибутные и текстовые узлы.

Список узлов не массив!

Список узлов выглядит как массив, но это не так.

Вы можете итерировать список узлов и ссылаться на их узлы, как на массив.

Однако, вы не можете использовать методы массива для списка узлов, например valueOf()иpush()иpop() или join().