Свойство firstChild
Пример
Получить HTML-содержимое первого дочернего узла элемента <ul>:
var x = document.getElementById("myList").firstChild.innerHTML;
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Свойство firstChild возвращает первый дочерний узел указанного узла в качестве Объекта узла.
Разница между этим свойством и firstElementChild, заключается в том, что firstChild возвращает первый дочерний узел в качестве узла элемента, текстового узла или узла комментария (в зависимости от того, какой из них первый), в то время как firstElementChild возвращает первый дочерний узел в качестве узла элемента (игнорирует текстовые узлы и узлы комментариев).
Примечание: Пробелы внутри элементов рассматриваются как текст, а текст рассматривается как узлы (см. "Ещё примеры").
Это свойство доступно только для чтения.
Совет: Используйте свойство element.childNodes для возврата любого дочернего узла указанного node.childNodes[0] дадут тот же результат, что и первый дочерний узел firstChild.
Совет: Чтобы вернуть последний дочерний узел указанного узла, используйте свойство lastChild.
Поддержка браузера
Свойство | |||||
---|---|---|---|---|---|
firstChild | Да | Да | Да | Да | Да |
Синтаксис
node.firstChild
Технические детали
Возвращает значение | Объект узела, представляющий первого дочернего узла, или null, если дочерних узлов нет |
---|---|
DOM Версия | Базового уровня 1 Объект узла |
Ещё примеры
Пример
В этом примере мы демонстрируем, как пробелы могут влиять на это свойство.
Получить имя узла первого дочернего узла элемента <div>:
<!--
Пробелы внутри элементов рассматриваются как текст, а текст рассматривается как узлы
В этом примере есть пробелы перед <p>, перед <span> и после <span>
Следовательно, первый дочерний узел <div> - это узел #text, а не элемент <p>, который вы ожидали
-->
<div id="myDIV">
<p>Выглядит как первый ребенок</p>
<span>Выглядит как последний ребенок</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Попробуйте сами »
Пример
Однако, если мы удалим пробелы из источника, в <div> не будет узлов #text, что сделает элемент <p> первым дочерним узлом:
<div id="myDIV"><p>First child</p><span>Последний ребенок</span></div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>
Попробуйте сами »
Пример
Получить текст первого дочернего узла элемента <select>:
var x = document.getElementById("mySelect").firstChild.text;
Попробуйте сами »
Связанные страницы
HTML DOM Справочник: node.lastChild Свойство
HTML DOM Справочник: node.childNodes Свойство
HTML DOM Справочник: node.parentNode Свойство
HTML DOM Справочник: node.nextSibling Свойство
HTML DOM Справочник: node.previousSibling Свойство
HTML DOM Справочник: node.nodeName Свойство