Startseite >JavaScript >JavaScript-Referenz – Methoden und Objekte >Document.querySelector()

Document.querySelector()

document.querySelector(selector) element.querySelector(selector)

Gibt das erste Element zurück, das zu einem CSS-Selektor passt, oder null. Auf einem Element aufgerufen, sucht sie nur innerhalb dieses Elements.

Das Beispiel arbeitet mit dem HTML über dem Code. Ein mit console.log ausgegebenes Element erscheint als sein öffnendes Tag.

Parameter

selector – ein beliebiger CSS-Selektor (#id, .class, [name="email"], ul > li:first-child…).

Rückgabewert

Ein Element (Element) oder null.

Beispiele

<ul id="menu">
  <li class="item active"><a href="/php/">PHP</a></li>
  <li class="item"><a href="/mysql/">MySQL</a></li>
  <li class="item"><a href="/js/">JavaScript</a></li>
</ul>

console.log(document.querySelector('.active').textContent);
console.log(document.querySelector('#menu li:last-child a').getAttribute('href'));
console.log(document.querySelector('a[href="/mysql/"]'));
console.log(document.querySelector('.missing'));
const menu = document.querySelector('#menu');
console.log(menu.querySelector('li:nth-child(2)').textContent);

Ausgabe:

PHP
/js/
<a href="/mysql/">
null
MySQL

Ein ungültiger Selektor wirft einen Fehler:

<ul id="menu">
  <li class="item active"><a href="/php/">PHP</a></li>
  <li class="item"><a href="/mysql/">MySQL</a></li>
  <li class="item"><a href="/js/">JavaScript</a></li>
</ul>

try {
  document.querySelector('li[');
} catch (e) {
  console.log(e.name);
}
document.querySelector('.missing')?.classList.add('x');
console.log('läuft ohne Fehler weiter');

Ausgabe:

SyntaxError
läuft ohne Fehler weiter

Worauf Sie achten sollten

Existiert das Element nicht, gibt sie null zurück und der nächste Zugriff (.textContent) endet mit einem TypeError. Fangen Sie das mit einer Bedingung oder mit ?. ab.
Ein Skript im Seitenkopf läuft, bevor die Elemente existieren – verwenden Sie defer oder das Ereignis DOMContentLoaded.
Eine ID oder Klasse, die mit einer Ziffer beginnt, muss im Selektor maskiert werden (CSS.escape()).

Browserunterstützung

Baseline – weithin verfügbar: funktioniert in allen gängigen Browsern, und das schon lange (spätestens seit 2015). Ab Version: Chrome 1, Firefox 3.5, Safari 3.1; nicht in Node.js (Browser-API). Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
Document.querySelectorAll()
Document.getElementById()
Element.closest()
Element.matches()