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

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!