JavaScript: выборка элементов DOM

Получение элементов

Получение корневых элементов

let $html = document.documentElement;
let $body = document.body;
let $head = document.head;

По идентификатору

let $element = document.getElementById('element-id');

Метод getElementById может быть вызван только у объекта document. Таким образом, элемент с указанным идентификатором ищется по всему документу.

По атрибуту name

let $namedInputs = document.getElementsByName('named-input');

Метод getElementsByName возвращает не один элемент, а коллекцию элементов (если ничего не нашлось, то пустую коллекцию).

Коллекции похожи на упрощенные массивы, их можно перебирать в цикле.

Метод можно вызывать только у объекта document.

По тегу

let $links = element.getElementsByTagName('a');
let $allTags = document.getElementsByTagName('*');

Метод getElementsByTagName возвращает коллекцию элементов.

Метод можно вызвать как у объекта document (для поиска по всему документу), так и для любого другого DOM-узла. В этом случае поиск будет осуществляться только внутри этого узла.

По имени класса

let $greenElements = element.getElementsByClassName('.green-text');

Так же, как и предыдущий метод, возвращает коллекцию элементов и может быть вызван для любого DOM-узла.

По CSS-селектору

Есть два метода для поиска по селектору:

let $firstElement = element.querySelector('.parent .child');
let $allElements = element.querySelectorAll('.parent .child');

Можно использовать любой валидный CSS-селектор.

Метод querySelectorAll возвращает коллекцию из всех подходящих под селектор элементов.

Метод querySelector находит только первый подходящий элемент и затем прекращает поиск и возвращает его. Если ничего не найдено, вернется null.

Оба метода можно использовать и для всего документа, и внутри конкретного DOM-узла.

Проверка селектора

Можно проверить, подходит ли конкретный element под указанный CSS-селектор:

let isGreenElement = element.matches('.green-text');

Перемещение по дереву элементов

Потомки первого уровня

element.childNodes	содержит все дочерние узлы, в т.ч. текстовые ТОЛЬКО ДЛЯ ЧТЕНИЯ
element.children	содержит все дочерние узлы-элементы ТОЛЬКО ДЛЯ ЧТЕНИЯ
element.hasChildNodes()	есть ли дочерние элементы
element.firstChild	первый дочерний узел element.childNodes[0]
element.firstElementChild	первый дочерний узел-элемент element.childNodes[0]
element.lastChild	последний дочерний узел element.childNodes[element.childNodes.length - 1]
element.lastElementChild	последний дочерний узел-элемент element.childNodes[element.childNodes.length - 1]

Родитель

element.parentNode	родительский узел document.documentElement.parentNode == document
element.parentElementNode	родительский узел-элемент document.documentElement.parentElement == null

Все родители

element.closest(cssSelector)

ищет ближайший элемент подходящий под селектор (выше по дереву, включая сам element)

Соседи

element.previousSibling	предыдущий братский узел
element.previouselementSibling	предыдущий братский узел-элемент
element.nextSibling	следующий братский узел
element.nextElementSibling	следующий братский узел-элемент

Конкретные элементы

Таблицы

table.rows	коллекция строк TR таблицы
table.caption/tHead/tFoot	ссылки на элементы таблицы CAPTION, THEAD, TFOOT
table.tBodies	коллекция элементов таблицы TBODY, по спецификации их может быть несколько
tbody.rows	коллекция строк TR секции
tr.cells	коллекция ячеек TD/TH
tr.sectionRowIndex	номер строки в текущей секции THEAD/TBODY
tr.rowIndex	номер строки в таблице
td.cellIndex	номер ячейки в строке