HTML - compareDocumentPosition() 方法

**compareDocumentPosition()** 方法透過比較兩個 DOM 元素（節點）的位置來幫助理解文件結構，並返回一個表示第一個元素相對於第二個元素位置的位掩碼（數值）。

語法

node.compareDocumentPosition(otherNode);

引數

此方法接受一個引數，如下所示。

方法	描述
otherNode	要與原始節點進行比較的其他 DOM 節點。

返回值

一個位掩碼，指示兩個 DOM 節點之間的位置關係。

位掩碼值及其含義如下

關係	值	描述
不同文件	1	節點屬於不同的文件
之後	2	第一個節點在第二個節點之後
之前	4	第一個節點在第二個節點之前
內部（第 1 個）	8	第一個節點在第二個節點內部
內部（第 2 個）	16	第二個節點在第一個節點內部
相同屬性	32	節點是同一元素上的屬性

HTML DOM 元素 'compareDocumentPosition()' 方法示例

以下是一些示例，說明了在比較不同型別的 DOM 元素時 compareDocumentPosition() 方法的各種用法。

比較同一文件中的兩個元素

在此示例中，compareDocumentPosition() 方法在同一文件中比較**element1** 與**element2**。

<!DOCTYPE html>
<html lang="en">
<head>
<style> 
    .element {
        border: 1px solid #ccc; 
        margin-bottom: 10px;
    }
    .relation {
        font-style: italic;
    }
</style>
</head>

<body>
    <h2>Compare Elements Example</h2>
    <div class="element" id="element1">
        Element 1
    </div>
    <div class="element" id="element2">
        Element 2
    </div>
    <div class="relation" id="relation"></div>
    <button onclick="compareElements()">
        Compare Elements
    </button>
    <script>
        function compareElements() {
            var element1 = 
            document.getElementById('element1');
            var element2 = 
            document.getElementById('element2');
            var relation = 
            document.getElementById('relation');

            var position = 
            element1.compareDocumentPosition(element2);
            if (position & Node.DOCUMENT_POSITION_PRECEDING){
                relation.textContent = 
                'Element 1 precedes Element 2.';
            } else if
            (position & Node.DOCUMENT_POSITION_FOLLOWING){
                relation.textContent = 
                'Element 1 follows Element 2.';
            } else if 
            (position & Node.DOCUMENT_POSITION_CONTAINS) {
                relation.textContent = 
                'Element 1 contains Element 2.';
            } else if 
            (position & Node.DOCUMENT_POSITION_CONTAINED_BY){
                relation.textContent = 
                'Element 1 is contained by Element 2.';
            } else if (position === 0) {
                relation.textContent = 
                'Element 1 and Element 2 are the same.';
            } else {
                relation.textContent =
                'Unknown relationship.';
            }
        }
    </script>
</body>

</html>

比較元素與其後代

這裡，父元素與其子元素進行比較。返回的位掩碼指示**子（後代）**元素在父元素內部。

<!DOCTYPE html>
<html lang="en">
<head> 
<style>
    .container {
        border: 1px solid #ccc;
        padding: 10px;
        margin-bottom: 10px;
    }
    .descendant {
        border: 1px solid #f0f0f0;
        padding: 8px;
        margin-left: 20px;
    }
</style>
</head>

<body>
    <h2>Compare Element with Descendant Example</h2>
    <div class="container" id="parentElement">
        Parent Element
        <div class="descendant" id="descendantElement">
            Descendant Element
        </div>
    </div>
    <div class="relation" id="relation"></div>
    <button onclick="compareWithDescendant()">
    Compare with Descendant
    </button>
    <script>
        function compareWithDescendant() {
            var parentElement = 
            document.getElementById('parentElement');
            var descendantElement = 
            document.getElementById('descendantElement');
            var relation = 
            document.getElementById('relation');

            var position = 
            parentElement.compareDocumentPosition
            (descendantElement);

            if (position & Node.DOCUMENT_POSITION_CONTAINS){
                relation.textContent = 
                'Parent contained by Descendant Element.';
            } else if
            (position&Node.DOCUMENT_POSITION_CONTAINED_BY){
                relation.textContent =
                'Descendant contained by Parent Element.';
            } else {
                relation.textContent = 
                'No direct containment.';
            }
        }
    </script>
</body>

</html>

比較兩個斷開連線的元素

此示例說明了如何處理比較兩個元素但它們之間沒有任何有意義的文件關係的情況。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div id="myElement" class="example" 
    title="An example element"></div>
    <button id="checkButton">Check Attributes</button>
    <p id="result"></p>

    <script>
        document.getElementById
        ('checkButton').addEventListener
        ('click', function() {
            // Get the element
            let element = 
            document.getElementById('myElement');

            // Get the attributes
            let attrClass = 
            element.getAttributeNode('class');
            let attrTitle = 
            element.getAttributeNode('title');

            // Compare the document positions
            let comparisonResult = 
            attrClass.compareDocumentPosition(attrTitle);

            // Check if the nodes are attributes 
            //of the same element
            let resultText;
            if (comparisonResult & 
            Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC){
            resultText = 
            'Attributes are on the same element';
            } else {
            resultText = 
            'Attributes are not on the same element';
            }

            // Display the result in the paragraph element
            document.getElementById('result').innerText = 
            resultText;
        });
    </script>
</body>

</html>

支援的瀏覽器

方法
compareDocumentPosition()	是	是	是	是	是

html_dom_element_reference.htm

列印頁面