JavaScript querySelector erklärt: Syntax, erweiterte Selektoren, bewährte Methoden und Beispiele

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung: Was ist querySelector?

Grundüberblick und Rolle von querySelector

querySelector ist eine Methode, die das erste Element zurückgibt, das dem angegebenen Selektor entspricht.

Betrachten wir das folgende Beispiel.

const element = document.querySelector('.example');
console.log(element);

Dieser Code holt das erste Element mit dem Klassennamen example.

Selbst wenn mehrere Elemente für denselben Selektor existieren, wird nur das erste gefundene Element zurückgegeben.

<div class="example">1</div>
<div class="example">2</div>

In diesem Fall wird nur das erste <div class="example">1</div> ausgewählt.

Warum querySelector bei der DOM-Manipulation wichtig ist

querySelector ist besonders nützlich in Situationen wie den folgenden.

1. Flexible Elementauswahl mit CSS-Selektoren

• Unterstützt eine breite Palette von Selektoren wie Klassen, IDs, Attribute und Pseudoklassen.

2. Sauberer Code selbst für komplexe Strukturen

• Findet effizient verschachtelte Elemente oder Elemente mit bestimmten Attributen.

3. Konsistenter, moderner JavaScript-Stil

• Vielseitiger als getElementById oder getElementsByClassName und funktioniert gut mit modernen JavaScript-Patterns.

Hier ist ein Beispiel für die Auswahl eines bestimmten Buttons innerhalb eines Formulars.

const submitButton = document.querySelector('form button[type="submit"]');
console.log(submitButton);

Dieser Code wählt nur den Submit-Button im Formular aus.

Unterschied zwischen querySelector und querySelectorAll

Während querySelector nur das erste gefundene Element zurückgibt, liefert querySelectorAll alle gefundenen Elemente als NodeList.

const elements = document.querySelectorAll('.example');
console.log(elements);

Dieser Code ruft alle Elemente mit dem Klassennamen example ab.

Zusammenfassung

In diesem Abschnitt haben wir das Grundkonzept und die Rolle der JavaScript‑Methode querySelector erklärt.

Wichtige Erkenntnisse:

1. Sie können Elemente flexibel mit CSS-Selektoren auswählen
2. querySelector gibt nur das erste Ergebnis zurück, während querySelectorAll alle Ergebnisse liefert
3. Es ist eine wichtige Methode für prägnante und effiziente DOM-Manipulation

Im nächsten Abschnitt werfen wir einen genaueren Blick auf die Grundsyntax von querySelector und praktische Anwendungsbeispiele.

2. Grundsyntax und Verwendung von querySelector

Grundsyntax

Die Grundsyntax von querySelector lautet wie folgt:

document.querySelector(selector);

• Argument : Ein CSS-Selektor-String.
• Rückgabewert : Das erste Element, das dem Selektor entspricht. Wenn kein Treffer gefunden wird, gibt es null zurück.

Beispiele: Auswahl grundlegender Elemente

1. Auswahl nach ID Da eine ID eindeutig ist, können Sie zuverlässig genau ein Element auswählen.

   const element = document.querySelector('#header');
   console.log(element);
   

Dieser Code wählt das Element mit der ID header aus.

2. Auswahl nach Klasse Wenn Sie einen Klassennamen angeben, wird nur das erste gefundene Element zurückgegeben.

   const element = document.querySelector('.content');
   console.log(element);
   

Dieser Code wählt das erste Element mit dem Klassennamen content aus.

3. Auswahl nach Tag-Name Sie können auch Elemente auswählen, indem Sie einen Tag-Namen angeben.

   const element = document.querySelector('p');
   console.log(element);
   

Dieser Code wählt das erste <p>-Tag auf der Seite aus.

Auswahl von Elementen mit kombinierten Selektoren

Durch die Kombination von CSS-Selektoren können Sie Elemente flexibler ansprechen.

1. Verschachtelte Selektoren Wählen Sie Elemente aus, indem Sie eine Eltern‑Kind‑Beziehung angeben.

   const element = document.querySelector('div.container p');
   console.log(element);
   

