HTML - DOM 元素的 hasChildNodes() 方法

**hasChildNodes()** 方法用于检查 HTML 元素内部是否包含任何子元素。如果存在子节点，则返回“true”，否则返回“false”。

语法

element.hasAttributes();

返回值

此方法返回一个布尔值“true”，如果元素具有子节点；否则返回“false”。

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

以下是 hasChildNodes() 方法的一些示例，这些示例检查 HTML DOM 元素内是否存在子节点。

检查元素是否具有子节点

此示例演示如何使用 hasChildNodes() 方法检查是否存在任何子节点，并在单击按钮时显示结果。它检查 id=parentElement 的**<div>** 元素是否具有任何子节点。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>Checks for Child Nodes</title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>hasChildNodes() Method</h2>
    <p>
        Checks if the element has child nodes.
    </p>
    <div id="parentElement">
        <p>Does this div have child nodes?</p>
    </div>
    <button onclick="checkChildNodes()">
        Check Child Nodes
    </button>

    <script>
        function checkChildNodes() {
            const parentElement = 
            document.getElementById('parentElement');
            if (parentElement.hasChildNodes()) {
                alert
                ('The parent element has child nodes.');
            } else {
                alert
                ('Parent element doesn`t have child nodes.'
                );
            }
        }
    </script>
</body>

</html>

动态添加和检查子节点

此示例在单击按钮时动态添加一个子节点，然后通过单击“检查子节点”按钮来检查元素是否具有任何子节点。因此，如果添加了子节点，它将显示它具有子节点，如果没有，则将显示相应的消息。

<!DOCTYPE html>
<html lang="en">
<head> 
    <title>
        Checks for the Child nodes Dynamically
    </title>
</head>

<body>
    <h1>HTML - DOM Element</h1>
    <h2>hasChildNodes() Method</h2>
    <p>
        Add child nodes by clicking the button!!
    </p>
    <div id="parentElement"></div>
    <button onclick="addTextNode()">
        Add Child Node
    </button>
    <p>Checks for the child Nodes..</p>
    <button onclick="checkChildNodes()">
        Check Child Nodes
    </button>
    <p><b>Note:</b> No child nodes will be displayed 
            if none have been added.
    </p>  
    <script>
        function addTextNode() {
            const parentElement = 
            document.getElementById('parentElement');
            const textNode = document.createTextNode
            ('Text node added.');
            parentElement.appendChild(textNode);
        }

        function checkChildNodes() {
            const parentElement = document.getElementById
            ('parentElement');
            if (parentElement.hasChildNodes()) {
                alert('Parent element has child nodes.');
            } else {
                    alert('Parent has no child nodes.');
            }
        }
    </script>
</body>

</html>

支持的浏览器

方法
hasChildNodes()	是	是	是	是	是

html_dom_element_reference.htm

打印页面