Dokument: querySelector() Methode

selectors

Ein String, der einen oder mehrere Selektoren enthält, die zu matchen sind. Dieser String muss ein gültiger CSS-Selektor sein; andernfalls wird eine SyntaxError Ausnahme ausgelöst.

Beachten Sie, dass die HTML-Spezifikation nicht erfordert, dass Attributwerte gültige CSS-Bezeichner sind. Wenn ein class oder id Attributswert kein gültiger CSS-Bezeichner ist, müssen Sie diesen vor der Verwendung im Selektor escapen, entweder indem Sie CSS.escape() auf den Wert anwenden oder eine der in Zeichen escapen beschriebenen Techniken verwenden. Siehe Escaping von Attributwerten für ein Beispiel.

Ein Element-Objekt, das das erste Element im Dokument darstellt, das dem angegebenen Satz von CSS-Selektoren entspricht oder null, wenn keine Übereinstimmungen vorhanden sind.

Wenn Sie eine Liste aller Elemente benötigen, die den angegebenen Selektoren entsprechen, sollten Sie stattdessen querySelectorAll() verwenden.

SyntaxError DOMException

Wird ausgelöst, wenn die Syntax der angegebenen selectors ungültig ist.

In diesem Beispiel wird das erste Element im Dokument mit der Klasse myclass zurückgegeben:

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

Selektoren können auch wirklich mächtig sein, wie im folgenden Beispiel gezeigt. Hier wird das erste <input>-Element mit dem Namen "login" (<input name="login"/>), das sich innerhalb eines <div>-Elements mit der Klasse "user-panel main" (<div class="user-panel main">) im Dokument befindet, zurückgegeben:

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

Da alle CSS-Selektorstrings gültig sind, können Sie auch Selektoren negieren:

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

Dies wird ein Input mit einem Eltern-Div mit der Klasse user-panel, aber nicht der Klasse main auswählen.

Dieses Beispiel zeigt, dass wenn ein HTML-Dokument eine id enthält, die kein gültiger CSS-Bezeichner ist, dann müssen wir den Attributwert escapen, bevor wir ihn in querySelector() verwenden.

HTML

Im folgenden Code hat ein <div>-Element eine id von "this?element", was kein gültiger CSS-Bezeichner ist, da das Zeichen "?" in CSS-Bezeichnern nicht erlaubt ist.

Wir haben auch drei Buttons und ein <pre>-Element zum Protokollieren von Fehlern.

<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

Alle drei Buttons versuchen beim Klicken, das <div> auszuwählen und dann seine Hintergrundfarbe auf einen zufälligen Wert zu setzen.

• Der erste Button verwendet den Wert "this?element" direkt.
• Der zweite Button escapt den Wert mit CSS.escape().
• Der dritte Button escapt das "?"-Zeichen explizit mit einem Backslash. Beachten Sie, dass wir den Backslash selbst ebenfalls escapen müssen, indem wir einen weiteren Backslash verwenden, wie: "\\?".

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");
});

Ergebnis

Beim Klicken auf den ersten Button wird ein Fehler angezeigt, während der zweite und dritte Button ordnungsgemäß funktionieren.

• DOM-Elemente mithilfe von Selektoren finden
• Element.querySelector()
• Document.querySelectorAll()
• Element.querySelectorAll()