Навигация по дереву DOM

276
посл. ред. 27.06.2016

Встроенные методы поиска используются для непосредственного обращения к элементам страницы. Но бывают случаи, когда к элементу нельзя обратиться напрямую (например, если на момент написания скрипта сам элемент не определён однозначно). В таких случаях можно воспользоваться внутренними свойствами узлов дерева, которые содержат ссылки на родственные узлы.

Обращение к родственным узлам

Каждый узел DOM дерева обязательно имеет один родительский узел и может иметь произвольное количество сестринских и дочерних узлов. Для обращения к этим родственным узлам используются встроенные свойства. Ссылки на узлы автоматически меняются при изменении дерева DOM.

parentNode

Свойство parentNode содержит ссылку на родительский узел. Например, для элемента <body> родительским является узел <html>, для которого, в свою очередь, родительским является узел document.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p>Lorem ipsum dolor...</p>
</body>
</html>

<script>
  var body = document.body;
  alert(body.parentNode); /* HTML элемент */
  alert(body.parentNode.parentNode); /* объект DOCUMENT */
</script>

childNodes, firstChild, lastChild

Свойство childNodes содержит список всех дочерних узлов, которые присутствуют в дереве DOM на момент выполнения скрипта. Свойства firstChild и lastChild ссылаются соответственно на первый и последний элемент из этого списка, то есть всегда верно:

element.firstChild === element.childNodes[0];
element.lastChild === element.childNodes[element.childNodes.length - 1];
<html>
<head>
  <title>DOM интерфейс</title>
  <script>
    var html = document.documentElement;
    alert(html.childNodes.length); /* 1 узел (HEAD) */
    alert(html.firstChild); /* узел HEAD */
    alert(html.lastChild); /* узел HEAD */
  </script>
</head> 
<body>
  <p>Lorem ipsum dolor...</p>
</body>
</html>

<script>
  alert(html.childNodes.length); /* 3 узла (HEAD, перенос строки, BODY) */
  alert(html.firstChild); /* узел HEAD */
  alert(html.lastChild); /* узел BODY */
</script>

previousSibling, nextSibling

Свойства previousSibling и nextSibling используются для обращения к сестринским узлам. Они ссылаются соответственно на предыдущий и последующий узлы дерева внутри общего родителя.

<html>
<head>
  <title>DOM интерфейс</title>
</head> 
<body>
  <p>Lorem ipsum dolor...</p>
</body>
</html>

<script>
  var body = document.body;
  alert(body.previousSibling); /* текстовый узел (перенос строки) */
  alert(body.nextSibling); /* null (после BODY узлы не создаются) */
</script>

Обращение к родственным элементам

Предыдущие свойства позволяют обратиться к родственным узлам элемента без учёта их типа (текст, элемент, комментарий). На практике эти свойства почти не используются, так как не все из этих узлов относятся к содержимому страницы.

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

parentElement

Свойство parentElement содержит ссылку на родительский элемент. Для элемента <body> родительским является элемент <html>. Элемент <html> является корневым узлом элементом, поэтому он не имеет родительского элемента.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p>Lorem ipsum dolor...</p>
</body>
</html>

<script>
  var body = document.body;
  alert(body.parentElement); /* HTML элемент */
  alert(body.parentElement.parentElement); /* null */
</script>

children, firstElementChild, lastElementChild

Свойство children содержит список всех дочерних узлов элементов, которые присутствуют в дереве DOM на момент выполнения скрипта. Свойства firstElementChild и lastElementChild ссылаются соответственно на первый и последний элемент из этого списка, то есть всегда верно:

element.firstElementChild === element.children[0];
element.lastElementChild === element.children[element.children.length - 1];
<html>
<head>
  <title>DOM интерфейс</title>
  <script>
    var html = document.documentElement;
    alert(html.children.length); /* 1 элемент (HEAD) */
    alert(html.firstElementChild); /* элемент HEAD */
    alert(html.lastElementChild); /* элемент HEAD */
  </script>
</head>
<body>
  <p>Lorem ipsum dolor...</p>
</body>
</html>

<script>
  alert(html.children.length); /* 2 элемента (HEAD, BODY) */
  alert(html.firstElementChild); /* элемент HEAD */
  alert(html.lastElementChild); /* элемент BODY */
</script>

previousElementSibling, nextElementSibling

Свойства previousElementSibling и nextElementSibling используются для обращения к сестринским элементам. Они ссылаются соответственно на предыдущий и последующий узлы элементы дерева внутри общего родителя.

<html>
<head>
  <title>DOM интерфейс</title>
</head>
<body>
  <p>Lorem ipsum dolor...</p>
</body>
</html>

<script>
  var body = document.body;
  alert(body.previousElementSibling); /* элемент HEAD */
  alert(body.nextElementSibling); /* null */
</script>