Dieser Code wählt das erste <p>-Tag innerhalb eines <div> mit dem Klassennamen container aus.

2. Attribut-Selektoren Wählen Sie Elemente aus, die ein bestimmtes Attribut besitzen.

   const element = document.querySelector('input[type="text"]');
   console.log(element);
   

markdown.Dieser Code wählt das erste <input>‑Element aus, dessen type‑Attribut text ist.

3. Verwendung von Pseudo‑Klassen Verwenden Sie Pseudo‑Klassen, um Elemente in einem bestimmten Zustand oder einer bestimmten Position auszuwählen.

   const element = document.querySelector('li:first-child');
   console.log(element);
   

Dieser Code wählt das erste <li>‑Element aus.

Was zu tun ist, wenn querySelector kein Element findet

querySelector gibt null zurück, wenn kein passendes Element gefunden wird. Aus diesem Grund ist es wichtig, nach der Auswahl zu prüfen, ob das Element existiert.

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
} else {
  console.log('Element not found');
}

Dieser Code funktioniert sicher, ohne einen Fehler zu werfen, selbst wenn das Element nicht existiert.

Zusammenfassung

In diesem Abschnitt haben wir die grundlegende Syntax und Verwendung von querySelector behandelt.

Kurze Zusammenfassung:

1. Sie können Elemente einfach nach ID, Klasse oder Tag‑Name auswählen
2. Sie können Elemente flexibel auswählen, indem Sie komplexe Selektoren und Pseudo‑Klassen kombinieren
3. Fehlerbehandlung für fehlende Elemente ist ebenfalls wichtig

Im nächsten Abschnitt tauchen wir in fortgeschrittene Anwendungsbeispiele mit leistungsfähigeren Selektoren ein.

3. Fortgeschrittene Beispiele: Wie man leistungsfähigere Selektoren verwendet

Spezifische Elemente mit Attribut‑Selektoren auswählen

Attribut‑Selektoren ermöglichen es Ihnen, flexibel Elemente auszuwählen, die bestimmte Attribute oder Werte besitzen.

1. Ein Element mit einem bestimmten Attributwert auswählen

   const checkbox = document.querySelector('input[type="checkbox"]');
   console.log(checkbox);
   

Dieser Code wählt das erste <input>‑Element aus, dessen type‑Attribut checkbox ist.

2. Teilweise Übereinstimmungen für Attributwerte verwenden

   const link = document.querySelector('a[href^="https://"]');
   console.log(link);
   

Dieser Code wählt einen Link aus, dessen href‑Attribut mit https:// beginnt.

Häufig verwendete Attribut‑Selektoren:

Auswahl mit Pseudo‑Klassen und Pseudo‑Elementen

Pseudo‑Klassen und Pseudo‑Elemente erleichtern die Auswahl von Elementen in bestimmten Zuständen oder Positionen.

1. Pseudo‑Klassen für den Zustand

   const activeLink = document.querySelector('a.active');
   console.log(activeLink);
   

Dieser Code wählt einen Link aus, der die Klasse active hat.

2. Pseudo‑Klassen für die Position

   const firstItem = document.querySelector('ul > li:first-child');
   console.log(firstItem);
   

Dieser Code wählt das erste Element in der Liste aus.

Häufig verwendete Pseudo‑Klassen:

Fein abgestimmte Filterung mit zusammengesetzten Selektoren

Sie können auch mehrere Selektoren kombinieren, um komplexere Bedingungen auszudrücken.

1. Nach Eltern‑Kind‑Beziehung filtern

   const nestedElement = document.querySelector('div.container > p.text');
   console.log(nestedElement);
   

Dieser Code wählt das erste p‑Element mit der Klasse text innerhalb eines div‑Elements mit der Klasse container aus.

2. Mehrere Bedingungen kombinieren

   const inputField = document.querySelector('input[type="text"].required');
   console.log(inputField);
   

