Книга: Выразительный JavaScript

Селекторы запросов

Селекторы запросов

В этой книге мы не будем часто использовать таблицы стилей. Понимание их работы критично для программирования в браузере, но подробное разъяснение всех их свойств заняло бы 2-3 книги. Главная причина знакомства с ними и с синтаксисом селекторов (записей, определяющих, к каким элементам относятся правила) – мы можем использовать тот же эффективный мини-язык для поиска элементов DOM.

Метод querySelectorAll, существующий и у объекта document, и у элементов-узлов, принимает строку селектора и возвращает массивоподобный объект, содержащий все элементы, подходящие под него.

<p>Люблю грозу в начале
  <span>мая</span></p>
<p>Когда весенний первый гром</p>
<p>Как бы <span>резвяся
  <span>и играя</span></span></p>
<p>Грохочет в небе голубом.</p>
<script>
  function count(selector) {
    return document.querySelectorAll(selector).length;
  }
  console.log(count("p"));           // Все элементы <p>
  // ? 4
  console.log(count(".animal"));     // Класс animal
  // ? 2
  console.log(count("p .animal"));   // Класс animal внутри <p>
  // ? 2
  console.log(count("p > .animal")); // Прямой потомок <p>
  // ? 1
</script>

В отличие от методов вроде getElementsByTagName, возвращаемый querySelectorAll объект не интерактивный. Он не изменится, если вы измените документ.

Метод querySelector (без All) работает сходным образом. Он нужен, если вам необходим один конкретный элемент. Он вернёт только первое совпадение, или null, если совпадений нет.

Оглавление книги