В этом руководстве вы узнаете, как получить первый и последний дочерние элементы и все дочерние узлы указанного элемента в JavaScript DOM.
Предположим, у вас есть следующий HTML-фрагмент:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>JS Get Child Elements</title> </head> <body> <ul id="menu"> <li class="first">Home</li> <li>Products</li> <li class="current">Customer Support</li> <li>Careers</li> <li>Investors</li> <li>News</li> <li class="last">About Us</li> </ul> </body> </html>
Как получить первый дочерний элемент
Чтобы получить первый дочерний узел указанного элемента, используйте свойство firstChild элемента:
let firstChild = parentElement.firstChild;
Если у parentElement нет дочерних элементов, firstChild возвращает null. Свойство firstChild возвращает дочерний узел, который может быть узлом любого типа, например узлом элемента, текстовым или узлом комментариев. Следующий скрипт показывает первый дочерний элемент элемента #menu :
let content = document.getElementById('menu');
let firstChild = content.firstChild.nodeName;
console.log(firstChild);Выход:
#text
В окне консоли отображается #text, поскольку текстовый узел вставлен для сохранения пробела между открывающими тегами <ul> и <li>. Этот пробел создает узел #text.
Обратите внимание, что любые пробелы, такие как один пробел, несколько пробелов, символы возврата и табуляции, создадут узел #text. Чтобы удалить узел, вы можете удалить пробелы следующим образом:
<article id="content"><h2>Heading</h2><p>First paragraph</p></article>
Или, чтобы получить первого потомка только с узлом Element, вы можете использовать свойство firstElementChild :
let firstElementChild = parentElement.firstElementChild;
Следующий код возвращает первый элемент списка, который является первым дочерним элементом меню:
let content = document.getElementById('menu');
console.log(content.firstElementChild);Выход:
<li class="first">Home</li>
В этом примере:
- Сначала выберите элемент
#menuс помощью методаgetElementById(). - Во-вторых, получите первый дочерний элемент, используя свойство
firstElementChild.
Как получить последний дочерний элемент
Чтобы получить последний дочерний элемент узла, вы используете свойство lastChild :
let lastChild = parentElement.lastChild;
Если у parentElement нет дочерних элементов, lastChild возвращает null. Подобно свойству firstChild, свойство lastChild возвращает первый узел элемента, текстовый или узел комментария. Если вы хотите выбрать только последний дочерний элемент с типом узла элемента, вы используете свойство lastElementChild :
let lastChild = parentElement.lastElementChild;
Следующий код возвращает элемент списка, который является последним дочерним элементом меню:
let menu = document.getElementById('menu');
console.log(main.lastElementChild);
Выход:
<li class="last">About Us</li>
Получение всех дочерних элементов
Чтобы получить NodeList дочерних элементов указанного элемента, вы используете свойство childNodes :
let children = parentElement.childNodes;
Свойство childNodes возвращает все дочерние элементы с любым типом узла. Чтобы получить дочерний элемент только с типом узла элемента, вы используете свойство children :
let children = parentElement.children;
В следующем примере выбираются все дочерние элементы элемента с идентификатором main :
let menu = document.getElementById('menu');
let children = menu.children;
console.log(children);Выход:
Заключение
firstChildиlastChildвозвращают первый и последний дочерние элементы узла, который может быть узлом любого типа, включая текстовый, узел комментариев и элемента.firstElementChildиlastElementChildвозвращают первый и последний дочерний узел Element.childNodesвозвращаетNodeListвсех дочерних узлов любого типа указанного узла. Дочерние элементы возвращают все дочерние узлыElementуказанного узла.