Heim > Web-Frontend > js-Tutorial > Hauptteil

Eine einfache Möglichkeit, DOM-Elemente mithilfe von JS auszuwählen

韦小宝
Freigeben: 2017-11-28 14:35:36
Original
1340 Leute haben es durchsucht

JS ist eine einfache Methode zur Auswahl von DOM-Elementen. Dieser Artikel fasst die verschiedenen Methoden von js zur Auswahl von DOM zusammen, die zum Erlernen von js verwendet werden können Wissen~ ~

Methoden zur Auswahl von Dokumentelementen:

1. Elemente nach ID auswählen (getElementById)

1 ) Verwendung: document.getElementById("domId")
Wobei domId der ID-Attributwert des auszuwählenden Elements ist

2) Kompatibilität: niedriger als IE8-Version Die Implementierung der getElementById-Methode des IE-Browsers berücksichtigt nicht die Groß-/Kleinschreibung der Element-ID-Nummer und gibt Elemente zurück, die mit dem Namensattribut übereinstimmen.

2. Elemente nach Namen auswählen (getElementsByName)

1) Verwendung: document.getElementsByName("domName")
Unter diesen ist domName der Namensattributwert des auszuwählenden Elements

2) Beschreibung: a. Der Rückgabewert ist eine nodeList-Sammlung (anders als Array)

b . Im Gegensatz zum ID-Attribut ist das Namensattribut nur in wenigen DOM-Elementen gültig (Formularform, Formularelement, iframe, img). Dies liegt daran, dass das Namensattribut erstellt wurde, um das Senden von Formulardaten zu erleichtern.

c. Beim Festlegen des Namensattributs für Formular-, IMG-, Iframe-, Applet-, Einbettungs- und Objektelemente wird automatisch ein Attribut mit dem Namensattributwert im Dokumentobjekt erstellt. Daher kann über document.domName auf das entsprechende dom-Objekt verwiesen werden

3) Kompatibilität: Elemente mit übereinstimmenden ID-Attributwerten im IE werden auch zusammen zurückgegeben

3. Elemente nach Tag-Namen auswählen (getElementsByTagName)

1) Verwendungsmethode: element.getElementsByTagName(" tagName")
Unter diesen ist element ein gültiges DOM-Element (einschließlich Dokument)

tagName ist der Tag-Name des DOM-Elements

2) Beschreibung: a. Das Rückgabewert ist eine NodeList-Sammlung (Unterschied im Array)
b Diese Methode kann nur Nachkommenelemente des Elements auswählen, das diese Methode aufruft.
c. Bei tagName wird die Groß-/Kleinschreibung nicht beachtet.
d. Wenn tagName * ist, bedeutet dies, dass alle Elemente ausgewählt werden (vorbehaltlich Regel b).
e. HTMLDocument definiert einige Verknüpfungsattribute für den Zugriff auf Tag-Knoten. Beispiel: Die Attribute „Bilder“, „Formulare“ und „Links“ des Dokuments verweisen auf die Sammlung der Tag-Elemente ,

, , während document.body und document.head immer auf den Körper und den Kopf verweisen Tags (wenn die Head-Deklaration nicht angezeigt wird, erstellt der Browser auch das Attribut document.head)

4. Wählen Sie Elemente über CSS-Klassen aus (getElementsByClassName)

1) Verwendung: element.getElementsByClassName("classNames")
Dabei ist element ein gültiges DOM-Element (einschließlich Dokument)
classNames ist eine Kombination aus CSS-Klassennamen (Zwischen mehreren Klassennamen werden Leerzeichen verwendet, die durch mehrere Leerzeichen getrennt werden können.)
Zum Beispiel wählt element.getElementsByClassName("class2 class1") Elemente aus, auf deren Nachkommen von Elementen sowohl Klasse1- als auch Klasse2-Stile angewendet werden (der Stil Namen sind nicht in der richtigen Reihenfolge)

2) Beschreibung: a. Der Rückgabewert ist eine nodeList-Sammlung (anders als Array)

b. Diese Methode kann nur Nachkommen auswählen Elemente des Elements, das diese Methode aufruft.

3) Kompatibilität: IE8 und niedrigere Browser implementieren getElementsByClass nichtName-Methode

5. Übergeben Sie CSS-SelektorElemente auswählen

1) Verwendungsmethode: document.querySelectorAll("selector")
Unter diesen ist Selector ein legaler CSS-Selektor

2) Beschreibung: a. Der Rückgabewert ist eine NodeList-Sammlung (anders als Array)

3) Kompatibilität: IE8 und niedrigere Browser unterstützen nur die CSS2-Standard-Selektorsyntax

Die oben genannten sind die verschiedenen Methoden für JS zum Betrieb von dom. Weitere Informationen finden Sie auf der PHP Chinese-Website~

Verwandte Empfehlungen:

Ausführliche Erklärung des Tutorials zum JS-Operations-Array

Detaillierte Erklärung der JS-Operations-DOM-Objektinstanz

A Kurze Analyse einiger gängiger Methoden des JS-Betriebs von DOM

Das obige ist der detaillierte Inhalt vonEine einfache Möglichkeit, DOM-Elemente mithilfe von JS auszuwählen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage