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

打印页面