Hat Javascript Selektoren?

Javascript hat Selektoren. Zu den häufig verwendeten js-Selektoren gehören: getElementById(), getElementsByName(), getElementsByTagName(), querySelector(), querySelectorAll() usw.

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

Javascript hat Selektoren.

JavaScript wird am häufigsten verwendet, um den Inhalt oder Wert von HTML-Elementen abzurufen oder zu ändern und bestimmte Effekte anzuwenden.

Dazu müssen Sie zunächst das Element finden. Der Javascript-Selektor wird verwendet, um Elemente abzugleichen. Die Suchmethode:

• HTML-Elemente nach ID suchen

• HTML-Elemente nach Tag-Namen suchen

• HTML-Elemente nach Klassennamen suchen

• Auswahl nach CSS-Suche HTML-Elemente durch eine Sammlung von HTML-Objekten

• Häufig verwendete js-Selektoren sind: getElementById(), getElementsByName(), getElementsByTagName(), getElementsByClassName(), querySelector(), querySelectorAll().

HTML-Elemente anhand ihrer ID suchen

Mit der Methode getElementById() können Sie Elemente anhand ihrer eindeutigen ID auswählen. Dies ist der einfachste Weg, HTML-Elemente im DOM-Baum zu finden.

Das folgende Beispiel wählt ein Element mit dem ID-Attribut id="msg" aus:

var x = document.getElementById("msg");

Wenn das Element gefunden wird, gibt die Methode das Element als Objekt zurück.

Wenn das Element nicht gefunden wird, enthält myElement null.

HTML-Elemente nach Tag-Namen suchen

Sie können HTML-Elemente auch nach Tag-Namen mit der Methode getElementsByTagName() auswählen. Diese Methode gibt eine Array-ähnliche Liste aller Elemente im Dokument mit dem angegebenen Tag-Namen zurück.

Beispiel: Alle e388a4556c0f65e1904146cc1a846bee-Elemente auswählen:

var x = document.getElementsByTagName("p");

HTML-Elemente nach Klassennamen suchen

Mit der Methode getElementsByClassName() können Sie alle Elemente mit einem bestimmten Klassennamen auswählen. Diese Methode gibt eine Array-ähnliche Liste aller Elemente im Dokument mit dem angegebenen Klassennamen zurück.

Dieses Beispiel gibt eine Liste aller Elemente mit class="demo" zurück:

var x = document.getElementsByClassName("demo");

HTML-Elemente nach CSS-Selektor suchen

Sie können die Methode querySelectorAll() verwenden, um diejenigen auszuwählen, die mit einem angegebenen CSS-Selektorelement (ID) übereinstimmen , Klasse, Typ usw.). Diese Methode gibt eine Array-ähnliche Liste aller Elemente zurück, die dem angegebenen Selektor entsprechen.

CSS-Selektoren bieten eine sehr leistungsstarke und effiziente Möglichkeit, HTML-Elemente in einem Dokument auszuwählen.

var x = document.querySelectorAll("div");

HTML-Elemente über eine Sammlung von HTML-Objekten finden

Das oberste Element in einem HTML-Dokument kann direkt als Dokumentattribut verwendet werden. Auf das 100db36a723c770d327fc0aef2ce13b1-Element kann beispielsweise über das Attribut document.documentElement zugegriffen werden.

Auf das Element kann mit der Eigenschaft document.body zugegriffen werden.

var html = document.documentElement;
var body = document.body;

HINWEIS: Wenn document.body vor einem Tag verwendet wird (z. B. innerhalb eines 93f0f5c25f18dab9d176bd4f6de5d30e), wird null anstelle des Body-Elements zurückgegeben.

Auf folgende HTML-Objekte (und Objektsammlungen) kann ebenfalls zugegriffen werden:

zurück Dokument .embedsdocument.forms Gibt 93f0f5c25f18dab9d176bd4f6de5d30e-Elemente zurück document.referrerGibt den URI des Referrers (verknüpfte Dokumente) zurück. document.scriptsGibt alle 3f1c4e4b6b16bbbd69b2ee476dc4f83a-Elemente zurück document.titledocument.URL[Verwandte Empfehlungen:

Properties	Description
document.anchors	Gibt alle 3499910bf9dac5ae3c52d5ede7383485-Elemente mit dem Namensattribut zurück
document.applets	Gibt alle 3499910bf9dac5ae3c52d5ede7383485 Applet>-Elemente (in HTML5 Veraltet)
document.baseURI	Gibt den absoluten Basis-URI des Dokuments zurück
document.body	Gibt das element
document.cookie	Gibt das Cookie des Dokuments zurück
document.doctype	Gibt den Dokumenttyp des Dokuments zurück
document.documentElement	Gibt das 100db36a723c770d327fc0aef2ce13b1-Element zurück
document.documentMode	Gibt den vom Browser verwendeten Modus zurück
tun cument.documentURI	Gibt den URI des Dokuments zurück
Gibt alle d8e2720730be5ddc9c2a3782839e8eb6-Elemente zurück
Gibt alle ff9c23ada1bcecdd1a0fb5d5a0f18437-Elemente zurück	document.head
document.images	Gibt alle 3deaeabe086db49b4c05967b331f4fd1- und 3499910bf9dac5ae3c52d5ede7383485-Elemente mit href-Attributen zurück
Gibt zurück, ob eine Fehlerprüfung erzwungen wird
Gibt zurück
Gibt die vollständige URL des Dokuments zurück
Javascript-Lerntutorial	]

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