JavaScript/Список функций для поиска в DOM

Материал из Энциклопедия о программировании
Перейти к: навигация, поиск

В современном JS есть множество гибких простых и быстрых способов поисков элементов в DOM. Раньше этот функционал реализовывался различными сторонними библиотеками, вроде jQuery, но сейчас всё стало легко и в обычном нативном базовом функционале JS.

МетодДословно (действие)ОписаниеПример использования
getElementByIdПолучить элемент по атрибуту idУ каждого DOM-элемента может быть атрибут id. Его значение должно быть уникальным для документа. Метод возвращает элемент с данным id. Если не найден, то null.Получить элемент с id «foo»:
document.getElementById('foo')
getElementsByTagNameПолучить все элементы по названию тега. Метод elem.getElementsByTagName(tag) ищет все элементы с заданным тегом tag внутри элемента elem и возвращает их в виде списка. Регистр тега не имеет значения. Можно искать и в элементе и в документе.Получить все элементы div:
var elements = document.getElementsByTagName('div');
getElementsByNameПолучить все элементы по атрибутуВызов document.getElementsByName(name) позволяет получить все элементы с данным атрибутом name. До появления стандарта HTML5 этот метод возвращал только те элементы, в которых предусмотрена поддержка атрибута name, в частности: iframe, a, input и другими. В современных браузерах тег не имеет значения, но старое поведение можно увидеть, попробовав пример ниже в IE10 и до версии 10.Получить все элементы с именем age:
var elems = document.getElementsByName('age');
getElementsByClassNameПолучить элементы по названию классаВызов elem.getElementsByClassName(className) возвращает коллекцию элементов с классом className. Находит элемент и в том случае, если у него несколько классов, а искомый — один из них. Как и getElementsByTagName, этот метод может быть вызван и в контексте DOM-элемента и в контексте документа.Возвращает коллекцию элементов с классом className:
elem.getElementsByClassName(className);
querySelectorAllЗапрос по селектору для всехВызов elem.querySelectorAll(cssQuery) возвращает все элементы внутри elem, удовлетворяющие CSS-селектору cssQuery.Возвращает все элементы внутри elem:
elem.querySelectorAll(cssQuery);
querySelectorЗапрос по селекторуТо же самое, что elem.querySelectorAll(cssQuery), но возвращает только первый элемент. Фактически, эквивалентен elem.querySelectorAll(cssQuery)[0], но быстрее, так как ищутся не все элементы, а только первый.elem.querySelector(cssQuery);
matchesSelectorСоответствие селекторуВызов elem.matchesSelector(css) проверяет, удовлетворяет ли elem селектору css. Он возвращает true либо false.Проверяет, удовлетворяет ли elem css селектору:
elem.matchesSelector(css);