JavaScript с нуля

Таков синтаксис селектора CSS

Когда я впервые использовал querySelector и querySelectorAll, то меня удивило, что в качестве аргумента они, по сути, получают всевозможные вариации синтаксиса селектора CSS. При этом вам не обязательно делать их простыми, как я показывал до сих пор.

Если вам понадобится нацелиться на все элементы img без необходимости указывать значение класса, то вот как может выглядеть вызов querySelectorAll:

let images = document.querySelectorAll("img");

Если вы захотите нацелиться только на изображение, чей атрибут src установлен как meh.png, то можете сделать следующее:

let images = document.querySelectorAll("img[src='meh.png']");

Обратите внимание, что я просто указал селектор атрибута[3] в качестве аргумента для querySelectorAll. Практически любые сложные выражения, которые вы можете определить для селектора в CSS-документе, также могут быть определены в качестве аргумента для querySelector или querySelectorAll.

Однако есть и некоторые подвохи, о которых стоит знать.

Не все селекторы псевдоклассов допустимы. Селекторы, состоящие из: visited,link,:before и::after, будут проигнорированы, и элементы не будут найдены.

Допустимый диапазон возможностей предоставления вами селекторов зависит от поддержки CSS браузером. Internet Explorer 8 поддерживает querySelector и querySelectorAll, но не поддерживает CSS3. Это значит использование всего, что новее селекторов, определенных в CSS2, не будет работать с querySelector и querySelectorAll в IE8. Скорее всего, это вас не коснется, так как вы наверняка используете более новые версии браузеров, в которых эта проблема с IE8 абсолютно не актуальна.

Селектор, который вы указываете, применяется только к наследникам стартового элемента, с которого начинается поиск. При этом сам этот стартовый элемент в поиск не включается. Не все вызовы querySelector и querySelectorAll должны производиться из document.

КОРОТКО О ГЛАВНОМ

Функции querySelector и querySelectorAll чрезвычайно полезны в сложных документах, где нацелиться на конкретный элемент зачастую не так просто. Полагаясь на грамотно организованный синтаксис селектора CSS, мы можем охватывать как малое, так и большое количество нужных нам элементов. Если мне требуются все элементы изображений, я просто могу написать querySelectorAll("img"). Если мне нужен только непосредственно элемент img, содержащийся внутри его родителя div, то я могу написать querySelector("div + img"). Это все очень круто.

Прежде чем завершить тему: есть еще кое-что важное, о чем хочется сказать. Во всем этом захватывающем процессе поиска элементов недостает функций getElementById, getElementsByTagName и getElementsByClassName. В свое время именно они использовались для поиска элементов в DOM. Функции querySelector и querySelectorAll — это настоящее и будущее решение этой задачи, поэтому не стоит беспокоиться о перечисленных функциях getElement*. На данный момент единственным их преимуществом перед querySelector и querySelectorAll является производительность. getElementById весьма быстра, и вы можете своими глазами увидеть ее в сравнении здесь: https://jsperf.com/getelementbyid-vs-queryselector/11.

Однако как сказал один мудрый человек: «Жизнь слишком коротка, чтобы тратить ее на изучение старых функций JavaScript, даже если они немного быстрее!»