Vergleichen von Dokumentspeicherorten

Vergleichen von Dokumentspeicherorten
<br />Ein toller Blogbeitrag von PPK vor zwei Jahren, der erklärt, wie die Methoden contains() und compareDocumentPosition() in ihren jeweiligen Browsern funktionieren. Seitdem habe ich viel über diese Methoden geforscht und sie bei vielen Gelegenheiten eingesetzt. Sie können sich für viele Aufgaben als sehr nützlich erweisen (insbesondere beim Abstrahieren von DOM-Selektoren mit Strukturen).
1. DOMElement.enthält(DOMNode)
Diese Methode wurde ursprünglich im Internet Explorer verwendet, um zu bestimmen, ob ein DOM-Knoten in einem anderen DOM-Element enthalten ist.
Diese Methode ist nützlich, wenn Sie versuchen, die CSS-Selektor-Traversierung zu optimieren (wie: „#id1 #id2“). Sie können das Element über getElementById abrufen und dann mit .contains() ermitteln, ob #id1 tatsächlich #id2 enthält.
Hinweis: Wenn der DOM-Knoten und das DOM-Element konsistent sind, gibt .contains() „true“ zurück, obwohl ein Element sich nicht selbst enthalten kann.
Es gibt einen einfachen ausführbaren Wrapper, der in Internet Explorer, Firefox, Opera und Safari ausgeführt wird.
Funktion enthält(a, b) {
gibt a.contains zurück? a != b und a.contains(b) : !!(a.compareDocumentPosition(arg) & 16);
}
2. NodeA.compareDocumentPosition(NodeB)
Diese Methode ist Teil der DOM Level 3-Spezifikation und ermöglicht Ihnen, die relative Position zweier DOM-Knoten zu bestimmen. Diese Methode ist leistungsfähiger als .contains(). Eine mögliche Anwendung dieser Methode besteht darin, DOM-Knoten in eine bestimmte und präzise Reihenfolge zu sortieren.
Mit dieser Methode können Sie eine Sequenz von Informationen über die Position eines Elements ermitteln. Alle diese Informationen werden als Bitcode (Bit, auch Binärbit genannt) zurückgegeben.
Darüber ist wenig bekannt. Bitcode ist die Speicherung mehrerer Daten als eine einzige Zahl (Anmerkung des Übersetzers: 0 oder 1). Sie schalten letztendlich einzelne Zahlen ein/aus, wodurch Sie ein Endergebnis erhalten.
Hier ist das von NodeA.compareDocumentPosition(NodeB) zurückgegebene Ergebnis mit den Informationen, die Sie abrufen können.
Bits Nummer Bedeutung
000000 0 Elemente sind konsistent
000001 1 Knoten sind in unterschiedlichen Dokumenten (oder einer liegt außerhalb des Dokuments)
000010 2 Knoten B ist vor Knoten A
000100 4 Knoten A ist vor Knoten B
001000 8 Knoten B enthält Knoten A
010000 16 Knoten A enthält Knoten B
100000 32 Private Nutzung von Browsern Das bedeutet, dass ein mögliches Ergebnis etwa so aussehen könnte:
<div id="ein">
<div id="b"></div>
</div>
<Skript>
Alarm (document.getElementById("a").compareDocumentPosition(document.getElementById("b")) == 20);
</Skript>
Sobald ein Knoten A einen anderen Knoten B enthält, B (16) enthält und vor B (4) kommt, ist das Endergebnis die Zahl 20. Wenn Sie sich ansehen, was mit den Bits passiert, wird Ihr Verständnis verbessert.
000100 (4) 010000 (16) = 010100 (20)
Dies trägt zweifellos dazu bei, die verwirrendste aller DOM-API-Methoden zu verstehen. Natürlich ist sein Wert wohlverdient.
DOMNode.compareDocumentPosition ist jetzt in Firefox und Opera verfügbar. Es gibt jedoch einige Tricks, mit denen wir es im Internet Explorer ausführen können.
// Position vergleichen - MIT-Lizenz, John Resig
Funktion Vergleichsposition (a, b) {
a.compareDocumentPosition zurückgeben?
a.compareDocumentPosition(b) :
a.enthält?
( a != b und a.enthält(b) und 16 )
( a != b und b.enthält(a) und 8 )
( a.sourceIndex >= 0 und b.sourceIndex >= 0 ?
(a.Quellindex < b.Quellindex && 4 )
(a.Quellindex > b.Quellindex && 2 ) :
1 ) :
0;
}
Der IE stellt uns einige Methoden und Eigenschaften zur Verfügung, die wir nutzen können. Zuerst verwenden wir die Methode .contains() (wie wir bereits zuvor besprochen haben), um das Ergebnis zu erhalten, das entweder enthält ( 16 ) oder enthalten ist ( 8 ). IE verfügt außerdem über eine .sourceIndex-Eigenschaft für alle DOM-Elemente, die der Position des Elements im Dokument entspricht, zum Beispiel: document.documentElement.sourceIndex == 0. Da wir über diese Informationen verfügen, können wir zwei compareDocumentPosition-Puzzles lösen: vorne (2) und hinten (4). Wenn ein Element nicht im aktuellen Dokument vorhanden ist, ist .sourceIndex außerdem gleich -1, was uns unsere andere Antwort (1) gibt. Schließlich können wir durch Extrapolation dieses Prozesses feststellen, dass ein Null-Bitcode (0) zurückgegeben wird, wenn ein Element gleich sich selbst ist.
Diese Funktion funktioniert in Internet Explorer, Firefox und Opera. Die Funktionalität in Safari ist jedoch defekt (da es nur eine contains()-Methode hat, aber keine .sourceIndex-Eigenschaft. Wir können nur contains (16), is contain by (8) abrufen und alle anderen Ergebnisse geben (1) zurück, was auf einen Bruch hinweist).
PPK ist ein hervorragendes Beispiel für die Bereitstellung neuer Funktionen durch die Erstellung einer Methode getElementsByTagNames. Passen wir es an unsere neue Methode an:

Wir können dies nun verwenden, um das Verzeichnis einer Site in der folgenden Reihenfolge zu erstellen:
getElementsByTagNames("h1, h2, h3");
Firefox und Opera haben jedoch einige Initiativen ergriffen, um diesen Ansatz umzusetzen. Ich freue mich immer noch darauf, mehr Browser zu sehen, die dazu beitragen, die Dinge voranzubringen.
Vergleichen der Dokumentposition
// Original von PPK quirksmode.org
Funktion getElementsByTagNames(Liste, Element) {
elem = elem || Dokument;
var tagNames = list.split(','), Ergebnisse = [];
für (var i = 0; i < tagNames.Länge; i) {
var tags = elem.getElementsByTagName( tagNames[i] );
für (var j = 0; j < tags.Länge; j)
Ergebnisse.push(tags[j]);
}
Ergebnisse zurückgeben.sortieren(Funktion(a, b){
return 3 - (Vergleichsposition(a, b) & 6);
});
}

<<:  Docker konfiguriert den Speicherort lokaler Images und Container

>>:  Code zur Änderung des CSS-Bildlaufleistenstils

Artikel empfehlen

Zwei Beispiele für die Verwendung von Symbolen in Vue3

Inhaltsverzeichnis 1. Verwenden Sie SVG 2. Verwen...

Implementierung der Breakpoint-Wiederaufnahme in Node.js

Vorwort Normaler Geschäftsbedarf: Hochladen von B...

Interpretation der Vue-Komponentenregistrierungsmethode

Inhaltsverzeichnis Überblick 1. Globale Registrie...

So erstellen Sie einen Git-Dienst basierend auf dem HTTP-Protokoll auf VMware+CentOS 8

Inhaltsverzeichnis 1. Ursache 2. Geräteinformatio...

Analyse des Prozesses zum Bereitstellen von Python-Anwendungen in Docker-Containern

Einfache Anwendungsbereitstellung 1. Verzeichniss...

Vergleichende Analyse von UI-Anwendungen auf Bild-Social-Networking-Sites (Abbildung)

In unserem Leben, bei der Arbeit und beim Studium ...

So lösen Sie das Problem, dass MySQL nicht geschlossen werden kann

Lösung, wenn MySQL nicht geschlossen wird: Klicke...

So beheben Sie den PyCurl-Fehler unter Linux

Lösung für „Curl-config konnte nicht ausgeführt w...

So konfigurieren Sie die Datei My.ini bei der Installation der MySQL5.6.17-Datenbank

Ich habe kürzlich bei der Entwicklung eines Proje...

Protokollieren Sie ein langsames Abfrageereignis, das durch eine Fehleinschätzung des Online-MySQL-Optimierers verursacht wurde.

Vorwort: Ich habe Warnungen zu wahnsinnig langsam...

So verwenden Sie natives JS zum Implementieren von Touch-Sliding-Überwachungsereignissen

Vorwort Ich habe heute eine kleine Demo geschrieb...

10 Tipps zur Website-Benutzerfreundlichkeit, die jeder kennen sollte

Lassen Sie uns keine weitere Zeit verschwenden un...

Detailliertes Installationstutorial für mysql-8.0.11-winx64.zip

Laden Sie das ZIP-Installationspaket herunter: Do...

Detaillierte Erklärung des Linux Namespace-Benutzers

Der Benutzer-Namespace ist ein neuer Namespace, d...

Analyse und Zusammenfassung der Auswirkungen von MySQL-Transaktionen auf die Effizienz

1. Datenbanktransaktionen verringern die Datenban...