Dokument: querySelector() Methode

selectors

Ein String, der einen oder mehrere Selektoren enthält, die übereinstimmen sollen. Dieser String muss ein gültiger CSS-Selektor-String sein; ist er es nicht, wird eine SyntaxError-Ausnahme geworfen.

Beachten Sie, dass die HTML-Spezifikation nicht verlangt, dass Attributwerte gültige CSS-Identifier sind. Wenn ein class- oder id-Attributwert kein gültiger CSS-Identifier ist, müssen Sie es entweder mit CSS.escape() auf den Wert escapen, oder eine der Techniken verwenden, die unter Zeichen escapen beschrieben sind. Sehen Sie Attributwerte escapen für ein Beispiel.

Ein Element-Objekt, das das erste Element im Dokument repräsentiert, das dem angegebenen Satz von CSS-Selektoren entspricht. Wenn keine Übereinstimmungen gefunden werden, wird null zurückgegeben.

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

SyntaxError DOMException

Wird geworfen, 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 sehr leistungsfähig sein, wie im folgenden Beispiel gezeigt. Hier wird das erste <input>-Element mit dem Namen "login" (<input name="login"/>), das innerhalb eines <div>-Elements mit der Klasse "user-panel main" (<div class="user-panel main">) im Dokument liegt, zurückgegeben:

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

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

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

Dies wird ein Eingabefeld mit einem übergeordneten 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-Identifier ist, wir den Attributwert escapen müssen, bevor wir ihn in querySelector() verwenden.

HTML

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

Wir haben auch drei Schaltflächen und ein <pre>-Element für die Fehlerprotokollierung.

<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 Schaltflächen versuchen beim Klick, das <div> auszuwählen und dann seine Hintergrundfarbe auf einen zufälligen Wert zu setzen.

• Die erste Schaltfläche verwendet den Wert "this?element" direkt.
• Die zweite Schaltfläche escapet den Wert mit CSS.escape().
• Die dritte Schaltfläche escapet das "?"-Zeichen explizit mit einem Backslash. Beachten Sie, dass wir auch den Backslash selbst 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

Das Klicken der ersten Schaltfläche gibt einen Fehler zurück, während die zweite und dritte Schaltfläche ordnungsgemäß funktionieren.

• Lokalisieren von DOM-Elementen mit Selektoren
• Element.querySelector()
• Document.querySelectorAll()
• Element.querySelectorAll()