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

DOM children

важность: 5

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

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
</head>

<body>
  <div>Пользователи:</div>
  <ul>
    <li>Маша</li>
    <li>Вовочка</li>
  </ul>

  <!-- комментарий -->

  <script>
    // ... ваш код
  </script>

</body>

</html>
  • Напишите код, который получит элемент HEAD.
  • Напишите код, который получит UL.
  • Напишите код, который получит второй LI. Будет ли ваш код работать в IE8-, если комментарий переместить между элементами LI?

HEAD

Два способа:

document.documentElement.children[0]
document.documentElement.firstChild

Второй способ работает, так как пробелы перед <head> игнорируются.

Также в современных браузерах доступен document.head.

UL

Например, так:

document.body.children[1]

LI

Можно так:

document.body.children[1].children[1]; // LI

Может возникнуть проблема с комментарием в IE8-, так как он станет одним из children, в результате последний код станет работать некорректно.

В последующих разделах учебника мы рассмотрим другие методы поиска по DOM, которые позволят эту проблему обойти.