Документ: метод querySelectorAll()

Метод Document querySelectorAll() возвращает статический (не динамичный) NodeList, представляющий список элементов документа, соответствующих заданной группе селекторов.

selectors

Строка, содержащая один или несколько селекторов для сопоставления. Эта строка должна быть допустимой строкой CSS-селектора; в противном случае будет выброшено исключение SyntaxError.

Обратите внимание, что спецификация HTML не требует, чтобы значения атрибутов были допустимыми идентификаторами CSS. Если значение атрибута class или id не является допустимым идентификатором CSS, необходимо экранировать его перед использованием в селекторе, либо вызвав CSS.escape() для значения, либо используя один из методов, описанных в Экранирование символов. См. Экранирование значений атрибутов для примера.

Нединамичный NodeList, содержащий по одному объекту Element для каждого элемента, соответствующего хотя бы одному из указанных селекторов, или пустой NodeList в случае отсутствия совпадений. Элементы упорядочены в соответствии с порядком в документе — то есть, родители перед потомками, предшествующие элементы перед последующими.

SyntaxError DOMException

Выбрасывается, если синтаксис указанной selectors строки некорректен.

Для получения NodeList всех элементов <p> в документе:

const matches = document.querySelectorAll("p");

Этот пример возвращает список всех элементов <div> в документе с классом либо note или alert:

const matches = document.querySelectorAll("div.note, div.alert");

Здесь мы получаем список элементов <p> , у которых непосредственный родительский элемент — <div> с классом highlighted и которые находятся внутри контейнера с идентификатором test.

const container = document.querySelector("#test");
const matches = container.querySelectorAll("div.highlighted > p");

В этом примере используется селектор атрибута для возвращения списка элементов <iframe> в документе, содержащих атрибут с именем data-src:

const matches = document.querySelectorAll("iframe[data-src]");

Здесь селектор атрибута используется для возвращения списка элементов списка, находящихся внутри списка с идентификатором user-list и имеющими атрибут data-active со значением 1:

const container = document.querySelector("#user-list");
const matches = container.querySelectorAll("li[data-active='1']");

После получения NodeList совпадающих элементов, вы можете просматривать его как любой массив. Если массив пустой (т.е. его свойство length равно 0), то совпадений не найдено.

В противном случае вы можете использовать стандартную нотацию массива для доступа к содержимому списка. Вы можете использовать любые стандартные циклы, такие как:

const highlightedItems = userList.querySelectorAll(".highlighted");

highlightedItems.forEach((userItem) => {
  deleteUser(userItem);
});

Этот пример демонстрирует, что если HTML-документ содержит id, который не является допустимым CSS-идентификатором, то необходимо экранировать значение атрибута перед использованием его в querySelectorAll().

HTML

В следующем коде у элемента <div> есть атрибут id со значением "this?element", который не является допустимым CSS-идентификатором, потому что символ "?" не разрешён в CSS-идентификаторах.

У нас также есть три кнопки и элемент <pre> для регистрации ошибок.

<div id="this?element"></div>

<button id="no-escape">No escape</button>
<button id="css-escape">CSS.escape()</button>
<button id="manual-escape">Manual escape</button>

<pre id="log"></pre>

CSS

div {
  background-color: blue;
  margin: 1rem 0;
  height: 100px;
  width: 200px;
}

JavaScript

Все три кнопки при нажатии пытаются выбрать <div>, а затем установить его цвет фона случайным значением.

• Первая кнопка использует значение "this?element" напрямую.
• Вторая кнопка экранирует значение с помощью CSS.escape().
• Третья кнопка явно экранирует символ "?" с помощью обратного слэша. Обратите внимание, что мы также должны экранировать обратный слэш сам по себе, используя другой обратный слэш, например: "\\?".

const log = document.querySelector("#log");

function random(number) {
  return Math.floor(Math.random() * number);
}

function setBackgroundColor(id) {
  log.textContent = "";

  try {
    const elements = document.querySelectorAll(`#${id}`);
    const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
    elements[0].style.backgroundColor = randomColor;
  } catch (e) {
    log.textContent = e;
  }
}

document.querySelector("#no-escape").addEventListener("click", () => {
  setBackgroundColor("this?element");
});

document.querySelector("#css-escape").addEventListener("click", () => {
  setBackgroundColor(CSS.escape("this?element"));
});

document.querySelector("#manual-escape").addEventListener("click", () => {
  setBackgroundColor("this\\?element");
});

Результат

Нажатие первой кнопки приводит к ошибке, в то время как вторая и третья кнопки работают должным образом.

• Поиск элементов DOM с помощью селекторов
• Селекторы атрибутов в руководстве по CSS
• Селекторы атрибутов в учебном центре MDN
• Element.querySelector() и Element.querySelectorAll()
• Document.querySelector()
• DocumentFragment.querySelector() и DocumentFragment.querySelectorAll()