# Навигация по DOM

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

`document` это часть глобального объекта `window`, который доступен в скрипте, когда он выполняется в браузере. Также как `alert`, `console.log`, `prompt` и многие другие.

Элементы DOM-дерева имеют иерархическое отношение друг к другу. Для описания отношений используются термины предок (ancestor), потомок (descendant), родитель (parent), ребенок (child) и сосед (sibling).

* Самый верхний элемент называется корневым (root node).
* Каждый элемент, кроме корневого, имеет только одного родителя.
* У элемента может быть сколько угодно детей.
* Соседи - это элементы с общим родителем.
* Дочерние элементы (дети) - элементы, которые лежат непосредственно внутри текущего (первая вложенность).
* Потомки – все элементы, которые лежат внутри текущего, вместе с их детьми, детьми их детей и так далее. То есть всё поддерево.

![DOM traversal](https://goit.global/textbooks/javascript-yk5evp/v2/img/lesson-11/dom-traversal.png)

Для навигации по этой иерархии у элементов есть следующие свойства.

* `elem.parentNode` - выберет родителя `elem`.
* `elem.childNodes` - псевдомассив, хранит все дочерние элементы, включая текстовые.
* `elem.children` - псевдомассив, хранит только дочерние узлы-элементы, то есть соответствующие тегам.
* `elem.firstChild` - выберет первый дочерний элемент внутри `elem`, включая текстовые узлы.
* `elem.firstElementChild` - выберет первый дочерний узел-элемент внутри `elem`.
* `elem.lastChild` - выберет последний дочерний элемент внутри `elem`, включая текстовые узлы.
* `elem.lastElementChild` - выберет последний дочерний узел-элемент внутри `elem`.
* `elem.previousSibling` - выберет элемент «слева» от `elem` (его предыдущего соседа).
* `elem.previousElementSibling` - выберет узел-элемент «слева» от `elem` (его предыдущего соседа).
* `elem.nextSibling` - выберет элемент «справа» от `elem` (его следующего соседа)
* `elem.nextElementSibling` - выберет узел-элемент «справа» от `elem` (его следующего соседа).

DOM-коллекции, такие как `childNodes` и `children` - псевдомассивы (NodeList), у них нет большинства методов массива.