Aus dem maßgeblichen JavaScript -Handbuch ausgezogen (der ultimative Weg der JQuery, Elemente basierend auf Style Selector zu finden, besteht darin, zuerst GetElementsByTagName (*) zu verwenden, um alle DOM -Elemente zu erhalten, und dann alle DOM -Elemente gemäß Style Selector filtern)
Heute habe ich die Geschwindigkeit verschiedener Elemente -Auswahlmethoden ausprobiert. Die native Methode ist ungefähr 8 -mal schneller als JQuery. IE8 ist der langsamste, IE9 ist ungefähr dreimal schneller als IE8, Chrome führt das Beste aus, gefolgt von Firefox)
Methoden zur Auswahl von Dokumentelementen:
1. Wählen Sie Element nach ID (GetElementById) aus
1) Verwendungsmethode: document.getElementById ("Domid")
wobei Domid der ID -Attributwert des zu ausgewählten Elements ist
2) Kompatibilität: IE -Browser mit niedrigeren als IE8 -Versionen unterscheiden den Fall der Element -ID -Nummer nicht und gibt Elemente zurück, die dem Namensattribut entsprechen.
2. Wählen Sie Elemente nach Namen (GetElementsByName)
1) Verwendungsmethode: document.getElementsByName ("Domname")
Wobei DomName der Namensattributwert des zu ausgewählten Elements ist
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 (Formularform, Formularelement, Iframe, IMG) gültig. Dies liegt daran, dass das Namensattribut erstellt wird, um die Einreichung von Formulardaten zu erleichtern.
C. Beim Einstellen von Namensattributen für Formular werden IMG, Iframe, Applet, Einbetten, Objektelemente und nach dem Namensattributwert benannte Attribute automatisch im Dokumentobjekt erstellt. Daher kann das entsprechende DOM -Objekt über Dokument verwiesen werden.
3) Kompatibilität: Elemente, die ID -Attributwerte im IE übereinstimmen
3. Wählen Sie Elemente nach Tag -Name aus (GetElementsByTagName)
1) Verwendungsmethode: Element.GetElementsByTagName ("Tagname")
Wo, Element ist ein gültiges DOM -Element (einschließlich Dokument)
TagName ist der Tag -Name des DOM -Elements
2) Beschreibung: a. Der Rückgabewert ist eine Nodelist -Sammlung (anders als Array)
B. Diese Methode kann nur Nachkommenselemente des Elements auswählen, das die Methode aufruft.
C. Tagname ist unempfindlich
D. Wenn TagName * *ist, bedeutet dies, dass alle Elemente ausgewählt werden (verantwortlich für B. Regel)
e. Htmldocument definiert einige Abkürzungseigenschaften, um auf den Tag -Knoten zuzugreifen. Zum Beispiel: Die Attribute des Dokuments von Bildern, Formularen und Links zeigen auf die Sammlung <Meeng>, <form> und <a> Tagelemente, während Dokument und Dokument.head immer auf die Körper- und Kopf -Tags verweisen (wenn das deklarierte Kopf -Tag nicht angezeigt wird, erstellt der Browser auch das Dokument.head -Attribut)
V.
1) Verwendungsmethode: Element.GetElementsByClassName ("ClassNames")
Wo, Element ist ein gültiges DOM -Element (einschließlich Dokument)
ClassNames ist eine Kombination aus CSS -Klassennamen (mehrere Klassennamen werden durch Leerzeichen getrennt, die durch mehrere Räume getrennt werden können).
Zum Beispiel wird Element.GetElementsByClassName ("Class2 Class1") Elemente in den Nachkommenselementen von Elementen auswählen, die sowohl Class1- als auch Class2 -Stile angewendet haben (die Stilnamen unterscheiden nicht zwischen Reihenfolge)
2) Beschreibung: a. Der Rückgabewert ist eine Nodelist -Sammlung (anders als Array)
B. Diese Methode kann nur Nachkommenselemente des Elements auswählen, das die Methode aufruft.
3) Kompatibilität: IE8 und unterhalb der Browser implementieren die GetElements -By -ClassName -Methode nicht
5. Wählen Sie Elemente über den CSS -Selektor aus
1) Verwendungsmethode: Document.querySelectorAll ("Selector")
Wo der Selektor ein legaler CSS -Selektor ist
2) Beschreibung: a. Der Rückgabewert ist eine Nodelist -Sammlung (anders als Array)
3) Kompatibilität: IE8 und unterhalb der Browser unterstützen nur die CSS2 -Standard -Selektorsyntax
Die einfache Methode zur Auswahl von DOM -Elementen in JS ist der gesamte Inhalt, den ich mit Ihnen teile. Ich hoffe, Sie können Ihnen eine Referenz geben und ich hoffe, Sie können wulin.com mehr unterstützen.