Узел: свойство childNodes

Базовая линия Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Чтение только свойство childNodes интерфейса Node возвращает живой NodeList дочерних nodes данного элемента, где первому дочернему узлу присваивается индекс 0. К дочерним узлам относятся элементы, текст и комментарии.

Примечание: NodeList, являясь живым, означает, что его содержимое изменяется каждый раз, когда добавляются или удаляются новые дочерние элементы.

Браузеры вставляют текстовые узлы в документ для представления пробелов в исходной разметке. Поэтому узел, полученный, например, с помощью Node.childNodes[0] , может ссылаться на текстовый узел пробела, а не на фактический элемент, который автор хотел получить.

Дополнительную информацию см. в разделе Пробелы в DOM.

Элементы в коллекции узлов — это объекты, а не строки. Для получения данных из объектов узлов используйте их свойства. Например, чтобы получить имя первого childNode, можно использовать elementNodeReference.childNodes[0].nodeName.

Объект document сам имеет два дочерних элемента: объявление Doctype и корневой элемент, обычно называемый documentElement. В HTML-документах последний — это элемент <html>.

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

Значение

Живой NodeList, содержащий дочерние элементы узла.

Примечание: Несколько вызовов childNodes возвращают один и тот же NodeList.

Примеры

Простой пример использования

// Note that para is an object reference to a <p> element

// First check that the element has child nodes
if (para.hasChildNodes()) {
  let children = para.childNodes;

  for (const node of children) {
    // Do something with each child as children[i]
    // NOTE: List is live! Adding or removing children will change the list's `length`
  }
}

Удаление всех дочерних элементов узла

// This is one way to remove all children from a node
// box is an object reference to an element
while (box.firstChild) {
  // The list is LIVE so it will re-index each call
  box.removeChild(box.firstChild);
}

Спецификации

Спецификация
DOM # ref-for-dom-node-childnodes①

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`childNodes`	1	12	1	7	1.2	18	4	10.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Node/childNodes