Dieser Code wählt das erste <input>‑Element aus, das type="text" hat und außerdem die Klasse required besitzt.

Zusammenfassung

In diesem Abschnitt haben wir die erweiterte Verwendung von Selektoren mit querySelector erklärt.

Wichtige Punkte:

1. Attribut‑Selektoren ermöglichen flexible Filterung von Elementen
2. Pseudo‑Klassen und Pseudo‑Elemente ermöglichen das Anvisieren von Zustand und Position
3. Zusammengesetzte Selektoren erleichtern das Festlegen detaillierter Bedingungen und das Auswählen komplexer Ziele

Im nächsten Abschnitt behandeln wir wichtige Vorsichtsmaßnahmen und bewährte Praktiken bei der Verwendung von querySelector.

4. Vorsichtsmaßnahmen und bewährte Praktiken bei der Verwendung von querySelector

Fehlerbehandlung und Null‑Prüfungen

Wenn kein Element dem angegebenen Selektor entspricht, gibt querySelector null zurück. Aus diesem Grund sollten Sie stets prüfen, ob das Element existiert, bevor Sie versuchen, es zu manipulieren.

Beispiel: Implementierung einer Null‑Prüfung

const element = document.querySelector('.nonexistent');
if (element) {
  console.log('Element found');
  element.textContent = 'New text';
} else {
  console.log('Element not found');
}

Dieser Code vermeidet Fehler sicher, auch wenn das Element nicht existiert.

Escaping von Sonderzeichen

Wenn Ihr Selektor Sonderzeichen enthält, kann querySelector einen Fehler werfen, es sei denn, Sie escapen sie korrekt.

Beispiel: Auswählen eines Elements, das Sonderzeichen enthält

HTML:

<div id="my.id">Special ID</div>

JavaScript:

const element = document.querySelector('#my\.id');
console.log(element);

