首頁 > 文章 > web前端 > 如果父元素包含子元素，JavaScript 中如何傳回 true？

如果父元素包含子元素，JavaScript 中如何傳回 true？

PHPz轉載: 2023-09-03 21:01:08684瀏覽

如果父元素包含子元素，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()方法。

以上是如果父元素包含子元素，JavaScript 中如何傳回 true？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript html 接口

陳述：

本文轉載於：tutorialspoint.com。如有侵權，請聯絡admin@php.cn刪除

上一篇：如何使用 FabricJS 停用畫布中的統一縮放？下一篇：如何使用 FabricJS 停用畫布中的統一縮放？

看更多