HTML DOM hasChildNodes() 方法
htmlweb developmentfront end technology更新于 2024/5/29 18:20:17
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。相同的内容显示在 id 为"Sample"的段落中，并使用其 innerHTML 属性进行显示。−
function checkChild() {
var div = document.getElementById("DIV1").hasChildNodes();
document.getElementById("Sample").innerHTML = div;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
