Ich nehme an, die Antwort auf diese Frage hängt davon ab, welchen Browser Sie verwenden, aber ich denke, das macht es umso interessanter.
Ich frage mich, wie die Methode querySelector() tatsächlich implementiert wird . Ebenso bin ich neugierig auf querySelectorAll() und andere Methoden wie getElementById() und getElementByClassName() usw.
Ist es eine Tiefensuche, eine breite erste Suche oder nutzt es eine Hilfsdatenstruktur, wie eine globale Hashtabelle, die als Registrierung dient?
querySelector : Gibt das erste Element innerhalb des Dokuments zurück (mit Tiefe - erster Durchlauf der Vorbestellung der Dokumentknoten | nach dem ersten Element im Dokument Markup und Iteration durch sequenzielles Knoten in der Reihenfolge der Anzahl der untergeordneten Knoten), die der angegebenen Gruppe von Selektoren entspricht.
querySelectorAll : Gibt eine Liste der Elemente im Dokument zurück (mit Tiefe - erste Traversierung vor der Bestellung der Knoten des Dokuments), die der angegebenen Gruppe von Selektoren entspricht. Das zurückgegebene Objekt ist eine NodeList.
getElementById : Gibt einen Verweis auf das Element anhand seiner ID zurück; Die ID ist eine Zeichenkette, mit der das Element identifiziert werden kann. Es kann mithilfe des ID-Attributs in HTML oder aus einem Skript erstellt werden.
als eine ID sollte eindeutig sein - es gibt keine Frage der Reihenfolge
getElementsByClassName : Gibt ein Array-ähnliches Objekt aller untergeordneten Elemente zurück, die alle angegebenen Klassennamen haben. Wenn das Dokumentobjekt aufgerufen wird, wird das gesamte Dokument einschließlich des Stammknotens durchsucht. Sie können getElementsByClassName () auch für ein beliebiges Element aufrufen. Es gibt nur Elemente zurück, die Nachkommen des angegebenen Wurzelelements mit den angegebenen Klassennamen sind.
Nun, bevor jemand dies oben oder unten markiert oder irgendetwas anderes, sind die obigen die FIRST LINES auf den Seiten, auf die das OP verweist
querySelectorAll ist hier gut dokumentiert:
Gibt eine Liste der Elemente innerhalb des Dokuments zurück (mit der Traversierung der Knoten des Dokuments in der Reihenfolge der ersten Vorbestellung), die der angegebenen Gruppe von Selektoren entspricht. Das zurückgegebene Objekt ist eine NodeList.
Auf der anderen Seite die Dokumentation für getElementsByClassName
hat nicht die gleiche Sicherheit.
Tatsächlich habe ich in einigen älteren Browsern Probleme damit bekommen - Dinge, die auf verschiedenen Browsern unterminiert wurden. Obwohl dies auf IE6 zurückgeht und unter dem HTML5 Doctype stabilisiert werden kann.
Wenn Sie die Dokumentenreihenfolge 100% sicherstellen MÜSSEN, gibt es immer den alten walkTheDom Code.
Sobald das HTML-Dokument abgerufen wurde, wird es an den HTML-Parser übergeben, der das Dokument durchläuft und eine Inhaltsbaumstruktur erstellt.
Dieser Inhaltsbaum ist tatsächlich eine globale Hash-Tabelle, die von vielen nativen Funktionen verwendet wird.
Diese Information gilt für Firefox
Tags und Links javascript algorithm dom tree browser