HTML DOM hasChildNodes()用法及代码示例

HTML DOM hasChildNodes() 方法用于检查元素是否包含子节点。如果元素确实包含子节点，则返回 true，否则返回 false。它会将任何空白视为子节点，因为节点内的空白本质上被视为文本节点。

用法

以下是 hasChildNodes() 方法的语法 -

node.hasChildNodes()

示例

让我们看一个 hasChildNodes() 方法的例子 -

<!DOCTYPE html>
<html>
<head>
<script>
   function checkChild() {
      var div = document.getElementById("DIV1").hasChildNodes();
      document.getElementById("Sample").innerHTML = div;
   }
</script>
</head>
<body>
<h1> hasChildNodes() method example</h1>
<div id="DIV1">
<p>This is a p element inside the div element</p>
<span>This is a span element inside the div element</span>
</div>
<br>
<button onclick="checkChild()">CHECK</button>
<p id="Sample"></p>
</body>
</html>

输出

这将产生以下输出 -

单击“检查”按钮 -

在上面的例子中 -

我们首先创建了一个 ID 为 “DIV1” 的 <div> 元素，其中包含一个 <p> 元素和一个 <span> 元素 -

<div id="DIV1">
<p>This is a p element inside the div element</p>
<span>This is a span element inside the div element</span>
</div>

然后我们创建了一个按钮 CHECK，当用户点击时，它将执行 checkChild() 方法 -

<button onclick="checkChild()">CHECK</button>

checkChild() 方法使用 getElementById() 方法获取对应的 <div> 元素，并在其上使用 hasChildNodes() 方法。由于 div 元素内部有两个子元素，因此它将返回 true。使用其innerHTML属性在id为“Sample”的段落中显示相同的内容 -

function checkChild() {
   var div = document.getElementById("DIV1").hasChildNodes();
   document.getElementById("Sample").innerHTML = div;
}

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM hasChildNodes() method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。