JavaScript 如何检查一个元素是否有任何子元素

任务是使用JavaScript找出一个元素是否含有子元素。我们将讨论一些技术。

方法：

选择父元素。
使用 firstChild, childNodes.length, children.length 属性之一来判断一个元素是否有子元素。
也可以使用 hasChildNodes() 方法来找到父节点的子元素。
Node.contains方法： 返回一个布尔值。

示例1： 在这个示例中，使用 hasChildNodes()方法 来确定 < div>元素的子元素。

<html>
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <div id="div">
        <p id="GFG_UP">
        </p>
    </div>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <p id="GFG_DOWN">
    </p>
 
    <script>
        let parentDiv = document.getElementById("div");
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
 
        el_up.innerHTML = "Click on the button to check "
            + "whether element has children.";
 
        function GFG_Fun() {
            let ans = "Element <div> has no children";
 
            if (parentDiv.hasChildNodes()) {
                ans = "Element <div> has children";
            }
 
            el_down.innerHTML = ans;
        }
    </script>
</body>
</html>

输出:

JavaScript 如何检查一个元素是否有任何子元素

示例2： 在这个示例中，使用 children.length属性 确定<div>元素的子元素。

<html>
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
 
    <div id="div">
        <p id="GFG_UP">
        </p>
    </div>
 
    <button onclick="GFG_Fun()">
        click here
    </button>
 
    <p id="GFG_DOWN">
    </p>
 
    <script>
        let parentDiv = document.getElementById("div");
        let el_up = document.getElementById("GFG_UP");
        let el_down = document.getElementById("GFG_DOWN");
 
        el_up.innerHTML = "Click on the button to " +
            "check whether element has children.";
 
        function GFG_Fun() {
            let ans = "Element <div> has no children";
 
            if (parentDiv.children.length > 0) {
                ans = "Element <div> has children";
            }
 
            el_down.innerHTML = ans;
        }
    </script>
</body>
</html>

输出:

JavaScript 如何检查一个元素是否有任何子元素

示例3： 在这个示例中，我们正在使用N ode.contain 方法来确定子元素。

<html>
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
    <div id="GFG">
        <p id="gfg"> Click on the button to check
            whether element has children.</p>
    </div>
    <button onclick="GFG_Fun()">
        click here
    </button>
    <p id="result"></p>
    <script>
        function GFG_Fun() {
            let parent = document.getElementById("GFG");
            let child = document.getElementById("gfg");
            document.getElementById("result").innerHTML =
                "Does Element contain child: " + parent.contains(child)
        }
    </script>
</body>
</html>

输出:

JavaScript 如何检查一个元素是否有任何子元素