Навигация по DOM
https://learn.javascript.ru/traversing-dom
.childNodes - возвращает список всех узлов элемента
.children - возращает список всех нетекстовых узлов
.parentNode - родительский узел
parentElement
.firstChild - первый узел-ребенок
.firstElementChild - первый нетекстовый узел
.lastChild - последний узел-ребенок
.lastElementChild - последний нетекстовый узел
.previousSibling - предыдущий соседний узел
.previousElementSibling - предыдущий нетекстовый сосед
.nextSibling .nextElementSibling
Конвертация из HTMLCollection в Array
var arr = Array.prototype.slice.call( htmlCollection )
var arr = [].slice.call(htmlCollection);
Поиск элементов в DOM
document.getElementsByTagName()
document.getElementsByClassName()
.querySelector - возвращает элемент, соответствующий указанному селектору
.querySelectorAll - возвращает список элементов, соответствующие указанному селектору
elementList = document.querySelectorAll(selectors);
<div class="block">
</div>
<div class="block">
</div>
<script>
var first_block = document.querySelector("DIV"); //вернет ссылку на первый блок
</script>
Практика:
- Есть блоки с одним и тем же классом. Четные блоки окрасить в один цвет, нечетные блоки окрасить в другой (использовать querySelectorAll).
- Есть список блоков. Пронумеровать блоки в порядке возрастания (использовать document.body.children).
- Есть родительский блок и есть дети. Дети одного цвета, родитель другого. При клике на область родительского блока, родительский блок и дети меняются цветами.
- Есть четыре блока. При нажатии на клавиши перемещаем «выделение» на активном блоке
- В предыдущем задании делаем блок верхнего уровня
- Иерархическое меню. Перемещаемся по нему с помощью клавиш, при нажатии enter меню выпадает