Welche Selektoren hat JavaScript?

JavaScript-Selektoren umfassen: getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector() usw.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Welche Selektoren gibt es in JavaScript?

Zu den häufig verwendeten JavaScript-Selektoren gehören getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), querySelectorAll().

1. Die Methode document.querySelector()

querySelector() gibt nur das erste Element zurück, das mit dem angegebenen Selektor übereinstimmt. Wenn Sie alle Elemente zurückgeben müssen, verwenden Sie bitte stattdessen die Methode querySelectorAll()

(1) Holen Sie sich das Element mit id="demo" im Dokument:

document.querySelector("#demo");

(2) Holen Sie sich das Element des ersten p im Dokument

document.querySelector(“p”);

( 3) Holen Sie sich das erste Element mit class="example" im Dokument

document.querySelector(".example");

(4) Holen Sie sich das erste p-Element mit class="example" im Dokument:

document.querySelector(“p.example”);

(5) Holen Sie sich das „target " Attribut im Dokument Das erste a-Element:

document.querySelector(“a[target]”);

(6) Wenn mehrere Selektoren vorhanden sind

document.querySelectorAll(’.ynqc’)

2. document.getElementById()

Diese Methode gibt ein Knotenobjekt zurück, das dem id-Attribut entspricht Eindeutig für das Dokumentobjekt. Diese Methode kann nur über ihre Funktion aufgerufen werden. Die Verwendungsmethode lautet wie folgt: document.getElementById('idName');

3. getElementsByTagName()

Diese Methode gibt ein Objektarray (htmlCollection) zurück Um genau zu sein, ist die Reihenfolge der zurückgegebenen Elemente ihre Reihenfolge im Dokument. Bei der an die Methode getElementsByTagName() übergebenen Zeichenfolge kann die Groß-/Kleinschreibung nicht beachtet werden. Die Verwendungsmethode lautet wie folgt: document.getElementsByTagName(tagName);

4. getElementsByClassName()

Diese Methode wird verwendet, um das Element mit dem angegebenen Klassennamen abzurufen. Diese Methode gibt eine Sammlung aller Elemente mit dem angegebenen Klassennamen im Dokument als NodeList-Objekt zurück. Ein NodeList-Objekt stellt eine geordnete Liste von Knoten dar. Für das NodeList-Objekt können wir über die Knotenindexnummer in der Knotenliste auf die Knoten in der Liste zugreifen (die Indexnummer beginnt bei 0). Daher müssen wir bei der Verwendung manchmal den Index angeben. Die Verwendungsmethode ist wie folgt: document.getElementsByClassName('className');

5. Die Methode document.getElementsByName()

getElementsByName() kann eine Sammlung von Objekten mit dem angegebenen Namen zurückgeben.

Diese Methode ähnelt der Methode getElementById(), fragt jedoch das Namensattribut des Elements anstelle des ID-Attributs ab.

Da außerdem das Namensattribut in einem Dokument möglicherweise nicht eindeutig ist (z. B. Optionsfelder in HTML-Formularen haben normalerweise dasselbe Namensattribut), geben alle getElementsByName()-Methoden ein Array von Elementen anstelle eines einzelnen Elements zurück.

6. Die Methode document.querySelectorAll()

querySelectorAll() gibt alle Elemente im Dokument zurück, die mit dem angegebenen CSS-Selektor übereinstimmen, und gibt ein NodeList-Objekt zurück.

NodeList-Objekt stellt eine Sammlung von Knoten dar. Der Zugriff erfolgt über einen Index, beginnend bei 0.

Tipps: Sie können die Längeneigenschaft des NodeList-Objekts verwenden, um die Elementeigenschaften abzurufen, die dem Selektor entsprechen, und dann alle Elemente durchlaufen, um die gewünschten Informationen zu erhalten.

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene】

Das obige ist der detaillierte Inhalt vonWelche Selektoren hat JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!