Page 295 - Браун Э. - Изучаем JavaScript. Руководство по созданию современных веб-сайтов - 2017

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

Методы getElementByid, getElementsByClassName и getElementsByTagName по­
лезны, но есть намного более общий (и мощный) метод, который может находить
элементы не только по одному условию (идентификатор, класс или имя дескрипто­
ра), но и по отношению элемента к другим элементам. Для этой цели в методах объ­
екта document querySelector и querySelectorAll можно использовать селекторы
CSS (CSS selector).
Селекторы CSS позволяют идентифицировать элементы по именам ( <р>, <di v>
и т.д.), идентификатору, классу (или комбинации классов) либо по любой их ком­
бинации. Чтобы идентифицировать элементы по имени, достаточно использовать
название элемента (без угловых скобок). Таким образом, а будет соответствовать
всем дескрипторам <а> в DOM, а br - всем дескрипторам <br>. Чтобы идентифи­
цировать элементы по их классу, используйте точку перед именем класса: . callout
будет соответствовать всем элементам класса callout. Чтобы распознать несколько
классов, достаточно разделить их точками: . callout . fancy будут соответствовать
все элементы класса callout и класса fancy. Наконец они могут быть объединены;
например, a#callout2 . callout . fancy будет соответствовать элементам <а> с иден­
тификатором callout2 и классами callout и fancy (очень редко встретишь селек­
тор, в котором одновременно используется имя элемента, идентификатор и класс
(классы) ... но это возможно!).
Наилучший способ приобретения навыков в селекторах CSS - это загрузить
в браузер пример HTML, предоставленный в данной главе, открыть консоль брау­
зера и опробовать их с методом querySelectorAll. Введите, например, на консоли
document . querySelectorAll ' . callout ' ) . Все примеры из этого раздела подобра­
(
ны так, чтобы в результате вызова метода querySelectorA l на консоль был выве­
l
ден хотя бы один результат.
До сих пор мы говорили об идентификации определенных элементов независимо
от того, где они присутствуют в DOM. Селекторы CSS также позволяют находить
элементы согласно их позиции в DOM.
Если разделить несколько элементов селекторов пробелами, можно выбрать узлы
с определенной иерархией. Например, #content р выберет элементы <р>, которые
являются потомками любого элемента, имеющего идентификатор content. Анало­
гично # c ontent di v р выберет элементы <р>, являющиеся потомками элемента
<di v>, который является потомком элемента с идентификатором content.
Если разделить несколько элементов селектора знаком "больше" (> ), можно вы­
брать узлы, которые являются прямыми потомками указанного элемента. Например,
#content > р выберет элементы <р>, которые находятся в элементе с идентифика­
тором content (сравните это с "#content р " ).

298 Гл в а 1 8 . JavaScript в браузере
а