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 suchenSie 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
-Elemente auswählen:
var x = document.getElementsByTagName("p");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");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");Das oberste Element in einem HTML-Dokument kann direkt als Dokumentattribut verwendet werden. Auf das -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
), wird null anstelle des Body-Elements zurückgegeben. Auf folgende HTML-Objekte (und Objektsammlungen) kann ebenfalls zugegriffen werden:| Properties | Description |
|---|---|
| document.anchors | Gibt alle -Elemente mit dem Namensattribut zurück |
| document.applets | Gibt alle Applet>-Elemente (in HTML5 Veraltet) |
| document.baseURI | Gibt den absoluten Basis-URI des Dokuments zurück |
| document.body | Gibt das element |
| document.cookie | zurückGibt das Cookie des Dokuments zurück |
| document.doctype | Gibt den Dokumenttyp des Dokuments zurück |
| document.documentElement | Gibt das -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 | |
| Gibt alle | document.head |
| document.images | Gibt alle |
| document.implementation | Gibt die DOM-Implementierung zurück |
| document.inputEncoding | Gibt die Kodierung (Zeichensatz) des Dokuments zurück ument.lastModified |
| document.referrer | |
| document.scripts | |
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
