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>    

支持的浏览器

方法 Chrome Edge Firefox Safari Opera
isSameNode()
html_dom_element_reference.htm
广告