Навигация по DOM-элементам
JavaScript не умеет работать напрямую с HTML. Чтобы их подружить, придумали DOM — интерфейс, позволяющий JS работать с разметкой документа.
querySelector('#id')
querySelector('.class')
querySelector('.class')
Найти элемент по id и имени класса
Метод elem.querySelector(css) Метод elem.querySelector(css) возвращает первый элемент, соответствующий данному CSS-селектору.
querySelectorAll('#id')
querySelectorAll('.class')
querySelectorAll('.class')
Найти (все) элементы по id и имени класса
Самый универсальный метод поиска – это elem.querySelectorAll(css) , он возвращает все элементы внутри elem, удовлетворяющие данному CSS-селектору.
document.getElementById('id')
Найти элемент по id
Если у элемента есть атрибут id, то мы можем получить его вызовом document.getElementById(id) , где бы он ни находился.
html = document.documentElement
body = document.body
head = document.head
body = document.body
head = document.head
Найти самые верхние элементы DOM (html, body, head)
Самые верхние элементы дерева доступны как свойства объекта document
childNodes
firstChild
lastChild
firstChild
lastChild
Поиск дочерних элементов
Дочерние узлы (или дети) – элементы, которые являются непосредственными детьми узла. Другими словами, элементы, которые лежат непосредственно внутри данного.
parentNode
nextSibling
previousSibling
nextSibling
previousSibling
Соседи и родитель
Соседи – это узлы, у которых один и тот же родитель.
parentNode
nextSibling
previousSibling
nextSibling
previousSibling
Соседи и родитель
Соседи – это узлы, у которых один и тот же родитель.
elem.closest(css)
Найти ближайшего предка
Предки элемента – родитель, родитель родителя, его родитель и так далее. Вместе они образуют цепочку иерархии от элемента до вершины.
children
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
parentElement
firstElementChild
lastElementChild
previousElementSibling
nextElementSibling
parentElement
Поиск только по элементам
Для большинства задач текстовые узлы и узлы-комментарии нам не нужны. Мы хотим манипулировать узлами-элементами, которые представляют собой теги и формируют структуру страницы.
table.rows
table.caption/tHead/tFoot
table.tBodies
tr.cells
и т.д.
table.caption/tHead/tFoot
table.tBodies
tr.cells
и т.д.
Поиск элементов в таблице
Некоторые типы DOM-элементов предоставляют для удобства дополнительные свойства, специфичные для их типа.