Beim Umgang mit Sonderzeichen (z. B. ., #, [, ], usw.) escapen Sie diese mit einem Backslash (\).

Performance-Aspekte

1. Vermeiden Sie tief verschachtelte Selektoren Je komplexer die Selektoren werden, desto länger kann der Browser brauchen, um das Ziel-Element zu finden. Verwenden Sie so einfache Selektoren wie möglich.

Nicht empfohlen

const element = document.querySelector('div.container > ul > li.item > span.text');

Empfohlen

const container = document.querySelector('.container');
const textElement = container.querySelector('.text');

2. Effizient mehrere Elemente auswählen Verwenden Sie querySelectorAll, um alle Ziel-Elemente abzurufen und sie dann bei Bedarf zu filtern.

   const items = document.querySelectorAll('.item');
   items.forEach((item) => {
     console.log(item.textContent);
   });
   

Best Practices

1. Verwenden Sie spezifische Selektoren Verwenden Sie spezifische Selektoren, um sicherzustellen, dass Sie nur die vorgesehenen Element(e) auswählen.

   const button = document.querySelector('button.submit');
   

2. Verwenden Sie konsistente Namenskonventionen Entwerfen Sie CSS-Klassennamen und IDs unter Verwendung konsistenter Regeln, um die Lesbarkeit der Selektoren zu verbessern.
3. Konzentrieren Sie sich auf wiederverwendbaren Code Wenn Sie bestimmte Elemente häufig auswählen, ist es praktisch, die Logik in eine wiederverwendbare Funktion zu packen.

   function getElement(selector) {
     const element = document.querySelector(selector);
     if (!element) {
       console.warn(`Element not found: ${selector}`);
     }
     return element;
   }
   
   const header = getElement('#header');
   

Zusammenfassung

In diesem Abschnitt haben wir wichtige Vorsichtsmaßnahmen und effiziente Wege zur Verwendung von querySelector behandelt.

Wichtige Punkte:

1. Verhindern Sie Fehler durch konsequente Null-Überprüfungen
2. Escapen Sie Selektoren, die Sonderzeichen enthalten, korrekt
3. Entwerfen Sie Selektoren einfach mit Performance im Sinn
4. Verwenden Sie Funktionen und Namenskonventionen, um Wiederverwendbarkeit und Lesbarkeit zu verbessern

Im nächsten Abschnitt stellen wir praktische Beispiele vor, die in realen Projekten nützlich sind.

5. Häufig gestellte Fragen (FAQ) und Lösungen

Was ist der Unterschied zwischen querySelector und getElementById?

Frage:
querySelector und getElementById können beide verwendet werden, um Elemente auszuwählen. Was ist der Unterschied zwischen ihnen?

Antwort:

Vergleich der Verwendung:

// With querySelector
const element1 = document.querySelector('#example');

// With getElementById
const element2 = document.getElementById('example');

Welchen sollten Sie verwenden?

• Für einfache ID-basierte Auswahl , ist getElementById schnell und empfohlen.
• Wenn Sie flexible selektor-basierte Zielsetzung benötigen , verwenden Sie querySelector .

Warum funktioniert querySelector manchmal nicht?

Frage:
Obwohl mein Code korrekt aussieht, funktioniert querySelector nicht. Was könnte der Grund sein?

Antwort:

1. Das Element existiert noch nicht im DOM

• Das DOM könnte noch nicht vollständig geladen sein, wenn das Skript ausgeführt wird. Lösung : Verwenden Sie das DOMContentLoaded-Ereignis.

  document.addEventListener('DOMContentLoaded', () => {
    const element = document.querySelector('.example');
    console.log(element);
  });
  

2. Der Selektor ist falsch

• Der Klassename oder die ID könnte falsch sein.

Was zu überprüfen ist:

• Überprüfen Sie den Selektor in den Entwicklertools Ihres Browsers.

  const element = document.querySelector('.my-class');
  console.log(element); // Check the result in DevTools
  

3. Das Element wird dynamisch hinzugefügt

• Wenn das Element dynamisch über JavaScript hinzugefügt wird, existiert es möglicherweise noch nicht, wenn Sie es zum ersten Mal auswählen versuchen.

Lösung:
Fügen Sie einen Event-Listener an ein übergeordnetes Element an, um dynamisch hinzugefügte Elemente zu handhaben.

document.body.addEventListener('click', (e) => {
  if (e.target.matches('.dynamic-element')) {
    console.log('Clicked');
  }
});

Wie man auf dynamisch hinzugefügte Elemente zugreift

Frage:
Können dynamisch hinzugefügte Elemente mit querySelector ausgewählt werden?

Antwort:
Ja, das ist möglich. Allerdings müssen Sie auf den Zeitpunkt achten, zu dem das Element hinzugefügt wird.

Lösung 1: Dynamische Elemente beobachten

const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.addedNodes.length) {
      const newElement = document.querySelector('.dynamic-element');
      if (newElement) {
        console.log('A new element was added:', newElement);
      }
    }
  });
});

observer.observe(document.body, { childList: true, subtree: true });

Lösung 2: setTimeout oder setInterval verwenden

Wenn das Element nach einer bestimmten Verzögerung hinzugefügt wird, können Sie es so überwachen:

setTimeout(() => {
  const dynamicElement = document.querySelector('.dynamic-element');
  console.log(dynamicElement);
}, 1000); // Check for the element after 1 second

Zusammenfassung

In diesem Abschnitt haben wir gängige Fragen und Tipps zur Fehlerbehebung für die Verwendung von querySelector behandelt.

Kurze Zusammenfassung:

1. Verstehen Sie, wann Sie querySelector vs. getElementById verwenden sollen.
2. Wenn es nicht funktioniert, überprüfen Sie DOM-Ladezeitpunkt und Selektorfehler.
3. Für dynamische Elemente verwenden Sie Event-Delegation oder MutationObserver.

Im nächsten Abschnitt fassen wir die Schlüsselpunkte für die effektive Verwendung von querySelector zusammen.

6. Praktische Beispiele: Wie man querySelector in realen Projekten verwendet

Formulareingabewerte abrufen und validieren

