如果父元素包含子元素，JavaScript 中如何傳回 true？
- PHPz轉載
- 2023-09-03 21:01:08747瀏覽
在本教程中，我們將了解如果父元素包含 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()方法。
以上是如果父元素包含子元素，JavaScript 中如何傳回 true？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除