Для отбора HTML-элементов в браузере при помощи JavaScript можно использовать готовые методы из стандарта объектной модели документа DOM.
- querySelector();
- querySelectorAll();
Оба метода вызываются на HTML-элементе для которого нужно найти потомков.
Метод «querySelector()» возвращает самого первого потомка, который соответствует CSS-селектору. Селектор передаётся в виде строки в качестве первого (единственного) параметра.
Метод «querySelectorAll()» возвращает массиво-подобный объект всех потомков, которые соответствует CSS-селектору. Селектор передаётся в виде строки в качестве первого (единственного) параметра.
Чтобы максимально полно поискать, нужно вызывать метод у всего документа — объект «document«. Запрос будет выглядеть так:
document.querySelector('div'); // или document.querySelectorAll('div');
Здесь важно учитывать скорость поиска HTML-элемента, а также универсальность (удобство) написания кода.
Поиск потомков относительно всего документа будет занимать больше всего времени, чем если бы мы искали их от какого-нибудь ближайшего предка. С ростом количества элементов в дереве документа, будет расти время поиска таких потомков.
С другой стороны, написание кода через поиски потомков по всему документу может иметь преимущество в случаях частой смены структуры родственных связей между элементами. Например, если мы ориентируемся на селекторы классов или идентификаторов, но их вложенность друг в друга будет меняться, тогда мы безболезненно сможем поменять иерархию этих элементов так как поиски потомков всё равно будут начинаться от всего документа.
Если важнее скорость, тогда каждый запрос на поиск элементов нужно оптимизировать индивидуально. Если важно сохранить устойчивость кода, тогда используем более общие поисковые конструкции для поиска потомков.
Чтобы более качественно отбирать элементы со страницы, нужно пользоваться синтаксисом CSS-селекторов.