Szenario: Wenn ein Benutzer Werte in ein Formular eingibt, rufen Sie diese ab und führen eine Validierung durch.

HTML

<form id="userForm">
  <input type="text" id="username" placeholder="Username">
  <input type="email" id="email" placeholder="Email address">
  <button type="submit">Submit</button>
</form>

JavaScript

const form = document.querySelector('#userForm');

form.addEventListener('submit', (event) => {
  event.preventDefault(); // Prevent form submission

  const username = document.querySelector('#username').value;
  const email = document.querySelector('#email').value;

  if (!username) {
    alert('Please enter a username');
    return;
  }

  if (!email.includes('@')) {
    alert('Please enter a valid email address');
    return;
  }

  alert('The form was submitted successfully');
});

Wichtige Punkte:

• Verwenden Sie die value-Eigenschaft, um Eingabewerte zu erhalten.
• Führen Sie einfache Validierungsprüfungen auf Benutzereingaben durch.
• Verwenden Sie Event-Listener, um das Formularabsendeverhalten anzupassen.

Wie man Event-Listener zu dynamisch hinzugefügten Elementen hinzufügt

Szenario: Wenden Sie Event-Listener auf Elemente an, die dynamisch über JavaScript hinzugefügt werden.

HTML

<div id="container">
  <button id="addButton">Add a button</button>
</div>

JavaScript

const container = document.querySelector('#container');
const addButton = document.querySelector('#addButton');

// Add a new button
addButton.addEventListener('click', () => {
  const newButton = document.createElement('button');
  newButton.classList.add('dynamic-button');
  newButton.textContent = 'Click me!';
  container.appendChild(newButton);
});

// Capture events on the parent element
container.addEventListener('click', (event) => {
  if (event.target.classList.contains('dynamic-button')) {
    alert('The new button was clicked!');
  }
});

Wichtige Punkte:

• Da dynamisch hinzugefügte Elemente nicht direkt referenziert werden können, den Event‑Listener an ein übergeordnetes Element anhängen.
• event.target verwenden, um zu ermitteln, welches Element angeklickt wurde.

Öffnen und Schließen eines Modal‑Fensters

Szenario: Implementierung des Öffnen/Schließen‑Verhaltens eines Modals.

HTML

<div id="modal" class="modal hidden">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <p>This is the modal content.</p>
  </div>
</div>
<button id="openModal">Open modal</button>

CSS

.hidden {
  display: none;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-content {
  background: white;
  padding: 20px;
  border-radius: 5px;
}

JavaScript

const modal = document.querySelector('#modal');
const openModal = document.querySelector('#openModal');
const closeModal = document.querySelector('#closeModal');

// Open the modal
openModal.addEventListener('click', () => {
  modal.classList.remove('hidden');
});

// Close the modal
closeModal.addEventListener('click', () => {
  modal.classList.add('hidden');
});

// Close when clicking outside the modal
modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.classList.add('hidden');
  }
});

Wichtige Punkte:

• classList verwenden, um Klassen hinzuzufügen/zu entfernen und die Sichtbarkeit umzuschalten.
• Die UX verbessern, indem das Modal geschlossen wird, wenn außerhalb des Inhaltsbereichs geklickt wird.

Zusammenfassung

In diesem Abschnitt haben wir praktische Beispiele vorgestellt, wie querySelector in realen Entwicklungsszenarien verwendet wird.

Was du gelernt hast:

1. Sichere Formularverarbeitung implementieren, indem Benutzereingaben abgerufen und validiert werden.
2. Dynamisch hinzugefügte Elemente flexibel mittels Event‑Delegation verarbeiten.
3. Die UI verbessern, indem das Öffnen/Schließen von Modals implementiert wird.

Verwende diese Beispiele als Referenz und wende sie in deinen eigenen Entwicklungsprojekten an. Im nächsten Abschnitt schließen wir den Artikel ab, indem wir die wichtigsten Punkte zur Verwendung von querySelector zusammenfassen.

