Einführung in die Methode querySelector() in JavaScript zum Abrufen von HTML-Elementen

QuerySelector() ist eine Methode, die jedes HTML-Element aus JavaScript erkennen und abrufen kann. Obwohl JavaScript von Anfang an Methoden wie getElemenById() und getElemetnsByClasNamo() hatte, um HTML-Elemente abzurufen, wenn Sie querySelector() verwenden, Dann Sie können HTML-Elemente im jQuery-Sinn selektiv angeben, ohne den ID-Attributwert, den Klassenattributwert usw. zu kennen.

Kurz gesagt, Sie können querySelector() verwenden, um jedes HTML-Element abzurufen.

Sehen wir uns zunächst die grundlegende Syntax von querySelector() an.

QuerySelector() wird normalerweise im Zielbereich ausgeführt.

document.querySelector( CSS选择器 )

In diesem Fall wird querySelector() für das gesamte Dokument ausgeführt. Beliebige HTML-Elemente können durch die Angabe von jQuery-ähnlichen CSS-Selektoren für Parameter erhalten werden.

Es ist zu beachten, dass das Programm beendet wird, wenn es das erste passende HTML-Element erhält.

Mit anderen Worten, wenn Sie mehrere Elemente erhalten möchten, müssen Sie einen Schleifenprozess erstellen oder die querySelectorAll().

verwenden, über die wir sprechen werden Sehen wir uns später weiter anWie verwende ich querySelector()?

HTML-Element mit ID- und Klassenattributen abrufen

Das Beispiel sieht wie folgt aus

HTML

<h1 class="sample">标题示例</h1>
<p id="test">内容示例</p>

JavaScript

var elem1 = document.querySelector('.sample');
var elem2 = document.querySelector('#test');
console.log(elem1);
console.log(elem2);

Die laufenden Ergebnisse sind wie folgt

Sie können sehen, dass jeder Parameter von querySelector() einen CSS-Selektor angibt.

Somit kann derselbe querySelector() auch jedes HTML-Element gemäß der Parameterspezifikationsmethode abrufen.

Aus dem Ausführungsergebnis ist ersichtlich, dass das Element erhalten wurde.

Sehen wir uns an, wie man mit querySelectorAll()

querySelectorAll() mehrere HTML-Elemente abrufen kann.

Werfen wir zunächst einen Blick auf die grundlegende Syntax

document.querySelectorAll(CSS选择器)

Auf diese Weise sind die Methode und der Zielbereich der angegebenen Parameter dieselben wie bei querySelector().

Der größte Unterschied besteht darin, dass Sie alle passenden HTML-Elemente erhalten!

Da queryselector() nur das erste passende Element abrufen kann, können wir querySelectorAll() verwenden, um mehrere Elemente abzurufen.

Sehen wir uns ein konkretes Beispiel an

HTML-Code

<ul>
  <li class="list">列表１</li>
  <li class="list">列表２</li>
  <li class="list">列表３</li>
</ul>

In diesem Beispiel sind mehrere Listenelemente angeordnet.

Um alle Elemente dieser Liste abzurufen, können Sie Folgendes tun:

JavaScript

var elem = document.querySelectorAll('.list');
console.log(elem);

In diesem Beispiel wird der Klassenattributwert „list“ als Parameter von angegeben querySelectorAll() .

Dadurch werden alle Listenelemente angegeben, sodass alle Listenelemente abgerufen werden können.

Natürlich können Sie das „li“-Element unverändert festlegen, aber achten Sie darauf, es mit anderen Listenelementen auszugleichen.

Die von querySelectorAll() erhaltenen Elemente heißen NodeList und speichern eine Datenstruktur ähnlich einem Array.

Im Folgenden verwenden wir „forEach“, um jeweils ein Element zu verarbeiten, wodurch das Array effektiv wiederholt verarbeitet wird.

var elem = document.querySelectorAll('.list');
elem.forEach(function(value) {
    console.log(value);
})

Die laufenden Ergebnisse lauten wie folgt

In diesem Beispiel werden die mit querySelectorAll() erhaltenen Ergebnisse von der forEach-Anweisung in einer Schleife ausgeführt.

Durch Angabe des Parameters „Wert“ kann jedes HTML-Element wie die obigen Ergebnisse erhalten werden.

Hinweis: Sie können eine beliebige Verarbeitung von HTML-Elementen durchführen, die Sie mit querySelectorAll() erhalten haben!

Das obige ist der detaillierte Inhalt vonEinführung in die Methode querySelector() in JavaScript zum Abrufen von HTML-Elementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!