HTML - DOM isSameNode() 方法

**isSameNode()** 方法檢查兩個節點引用是否指向 HTML 文件中的同一個節點物件。如果兩個引用都指向完全相同的節點，則返回 true；否則，返回 false。

語法

node.isEqualNode(otherNode);

引數

引數	描述
otherNode	指定要與當前節點進行比較的節點。

返回值

此方法返回一個布林值：如果當前節點與提供的節點相同，則返回“true”；否則返回“false”。

HTML DOM 元素“isSameNode()”方法示例

以下是一些 isSameNode() 方法的示例，這些示例在各種場景中比較節點以檢查它們是否指向 HTML DOM 中的同一個節點。

檢查相同的節點

此示例使用 isSameNode() 方法檢查相似節點。在這種情況下，node1 和 node2 不是同一個節點物件，因為它們引用的是 HTML 文件中不同的**<p>** 元素。isSameNode() 方法返回 false。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>isSameNode() Method Example</title>
</head>
<body>
    <h1>HTML - DOM Element</h1>
    <h2>isSameNode() Method</h2>
    <p>Checking for same nodes....</p>
    <div id="container">
        <p id="node1">Paragraph 1</p>
        <p id="node2">Paragraph 2</p>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', 
        function() {
            var node1 = document.getElementById('node1');
            var node2 = document.getElementById('node2');

            // Compare if node1 is the same as node2
            var isSame = node1.isSameNode(node2);

            // Display the result
            var resultElement = document.createElement('p');
            resultElement.textContent = 
            'Are node1 and node2 the same node? ' + isSame;
            document.body.appendChild(resultElement);
        });
    </script>
</body>

</html>

節點內容比較

此示例說明了如何比較兩個節點的內容，這裡我們使用“textContent”屬性來檢查每個節點內部的實際文字。透過比較這些文字，我們可以看到它們是相同還是不同。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Node Content Comparison</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>isSameNode() Method</h2>
    <p>Compare node content by clicking the button!</p>
    <div id="container">
        <p id="node1">Paragraph 1</p>
        <p id="node2">Paragraph 1</p>  
        <p id="node3">Paragraph 2</p>
    </div>

    <button onclick="compareContent()">
        Compare Content
    </button>

    <script>
    function compareContent() {
        var node1 = document.getElementById('node1');
        var node2 = document.getElementById('node2');
        var node3 = document.getElementById('node3');

        // Compare content of node1 with node2 and node3 
        var isSameContent1 = 
        node1.textContent === node2.textContent; 
        var isSameContent2 = 
        node1.textContent === node3.textContent;

        alert('Is the content of node1 the same as node2? ' 
        + isSameContent1 + '\n' +
            'Is the content of node1 the same as node3? ' 
            + isSameContent2);
    }
    </script>
</body>

</html>

支援的瀏覽器

方法
isSameNode()	是	是	否	是	是

html_dom_element_reference.htm

列印頁面

上一個

下一個