вернуться к уроку

Дочерние элементы в DOM

важность: 5

Для страницы:

<html>
<body>
  <div>Пользователи:</div>
  <ul>
    <li>Джон</li>
    <li>Пит</li>
  </ul>
</body>
</html>

Как получить:

  • Напишите код, который получит элемент <div>?
  • Напишите код, который получит <ul>?
  • Напишите код, который получит второй <li> (с именем Пит)?

Есть несколько способов для получения элементов, например:

DOM-узел элемента <div>:

document.body.firstElementChild
// или
document.body.children[0]
// или (первый узел пробел, поэтому выбираем второй)
document.body.childNodes[1]

DOM-узел элемента <ul>:

document.body.lastElementChild
// или
document.body.children[1]

Второй <li> (с именем Пит):

// получаем <ul>, и его последнего ребёнка
document.body.lastElementChild.lastElementChild