HTML - DOM 元素 isEqualNode() 方法

isEqualNode() 方法通过比较节点的属性、类型和子节点来检查两个节点是否相等。如果两个节点相等，则返回“true”；否则，返回“false”。

语法

element.isEqualNode(other_node)

参数

参数	描述
other_node	指定要与当前节点进行比较的节点。

返回值

此方法返回布尔值：如果两个节点相等，则返回“true”；否则返回“false”。

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

以下是 isEqualNode() 方法的一些示例，这些示例在不同的场景中比较节点，以检查 HTML DOM 元素中是否存在相同的节点。

比较 p 元素

此示例帮助我们了解如何使用 isEqualNode() 方法比较两个不同的节点。node1 和 node2 都是具有相同文本内容的<p> 元素，因此 isEqualNode() 将返回 true。

<!DOCTYPE html>
<html lang="en">
<head>  
    <style> 
        .message {
            font-weight: bold;
            color: blue;
        }
    </style>
    <script>
        document.addEventListener('DOMContentLoaded',
        function() {
            var node1 = document.getElementsByClassName
            ('node')[0];
            var node2 = document.getElementsByClassName
            ('node')[1];
            // Compare the nodes
            var isEqual = node1.isEqualNode(node2);
            
            // Display nodes and result on the webpage
            var resultElement=document.getElementById('res');
            resultElement.innerHTML = `<p class="message">
            Are node1 and node2 equal? ${isEqual}</p>`;
        });
    </script>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>isEqualNode() Method</h2>
    <p>Comparing two nodes....</p>
    <p>Node 1:</p>
    <p class="node">Hello</p>
    <p>Node 2:</p>
    <p class="node">Hello</p>
    <div id="res"></div>
</body>

</html>

动态比较 Div 元素

此示例演示了 'isEqualNode()' 方法如何比较三个<div> 元素并相应地显示结果。它首先检查 div1 和 div2 是否相等，然后检查 div1 和 div3 是否相等。如果 div1 和 div3 相等，则返回 true；否则返回 false，依此类推。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Checks for identical Nodes</title>
    <script>
    function checkNodeEquality() {
        // Create div elements
        var div1 = createDiv('same', 'This is div1');
        var div2 = createDiv('same', 'This is div1');
        var div3 = createDiv('diff', 'This is div3');

        // Check if nodes are equal
        var areEqual1 = div1.isEqualNode(div2);
        var areEqual2 = div1.isEqualNode(div3);

        // Display results
        document.getElementById('res1').textContent = 
        'Are div1 and div2 equal? ' + areEqual1;
        document.getElementById('res2').textContent = 
        'Are div1 and div3 equal? ' + areEqual2;
    }

    function createDiv(className, textContent) {
        var div = document.createElement('div');
        div.setAttribute('class', className);
        div.textContent = textContent;
        return div;
    }
    </script>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>isEqualNode() Method</h2>
    <p>Checks for the equality of nodes:</p>

    <button onclick="checkNodeEquality()">
        Check Node Equality
    </button>

    <h3>Explanation:</h3>
    <div>
        <div class="same">div1: This is div1</div>
        <div class="same">div2: This is div1</div>
        <div class="diff">div3: This is div3</div>
    </div>

    <h3>Comparison Results:</h3>
    <div id="res1"></div>
    <div id="res2"></div>
</body>

</html>

支持的浏览器

方法
isEqualNode()	是	是	是	是	是

html_dom_element_reference.htm

打印页面