Heim >Web-Frontend >HTML-Tutorial >HTML-DOM-compareDocumentPosition()-Methode Vergleichen Sie die Speicherorte von Dokumenten
HTML-DOM-compareDocumentPosition()-Methode Vergleichen Sie die Speicherorte von Dokumenten
- PHPznach vorne
- 2023-09-14 19:21:101243Durchsuche
Die
HTML DOM CompareDocumentPosition()-Methode wird verwendet, um die angegebene Knotenposition mit jedem anderen Knoten in einem beliebigen Dokument zu vergleichen. Der Rückgabetyp dieser Methode ist ein ganzzahliger Typ, der ihre Position im Dokument beschreibt. Der ganzzahlige Rückgabewert ist wie angegeben -
1: No relationship, the two nodes do not belong to the same document. 2: The first node (para1) is positioned after the second node (para2). 4: The first node (para1) is positioned before the second node (para2). 8: The first node (para1) is positioned inside the second node (para2). 16: The second node (para2) is positioned inside the first node (para1). 32: No relationship, or the two nodes are two attributes on the same element.
Syntax
Das Folgende ist die Syntax der HTML DOM CompareDocumentPosition()-Methode -
node.compareDocumentPosition(node)
Node ist hier der Knotenobjekttyp und gibt den Knoten an, den wir mit dem aktuellen Knoten vergleichen möchten.
Beispiel
Sehen wir uns ein Beispiel der Methode „compareDocumentPosition()“ an –
<!DOCTYPE html>
<html>
<body>
<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>
<p>Click the button to compare the position of the two paragraphs.</p>
<button onclick="docPosition()">POSITION</button>
<p id="Sample"></p>
<script>
function docPosition() {
var p1 = document.getElementById("para1").lastChild;
var p2 = document.getElementById("para2").lastChild;
var x = p2.compareDocumentPosition(p1);
document.getElementById("Sample").innerHTML = x;
}
</script>
</body>
</html>Ausgabe
Dies erzeugt die folgende Ausgabe –
Wenn auf die Schaltfläche „Position“ geklickt wird –
Im obigen Beispiel: Mittel -
Wir haben zunächst zwei Elemente mit den IDs „para1“ und „
paragraph 2“ erstellt.
<p id="para1">This is a paragraph</p> <p id="para2">This is another paragraph</p>
Dann erstellen wir eine Schaltfläche POSTION, die die docPosition()-Methode ausführt, wenn der Benutzer klickt. Die
<button onclick="docPosition()">POSITION</button>
docPosition()-Methode ruft das e388a4556c0f65e1904146cc1a846bee-Element mithilfe der getElementById()-Methode für das Dokumentobjekt ab. Anschließend werden die lastchild-Attributwerte der beiden Absätze den Variablen p1 bzw. p2 zugewiesen.
Dann rufen wir die Methode „compareDocumentPosition()“ auf p2 mit p1 als Parameter auf. Das bedeutet, dass wir die Position von p2 relativ zu p1 vergleichen wollen. Da hier p2 nach p1 liegt, ist der Rückgabewert 2 -
function docPosition() {
var p1 = document.getElementById("para1").lastChild;
var p2 = document.getElementById("para2").lastChild;
var x = p2.compareDocumentPosition(p1);
document.getElementById("Sample").innerHTML = x;
}Das obige ist der detaillierte Inhalt vonHTML-DOM-compareDocumentPosition()-Methode Vergleichen Sie die Speicherorte von Dokumenten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!