Js-Prozess zum Betreiben von DOM-Objekten

Lassen Sie mich den Prozess der Bedienung von DOM-Objekten zusammenfassen. Ich habe mir die Geschwindigkeit verschiedener Methoden zur Auswahl von Elementen angesehen. Die native Methode ist fast achtmal schneller als der jQUERY-Block am langsamsten. IE9 ist dreimal schneller als IE8.

Methode zum Auswählen von Dokumentelementen:

1) Verwendungsmethode: document. getElementById("domId")
Wobei domId der ID-Attributwert des auszuwählenden Elements ist
2) Kompatibilität:
IE-Browser , die niedriger als die IE8-Version sind, unterscheiden das nicht Implementierung der getElementById-Methode. Bei der Element-ID-Nummer wird die Groß-/Kleinschreibung beachtet und Elemente, die mit dem Namensattribut übereinstimmen, werden zurückgegeben.
2. Elemente nach Namen auswählen (getElementsByName)
1) Verwendungsmethode: document.getElementsByName("domName")
Wobei domName der Namensattributwert des auszuwählenden 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 einigen DOM-Elementen gültig (Formularform, Formularelement, Iframe, img ). Dies liegt daran, dass das Namensattribut erstellt wurde, um das Senden von Formulardaten zu erleichtern.                                                                                                                                                                                       ,,, Daher kann auf das entsprechende Dom-Objekt über document.domName
verwiesen werden. 3) Kompatibilität: Elemente mit übereinstimmenden ID-Attributwerten im IE werden auch zusammen zurückgegeben

3. Wählen Sie Elemente nach Tag-Namen aus (
getElementsByTagName
) 1) Verwendung: element.getElementsByTagName("tagName") Unter diesen ist element ein gültiges DOM-Element (einschließlich Dokument)
tagName ist der Tag-Name des DOM-Element
2) Beschreibung: a. Der Rückgabewert ist eine nodeList-Sammlung (anders als Array)
b. Diese Methode kann nur Nachkommenelemente des Elements auswählen, das diese Methode aufruft.
C. Tagname unterscheidet nicht zwischen Klein- und Kleinschreibung
D. Wenn Tagname * ist, bedeutet dies, dass alle Elemente ausgewählt sind (folgen Sie b. Regeln)
E. HTMLDOCUMENT definiert einige schnelle Attribute für den Zugriff auf Label-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 in der Head-Deklaration kein Tag angezeigt wird, erstellt der Browser auch das Attribut document.head)

4. Elemente über CSS-Klassen auswählen (getElementsByClassName)
1) Verwendungsmethode: element.getElementsByClassName( "classNames")
Unter diesen ist element ein gültiges DOM-Element (einschließlich Dokument)
          classNames ist eine Kombination aus CSS-Klassennamen (mehrere Klassennamen werden durch Leerzeichen getrennt und können durch mehrere Leerzeichen getrennt werden),      " ) wählt Elemente aus, deren Nachkommen von Elementen sowohl Klasse1- als auch Klasse2-Stile haben (die Stilnamen sind in keiner bestimmten Reihenfolge)
2) Beschreibung: a Der Rückgabewert ist eine nodeList-Sammlung (anders als Array)
b . Diese Methode kann nur Nachkommenelemente des Elements auswählen, das diese Methode aufruft.
3) Kompatibilität: IE8 und niedrigere Browser implementieren nicht die getElementsByClass
Name-Methode

5. Wählen Sie Elemente über den
CSS-Selektor
aus. 1) Wie verwenden: document.querySelectorAll("selector")                                                                                                                                                                            Kompatibilität: IE8 und niedrigere Browser unterstützen nur die CSS2-Standardselektorsyntax



Ich glaube, dass Sie die Methode beherrschen, nachdem Sie diese Fälle gelesen haben. Bitte achten Sie auf weitere spannende Artikel auf der chinesischen PHP-Website.

Verwandte Lektüre:

So verwenden Sie CSS, um den Textinhalt des Bildhintergrunds auszublenden

So verwenden Sie Vue+CSS3, um interaktive Effekte zu erstellen

So machen Sie DIV höhenadaptiv

Das obige ist der detaillierte Inhalt vonJs-Prozess zum Betreiben von DOM-Objekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!