首頁 >web前端 >html教學 >HTML DOM compareDocumentPosition() 方法 比較文件位置

HTML DOM compareDocumentPosition() 方法 比較文件位置

PHPz
PHPz轉載
2023-09-14 19:21:101243瀏覽

HTML DOM CompareDocumentPosition() 方法用於將給定節點位置與任何文件中的任何其他節點進行比較。此方法的傳回類型是整數類型,用於描述它們在文件中的位置。整數回傳值如指定-

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.

語法

以下是HTML DOM CompareDocumentPosition() 方法的語法-

node.compareDocumentPosition(node)

這裡的節點是節點物件類型,指定我們要與當前節點進行比較的節點。

範例

讓我們來看一個compareDocumentPosition的範例() 方法-

<!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>

輸出

這將產生以下輸出-

HTML DOM compareDocumentPosition() 方法

比较文档位置

##點擊「位置」按鈕時-

HTML DOM compareDocumentPosition() 方法

比较文档位置

在在上面的範例中-

我們先建立了兩個id 為「para1」和「的元素

第2段」。

<p id="para1">This is a paragraph</p>
<p id="para2">This is another paragraph</p>

然後我們建立了一個按鈕POSTION,它將在使用者點擊時執行docPosition() 方法-

<button onclick="docPosition()">POSITION</button>

docPosition() 方法使用文件物件上的getElementById() 方法取得< ;p> 元素。然後,它將兩個段落的lastchild 屬性值分別賦給變數p1 和p2。

然後,我們以p1 為參數,呼叫p2 上的compareDocumentPosition() 方法。這意味著我們要比較 p2 相對於 p1 的位置。由於這裡 p2 位於 p1 之後,因此傳回值為 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;
}

以上是HTML DOM compareDocumentPosition() 方法 比較文件位置的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文轉載於:tutorialspoint.com。如有侵權,請聯絡admin@php.cn刪除