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
Lösung für den Netzwerkfehler beim Installieren der Workstation in einer virtuellen Maschine in ESXI
Problembeschreibung Nach der Installation von Wor...
Lösen Sie das Problem, dass await in forEach nicht funktioniert
1. Einleitung Vor ein paar Tagen bin ich bei der ...
Webpack erstellt ein Gerüst zum Verpacken von TypeScript-Code
Erstellen eines Ordners Verzeichnisstruktur: daba...
Lösung für das Problem, dass der MySQL-Dienst gestartet wird, aber keine Verbindung hergestellt wird
Der MySQL-Dienst wird gestartet, aber es kann kei...
Erläuterung der Linux-Kernel-Optimierungskonfiguration für hochparallele Nginx-Server
Da die Standardparameter des Linux-Kernels auf de...
Vue realisiert den Card-Flip-Effekt
In diesem Artikelbeispiel wird der spezifische Co...
MySQL-Code zur Implementierung der Sequenzfunktion
MySQL implementiert Sequenzfunktion 1. Erstellen ...
Beispiel für eine Methode zur Überprüfung des Status einer Linux-Firewall
So überprüfen Sie den Status der Linux-Firewall 1...
Detaillierte Erläuterung des Falls der dynamischen Tabellengenerierung mit JavaScript
Inhaltsverzeichnis Vorwort Umsetzungsideen Implem...
vue cli3 implementiert die Schritte der Verpackung nach Umgebung
Das mit CLI3 erstellte Vue-Projekt wird als Nullk...
HTML-Sonderzeichen-Konvertierungstabelle
Charakter Dezimal Zeichennummer Entitätsname --- ...
Definition und Verwendung des MySQL-Cursors
Erstellen eines Cursors Erstellen Sie zunächst ei...
So bereinigen Sie regelmäßig private Docker-Server-Images
Die Verwendung von CI zum Erstellen von Docker-Im...
So verwenden Sie den Linux-Befehl „more“ in allgemeinen Linux-Befehlen
more ist eines unserer am häufigsten verwendeten ...
Detaillierte Schritte zum Verpacken und Hochladen von Spring Boot in ein Docker-Repository
Wichtiger Hinweis: Bevor Sie diesen Artikel lesen...