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

列印頁面