7. Zusammenfassung: Wichtige Erkenntnisse zur effektiven Nutzung von querySelector

In diesem Artikel haben wir die JavaScript‑Methode querySelector ausführlich behandelt, von den Grundlagen bis zu fortgeschrittenen Anwendungsfällen. Abschließend fassen wir die wichtigsten Punkte zusammen und zeigen, wie man sie effektiv einsetzt.

Die Kernfunktion von querySelector

• Flexible Elementauswahl: Du kannst DOM‑Elemente effizient mit CSS‑Selektoren auswählen.
• Einfache Syntax: Du kannst Elemente intuitiv über Klassennamen, IDs, Tag‑Namen und Attribut‑Selektoren auswählen.
• Funktioniert mit dynamischen Elementen: Durch das Anhängen von Event‑Listenern an übergeordnete Elemente kannst du später hinzugefügte Elemente verarbeiten.

Beispiel für die Grundsyntax:

const element = document.querySelector('.example');

Erweiterte Nutzung und wichtige Überlegungen

1. Erweiterte Selektoren verwenden

• Attribut‑Selektoren und Pseudo‑Klassen ermöglichen es, Elemente präziser und flexibler zu adressieren.
• Beispiel:

  const element = document.querySelector('input[type="checkbox"]:checked');
  

2. Leistungsbewussten Code schreiben

• Reduziere den Verarbeitungsaufwand, indem du nach Möglichkeit einfache Selektoren nutzt.
• Wandle häufig genutzte Auswahl‑Logik in wiederverwendbare Funktionen um.

2. Umfassende Fehlerbehandlung

• Führe null‑Prüfungen durch und behandle Fälle, in denen das Element nicht existiert.
• Beispiel:

  const element = document.querySelector('.nonexistent');
  if (element) {
    console.log('Element found');
  } else {
    console.log('Element not found');
  }
  

Durchsicht der praktischen Beispiele

• Formularvalidierung: Eingabewerte validieren, um eine sichere Formularverarbeitung zu implementieren.
• Dynamische Elementverarbeitung: Elemente, die via JavaScript erzeugt werden, flexibel verarbeiten.
• Steuerung von Modal‑Fenstern: Interaktives Verhalten hinzufügen, um UI/UX zu verbessern.

Durch diese Beispiele haben Sie die Praktikabilität und Erweiterbarkeit von querySelector kennengelernt.

Tipps, um das Beste aus querySelector herauszuholen

1. Nutzen Sie Ihre Entwicklungswerkzeuge

• Verwenden Sie die Entwicklerwerkzeuge Ihres Browsers, um Selektoren zu validieren und zu testen.

1. Priorisieren Sie die Lesbarkeit

• Gestalten Sie Selektornamen und Code‑Struktur so, dass sie leicht verständlich sind, um die Wartbarkeit zu verbessern.

1. Verwenden Sie querySelectorAll bei Bedarf gemeinsam

• Wenn Sie mit mehreren Elementen arbeiten, nutzen Sie querySelectorAll, um eine effiziente Verarbeitung zu implementieren.

Zusammenfassung

querySelector ist eine leistungsstarke Methode, die DOM-Manipulation einfach und effizient macht.

Wesentliche Erkenntnisse aus diesem Artikel:

• Sie können alles von der Grundnutzung bis zu fortgeschrittenen Beispielen strukturiert verstehen.
• Durch die Kombination von Selektoren und Pseudoklassen können Sie Elemente flexibler ansprechen.
• Durch korrektes Fehlerhandling und Berücksichtigung der Performance können Sie praktischeren und zuverlässigeren Code schreiben.

Wenn Sie mit DOM-Manipulation in JavaScript arbeiten, stellen Sie sicher, dass Sie die in diesem Artikel vorgestellten Techniken anwenden.

Als nächsten Schritt vertiefen Sie Ihr Wissen über DOM-Manipulation und verbessern Sie Ihre Fähigkeiten, indem Sie lernen, wie Sie querySelector mit anderen Methoden kombinieren!