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

PHPz
Freigeben: 2023-09-14 19:21:10
nach vorne
1250 Leute haben es durchsucht

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.
Nach dem Login kopieren

Syntax

Das Folgende ist die Syntax der HTML DOM CompareDocumentPosition()-Methode -

node.compareDocumentPosition(node)
Nach dem Login kopieren

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>
Nach dem Login kopieren

Ausgabe

Dies erzeugt die folgende Ausgabe –

HTML DOM compareDocumentPosition() 方法

比较文档位置

Wenn auf die Schaltfläche „Position“ geklickt wird –

HTML DOM compareDocumentPosition() 方法

比较文档位置

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>
Nach dem Login kopieren

Dann erstellen wir eine Schaltfläche POSTION, die die docPosition()-Methode ausführt, wenn der Benutzer klickt. Die

<button onclick="docPosition()">POSITION</button>
Nach dem Login kopieren

docPosition()-Methode ruft das

-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;
}
Nach dem Login kopieren

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!

Quelle:tutorialspoint.com
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage