DOM Node hasChildNodes() 方法

语法

node.hasChildNodes();

参数

该方法不接受任何参数。

返回值

• 如果节点有子节点，则返回 true。
• 如果节点没有子节点，则返回 false。

示例

让我们来看一个简单的示例，首先创建一个 <div> 元素，并向其中添加一个 <p> 子元素：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
<head>
  <title>hasChildNodes() 示例</title>
</head>
<body>
  <div id="myDiv">
    <p>Hello, World!</p>
  </div>

  <script>
    const div = document.getElementById('myDiv');
    if (div.hasChildNodes()) {
      console.log('该 div 元素有子节点');
    } else {
      console.log('该 div 元素没有子节点');
    }
  </script>
</body>
</html>

在这个示例中，我们首先获取了 id 为 myDiv 的 <div> 元素，然后使用 hasChildNodes() 方法检查该 <div> 是否有子节点。由于我们在 <div> 中添加了一个 <p> 子元素，所以 hasChildNodes() 方法返回 true，最终会在控制台输出 该 div 元素有子节点。

注意事项

1. hasChildNodes() 方法会忽略空白文本节点，因此如果只有空格或换行符等文本内容，也会被视为没有子节点。
2. 如果需要进一步操作子节点，可以使用 childNodes 属性来获取子节点列表。

总的来说，hasChildNodes() 方法是一个非常方便的方法，用于判断一个节点是否有子节点。在实际开发中，我们经常会用到这个方法来进行逻辑判断或者操作。希望本文能够帮助你更好地理解和应用这个方法！