Поиск элементов в DOM
Содержание
Найти элемент на странице можно несколькими способами, полезно всех их знать и уметь применять.
getElementById()
Если элемент на странице имеет атрибут id, то его можно получить с помощью метода getElementById(). Важно, чтобы на
одной странице он был уникальный, тогда поиск будет работать быстро.
let element = document.getElementById('elementId'); // Получили элемент или null
// используем как нужно
Пример 2.1 Поиск элементов на странице getElementById()
Найдем и выделим элемент
Открыть пример 2.1 в новой вкладке
querySelector()
Метод позволяет по селектору найти один элемент на странице. Селектор может быть любого типа. Если элемент отсутствует
метод вернет null.
document.querySelector('#test')
document.querySelector('.element')
document.querySelector('div > p')
Можно сужать поиск и искать не по всему документу, а начиная о конкретного элемента.
element.querySelector('#child-element');
В примере 2.2 у нас несколько элементов с одним и тем же классом, при этом будет найден первый элемент.
Так же у нас есть два элемента с одним и тем же классом, которые находятся в разных родительских элементах. Выберем родительский и от него найдем его дочерний.
Пример 2.2 querySelector
Открыть пример 2.2 в новой вкладке
querySelectorAll()
Если нужно по селектору вернуть коллекцию элементов, то для этого можно использовать метод querySelectorAll().
В результате будет возвращена коллекция NodeList, если элементов нет она будет пустой.
let elements = document.querySelectorAll('ul > li.list'); // Получим коллекцию элементов
Пример 2.3 querySelectorAll
Открыть пример 2.3 в новой вкладке
getElementsByTagName()
Вернуть коллекцию элементов (HTMLCollection) по названию тега.
Пример 2.4 getElementsByTagName()
Открыть пример 2.4 в новой вкладке
getElementsByClassName()
Вернуть коллекцию элементов (HTMLCollection) передав в метод названия классов.
Пример 2.5 getElementsByClassName()
Открыть пример 2.5 в новой вкладке
jquery $()
С использованием jquery поиск элементов упрощается.
Поиск идет по любому селектору который передается в конструктор функции $()
Примеры:
$("*")
$(".myClass")
$("div")
$("#myDiv")
$("div, span, p.myClass")
$("div, p, span")
$("a[hreflang|='en']")
Резюме
Что же выбрать.
Если нужно найти по идентификатору используем getElementById.
Более общий поиск одного элемента querySelector.
Если элементов много по одному селектору тогда нам подойдет querySelectorAll
Этого вполне достаточно.
Примечания
- querySelectorAll() возвращает статическую коллекцию, при изменении элементов коллекцию нужно обновлять дополнительно.
- Передав
*можно получить всех потомков родителя - Все методы
getElementsBy*возвращают живую коллекцию.