Node.childNodes

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

Доступный для чтения аттрибут Node.childNodes возвращает коллекцию дочерних элементов данного элемента.

Синтаксис

var ndList = elementNodeReference.childNodes;

ndList — упорядоченная коллекция объектов элементов, которые являются детьми данного элемента. Если у элемента нет детей, ndList пуст.

ndList — переменная, хранящая список дочерних элементов. Тип этого списка — NodeList.

Пример

js
// parg -- ссылка на элемент <p>

if (parg.hasChildNodes()) {
  // Таким образом, сначала мы проверяем, не пуст ли объект, есть ли у него дети
  var children = parg.childNodes;

  for (var i = 0; i < children.length; ++i) {
    // сделать что-то с каждым внутренним элементом через children[i]
    // ПРИМЕЧАНИЕ: Список является ссылкой, Добавление или удаление дочерних элементов изменит список
  }
}

js
// Это один из способов удалить все дочерние элементы из элемента
// box -- ссылка на элемент с детьми

while (box.firstChild) {
  //Список является ссылкой, то есть он будет переиндексирован перед каждым вызовом
  box.removeChild(box.firstChild);
}

Примечания

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

Объект document обладает 2-мя детьми: декларацией Doctype и корневым элементов, к которому как правило обращаются как documentElement. (В (X)HTML документах это HTML-элемент.)

childNodes также включают, например, текстовые узлы и комментарии. Чтобы пропустить их, используйте ParentNode.children взамен.

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

Specification
DOM
# ref-for-dom-node-childnodes①

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
childNodes

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Смотрите также