Свойство firstChild
Пример element.firstChild
Верните HTML-содержимое первого дочернего узла элемента <ul>:
document.getElementById("myList").firstChild.innerHTML;
Попробуйте сами »
Получить текст первого дочернего узла элемента <select>:
let text = document.getElementById("mySelect").firstChild.text;
Попробуйте сами »
Ещё примеры ниже.
Описание firstChild
Свойство firstChild возвращает первый дочерний узел узла.
Свойство firstChild возвращает объект узла.
Свойство firstChild доступно только для чтения.
Свойство firstChild такое же, как childNodes[0].
Важно! firstChild
Свойство firstChild возвращает первый дочерний узел: узел элемента, текстовый узел или узел комментария.
Пробелы между элементами также являются текстовыми узлами.
Альтернатива: firstChild
Свойство firstElementChild
Свойство firstElementChild возвращает первый дочерний элемент (игнорирует текстовые и комментирующие узлы).
Связные страницы firstChild
Свойства узла
Nodes и Elements
В терминологии HTML DOM:
Nodes — это все узлы (узлы элементов, текстовые узлы и узлы комментариев).
Пробелы между элементами также являются текстовыми узлами.
Elements — это только узлы элементов.
childNodes и children
childNodes возвращает дочерние узлы (узлы элементов, текстовые узлы и узлы комментариев).
children возвращает дочерние элементы (не текстовые узлы и узлы комментариев).
firstChild и firstElementChild
firstChild возвращает первый дочерний узел (узел элемента, текстовый узел или узел комментария). Пробелы между элементами также являются текстовыми узлами.
firstElementChild возвращает первый дочерний элемент (не текстовые узлы и узлы комментариев).
lastChild и lastElementChild
lastChild возвращает последний дочерний узел (узел элемента, текстовый узел или узел комментария). Пробелы между элементами также являются текстовыми узлами.
lastElementChild возвращает последний дочерний элемент (не текстовые узлы и узлы комментариев).
Синтаксис firstChild
element.firstChild
or
node.firstChild
Возвращаемое значение firstChild
| Тип | Описание |
|---|---|
| Node | Первый дочерний элемент узла.null если дочернего элемента нет. |
Ещё примеры firstChild
Этот пример демонстрирует, как пробелы могут мешать.
Попробуйте получить имя узла первого дочернего узла "myDIV":
<div id="myDIV">
<p>Похоже на первого ребенка</p>
<p>Похоже на последнего ребенка</p>
</div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>
Попробуйте сами »
Однако, если удалить пробелы из источника, в "myDIV" не будет узлов #text:
<div id="myDIV"><p>First child</p><p>Последний ребенок</p></div>
<script>
let text = document.getElementById("myDIV").firstChild.nodeName;
</script>
Попробуйте сами »
Поддержка браузера firstChild
element.firstChild является особенностью DOM уровня 1 (1998).
Он полностью поддерживается во всех браузерах:
| Chrome | Edge | Firefox | Safari | Opera | IE |
| Да | Да | Да | Да | Да | 9-11 |