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

Метод Document querySelector() возвращает первый Element в документе, соответствующий указанному селектору CSS или группе селекторов CSS. Если совпадений не найдено, возвращается null.

Сопоставление выполняется с использованием обхода узлов документа в порядке глубины, предварительного обхода, начиная с первого элемента разметки документа и переходя к последовательным узлам в порядке количества дочерних узлов.

Если указанный селектор соответствует идентификатору, который неправильно используется более одного раза в документе, возвращается первый элемент с этим идентификатором.

Псевдоэлементы CSS никогда не возвращают какие-либо элементы, как указано в Спецификации API селекторов.

selectors

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

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

Объект Element, представляющий первый элемент в документе, соответствующий заданному набору селекторов CSS, или null возвращается, если совпадений нет.

Если вам нужен список всех элементов, соответствующих указанным селекторам, необходимо использовать querySelectorAll() вместо этого.

SyntaxError DOMException

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

В этом примере возвращается первый элемент в документе с классом myclass:

const el = document.querySelector(".myclass");

Селекторы также могут быть очень мощными, как показано в следующем примере. Здесь возвращается первый элемент <input> с именем "login" (<input name="login"/>) находящийся внутри элемента <div> с классом "user-panel main" (<div class="user-panel main">) в документе:

const el = document.querySelector("div.user-panel.main input[name='login']");

Поскольку все строки селекторов CSS допустимы, вы также можете использовать отрицание селекторов:

const el = document.querySelector(
  "div.user-panel:not(.main) input[name='login']",
);

Это позволит выбрать input с родительским div с классом user-panel , но без класса main.

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

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 element = document.querySelector(`#${id}`);
    const randomColor = `rgb(${random(255)} ${random(255)} ${random(255)})`;
    element.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 с помощью селекторов
• Element.querySelector()
• Document.querySelectorAll()
• Element.querySelectorAll()