資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法學如何在JavaScript中判斷父元素是否包含子元素並返回true？
在本教程中，我們將學習如何在JavaScript中判斷父元素是否包含子元素並返回true。假設您有兩個HTML元素，一個父元素和一個子元素，您想知道父元素是否包含子元素。
使用Node.contains()方法
Node介面的**contains()**方法返回一個布林值，指示節點是否是給定節點的後代。
如果您想知道父元素是否包含子元素，可以使用Node.contains()方法。
這是一個簡單的例子：
<div id="parent"> <p id="child">Some text</p> </div>
下面的JavaScript程式碼片段檢查父元素是否包含子元素。
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("result").innerHTML = parent.contains(child)
// returns true在上面的程式碼中，我們使用**getElementById()**方法獲取對父元素和子元素的引用。
然後我們使用parent.contains(child)來檢視父元素是否包含子元素。
示例
以下是包含HTML的完整程式碼：
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="parent">
<p id="child"></p>
</div>
<div id="result"></div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("result").innerHTML ="Does parent contain child: "+ parent.contains(child)
</script>
</body>
</html>使用hasChildNodes()方法
另一種檢查父元素是否包含任何子元素的方法是使用**hasChildNodes()**方法。
hasChildNodes()方法如果包含任何子元素則返回true。
這是一個簡單的例子：
<div id="parent"> <p id="child">Some text</p> </div>
檢視下面的JavaScript程式碼：
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("result").innerHTML = parent.hasChildNoodes();在上面的程式碼中，我們使用getElementById()方法獲取對父元素和子元素的引用。
然後我們使用hasChildNodes方法檢查父元素是否包含子元素。
示例
以下是包含HTML的完整程式碼：
<!doctype html>
<html>
<head>
<title>Examples</title>
</head>
<body>
<div id="result"></div>
<div id="parent">
<p id="child"></p>
</div>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("result").innerHTML = parent.hasChildNodes();
</script>
</body>
</html>總而言之，有多種方法可以檢查父元素是否包含子元素。您可以使用Node.contains()或hasChildNodes()方法。
更新於：2022年7月1日
7K+ 瀏覽量
廣告