DOM-коллекции

DOM-коллекции

DOM-коллекция — это объект (псевдомассив), представляющий список узлов (включающий набор DOM-элементов), например:

  • HTMLCollection — коллекция HTML-элементов;
  • NodeList — коллекция узлов DOM-дерева (например, элементов, текстовых узлов, комментариев и др.).

Виды DOM-коллекций:

  1. живые (динамические, реагируют на изменение DOM);
  2. неживые (статическиемоментальный снимок данных, не реагируют на изменение DOM).

Атрибуты и методы живой (динамической) коллекции работают с фактическими данными, а не с 

Вид коллекции зависит от способа (метода), с помощью которого она получена (ниже рассмотрены методы querySelector() и querySelectorAll().

Пример

Используем querySelector (живая коллекция):

Свойство дочерних элементов Element.children, доступное только для чтения, возвращает живую коллекцию HTMLCollection, которая содержит все дочерние элементы узла Element.

Element.children включает только узлы, которые являются элементами. Чтобы получить все дочерние узлы, включая узлы, не являющиеся элементами, например узлы текста и комментариев, используйте Node.childNodes.

Используем querySelectorAll (неживая коллекция):

Метод querySelectorAll() каждый раз возвращает новую коллекцию (объект) с DOM-элементами внутри, и этот объект никак не связан с DOM.

[свернуть]
Метод querySelector( ) (нахождение первого заданного узла)

 Метод Document.querySelector() возвращает:

  • первый элемент (Element) документа, который соответствует указанному в аргументе селектору или группе селекторов;
  • null - если совпадений не найдено.

Сопоставление аргумента с узлами DOM выполняется с использованием последовательного обхода всех узлов документа в глубину, начиная с первого элемента в разметке документа.

Синтаксис:

где

  • element - ссылка на объект типа Element, являющийся первым элементом DOM, который соответствует указанному в аргументе селектору (группе селекторов) selectors;
  • selectors - строка DOMString, содержащая один или более селекторов для сопоставления (если не является допустимой строкой селектора CSS, то генерируется исключение SYNTAX_ERR). 

Пример:

Если вам нужен список всех элементов, соответствующих указанным селекторам, используйте метод querySelectorAll():

Пример

[свернуть]

Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов (подробнее...).

Псевдо-элементы CSS никогда не вернут никаких элементов, как указано в API селекторов.

[свернуть]
Метод querySelectorAll( ) (нахождение всех узлов, соответствующих критерию)

Метод Document.querySelectorAll() возвращает статическую (неживую) коллекцию (NodeList), содержащую все найденные элементы документа, которые соответствуют указанному в аргументе метода селектору.

Синтаксис:

где

  • elementList - статический (non-live) NodeList, содержащий все элементы в пределах документа, которые соответствуют как минимум одному из указанных селекторов selectors, или пустой NodeList в случае отсутствия совпадений указанному в аргументе селектору (группе селекторов) selectors;
  • selectors - строка DOMString, содержащая один или более селекторов для сопоставления (если не является допустимой строкой селектора CSS, то генерируется исключение SYNTAX_ERR); несколько селекторов разделяются запятыми.

Символы, которые не являются частью стандартного синтаксиса CSS должны быть экранированы символом обратной косой черты. Поскольку JavaScript также использует экранирование символом обратной косой черты, будьте особенно внимательны при написании строковых литералов с использованием этих символов (подробнее...).

Если в строке selectors содержатся CSS псевдоэлементы, то возвращаемый список будет всегда пуст.

Пример:

[свернуть]

Особенности DOM-коллекций:

  1. Т.к. DOM-коллекция – это особый перебираемый объект-псевдомассив, следовательно:
    • для перебора элементов коллекции мы можем использовать цикл for..of (коллекция является перебираемым объектом);
    • методы массивов работать не будут;
  2. DOM-коллекции – только для чтения (например, нельзя заменить один дочерний узел на другой так node.childNodes[i] = ...).
Использование for...of

Вывод всех дочерних узлов коллекции NodeList, полученной с помощью document.body.childNodes:

[свернуть]
Методы массивов не работают

[свернуть]

ВАЖНО! Не используйте цикл for..in для перебора коллекций: он перебирает все перечисляемые свойства, в т.ч. некоторые «лишние», редко используемые свойства, которые обычно не нужны.

Пример

[свернуть]

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.