«Семья» элементов
Свойство childNodes хранит в себе коллекцию непосредственных потомков элементов (включая комментарии и текстовые узлы).
Синтаксис
element.childNodes
Примеры
Свойство childNodes содержит всех потомков, в том числе и комментарии и текстовые узлы (текст, и отступы между тегами).
Абзац
Абзац1
children
Свойство children возвращает коллекцию дочерних элементов. Дочерними элементами считаются все теги, которые непосредственно расположены внутри блока.
Синтаксис
element.children
Совместимость с браузерами
 |
 |
 |
 |
 |
| Да | 9,0 | Да | Да | Да |
Примеры
Абзац 1
Абзац 2
Абзац 3
firstChild
Свойство firstChild возвращает первого потомка данного элемента. Потомками являются не только элементы, но и просто текст, и комментарий HTML.
Если у элемента нет дочерних элементов — возвращается null .
Синтаксис
node.firstChild
Примеры
Первый элемент
Второй элементТретий элемент
Четвертый элемент
firstElementChild
Свойство firstElementChild возвращает первый дочерний элемент. Дочерними элементами считаются все теги, которые непосредственно расположены внутри блока.
Если у элемента нет дочерних элементов — возвращается null .
Синтаксис
element.firstElementChild
Комментарии
См. похожее свойство firstChild, которое также содержит первого потомка, но учитывая комментарии и текст.
Совместимость с браузерами
|
|
|
|
|
| Да | 9,0 | Да | Да | Да |
Примеры
Первый элемент
Второй элемент
lastChild
Свойство lastChild возвращает последнего потомка данного элемента. Потомками являются не только элементы, но и просто текст, и комментарий HTML.
Если у элемента нет дочерних элементов - возвращается null .
Синтаксис
node.lastChild
Примеры
Первый элемент
Второй элементТретий элемент
Четвертый элемент
lastElementChild
Свойство lastElementChild возвращает последний дочерний элемент. Дочерними элементами считаются все теги, которые непосредственно расположены внутри блока.
Если у элемента нет дочерних элементов - возвращается null .
Синтаксис
element.lastElementChild
Комментарии
См. похожее свойство lastChild, которое также содержит последнего потомка, но учитывая комментарии и текст.
Совместимость с браузерами
|
|
|
|
|
| Да | 9,0 | Да | Да | Да |
Примеры
Первый элемент
Второй элемент
parentNode
Свойство parentNode возвращает родительский элемент.
Синтаксис
node.parentNode
Комментарии
Существует также почти идентичное свойство parentElement. Отличия: для тега html свойство parentNode возвращает document , а parentElement возвращает null .
Примеры
Давайте получим родителя элемента #elem и выведем на экран его id :
Я имею родителя <div >
parentElement
Свойство parentElement возвращает родительский элемент.
Синтаксис
node.parentElement
Комментарии
Существует также почти идентичное свойство parentNode. Отличия: для тега html свойство parentNode возвращает document , а parentElement возвращает null .
Совместимость с браузерами
|
|
|
|
|
| Да | 9,0 | Да | Да | Да |
Примеры
Давайте получим родителя элемента #elem :
previousSibling
Свойство previousSibling возвращает предыдущий узел на том же уровне дерева узлов или null .
Синтаксис
node.previousSibling
Примеры
Один
Два
Три
Четыре
previousElementSibling
Свойство previousElementSibling возвращает предыдущий элемент на том же уровне дерева узлов или null .
Синтаксис
element.previousElementSibling
Совместимость с браузерами
|
|
|
|
|
| Да | 9,0 | Да | Да | Да |
Примеры
Один
Два
Три
Четыре
nextSibling
Свойство nextSibling возвращает следующий узел на том же уровне дерева узлов или null .
Синтаксис
node.nextSibling
Примеры
Один
Два
Три
Четыре
nextElementSibling
Свойство nextElementSibling возвращает следующий элемент на том же уровне дерева узлов или null .
Синтаксис
element.nextElementSibling
Совместимость с браузерами
|
|
|
|
|
| Да | 9,0 | Да | Да | Да |
Примеры
Один
Два
Три
Четыре
Свойство childNodes
Свойство childNodes хранит в себе псевдомассив дочерних узлов элемента (теги, комментарии и текстовые узлы).
Синтаксис
элемент.childNodes;
Пример
Получим все дочерние узлы элемента и выведем на экран их содержимое:
текст
абзац
let parent = document.querySelector('#parent'); let nodes = parent.childNodes; for (let node of nodes) < console.log(node.textContent); >
Пример
Выведем содержимое первого узла:
текст
абзац
let parent = document.querySelector('#parent'); console.log(parent.childNodes[0].textContent);
Результат выполнения кода:
Пример
Выведем содержимое узла с номером 2 :
текст
абзац
let parent = document.querySelector('#parent'); console.log(parent.childNodes[2].textContent);
Результат выполнения кода:
' коментарий '
Смотрите также
- свойство children ,
которое содержит дочерние элементы - свойство firstChild ,
которое содержит первый узел - свойство lastChild ,
которое содержит последний узел
Свойство childNodes
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство childNodes возвращает коллекцию дочерних узлов узла в виде объекта NodeList.
Узлы в коллекции сортируются по мере их появления в исходном коде, и к ним можно получить доступ по индексным номерам. Индекс начинается с 0.
Примечание: Пробелы внутри элементов рассматриваются как текст, а текст рассматривается как узлы. Комментарии также рассматриваются как узлы.
Совет: Вы можете использовать свойствоlength объекта NodeList для определения количества дочерних узлов, затем вы можете перебирать все дочерние узлы и извлекать нужную информацию.
Это свойство доступно только для чтения.
Совет: Чтобы вернуть коллекцию узлов элементов узла (исключая текстовые узлы и узлы комментариев), используйте свойство children.
Совет: элемент .childNodes[0] дадут тот же результат, что и свойство firstChild.
Поддержка браузера
| Свойство | |||||
|---|---|---|---|---|---|
| childNodes | Да | Да | Да | Да | Да |
Node.childNodes
Доступный для чтения аттрибут Node.childNodes возвращает коллекцию дочерних элементов данного элемента.
Синтаксис
var ndList = elementNodeReference.childNodes;
ndList — упорядоченная коллекция объектов элементов, которые являются детьми данного элемента. Если у элемента нет детей, ndList пуст.
ndList — переменная, хранящая список дочерних элементов. Тип этого списка — NodeList .
Пример
// parg -- ссылка на элемент if (parg.hasChildNodes()) // Таким образом, сначала мы проверяем, не пуст ли объект, есть ли у него дети var children = parg.childNodes; for (var i = 0; i children.length; ++i) // сделать что-то с каждым внутренним элементом через children[i] // ПРИМЕЧАНИЕ: Список является ссылкой, Добавление или удаление дочерних элементов изменит список > >
// Это один из способов удалить все дочерние элементы из элемента // box -- ссылка на элемент с детьми while (box.firstChild) //Список является ссылкой, то есть он будет переиндексирован перед каждым вызовом box.removeChild(box.firstChild); >
Примечания
Элементы в коллекции — объекты, а не строки. Чтобы получить данные из этих объектов, вы должны использовать их свойства (например, elementNodeReference.childNodes[1].nodeName чтобы получить имя, и т. д.).
Объект document обладает 2-мя детьми: декларацией Doctype и корневым элементов, к которому как правило обращаются как documentElement . (В (X)HTML документах это HTML-элемент.)
childNodes также включают, например, текстовые узлы и комментарии. Чтобы пропустить их, используйте ParentNode.children (en-US) взамен.
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-node-childnodes① |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Node.firstChild
- Node.lastChild
- Node.nextSibling
- Node.previousSibling
- ParentNode.children (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.