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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。