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

Probleme und Lösungen bei Fehler 08001 bei der Verknüpfung mit MySQL in IDEA und keiner Tabellenanzeige nach erfolgreicher Verbindung

Artikel

Diagramm des Hyperledger Fabric 1.4-Umgebungskonstruktionsprozesses unter Windows 10

Vergleichen von Dokumentspeicherorten

Probleme und Lösungen bei Fehler 08001 bei der Verknüpfung mit MySQL in IDEA und keiner Tabellenanzeige nach erfolgreicher Verbindung

Diagramm des Hyperledger Fabric 1.4-Umgebungskonstruktionsprozesses unter Windows 10

Eine kurze Diskussion zu DDL und DML in MySQL

Nginx verwendet den Gzip-Algorithmus zum Komprimieren von Nachrichten

Eine "klassische" Falle der MySQL UPDATE-Anweisung

Einführung in die Farbabstimmung von Königsblau für Webdesign

VirtualBox installiert die virtuelle Maschine CentOS7 und Erweiterungstools (Bild und Text)

Der Kernprozess der NodeJS-Verarbeitung einer TCP-Verbindung

Design-Story: Der Wachmann, der sich Nummernschilder nicht merken kann

Vollständige Anleitung zur Verwendung von Iframes ohne Rahmen oder Ränder (Zusammenfassung der praktischen Erfahrungen)

Artikel empfehlen

CentOS 7-Methode zum Ändern des Gateways und Konfigurieren des IP-Beispiels

Tomcat8 verwendet Cronolog zum Aufteilen von Catalina.Out-Protokollen

So aktivieren Sie Fernzugriffsberechtigungen in MySQL

So halten Sie eine lange Verbindung aufrecht, wenn Sie den Nginx-Reverse-Proxy verwenden

Konventionelle JS-Verarbeitungsfunktionen für die Entwicklung von Vue Element-Frontend-Anwendungen

Implementierung der Installation von Docker in einer Win10-Umgebung

So implementieren Sie einen variablen Ausdrucksselektor in Vue

Drei Beispiele für Unschärfe-Hintergrundeffekte mit CSS3

Detaillierte Erklärung des Explain-Typs in MySQL

Detaillierte Erklärung des JSON-Dateischreibformats

Detaillierte Erläuterung der MySql-Datentyp-Tutorialbeispiele

Detailanalyse der MySQL-Berechtigungskontrolle

Über die VMware vCenter-Sicherheitslücke beim unbefugten Hochladen beliebiger Dateien (CVE-2021-21972)

Schritte zum Kapseln von Element-UI-Popupkomponenten

100 Möglichkeiten, die Farbe eines Bildes mit CSS zu ändern (sammelnswert)