如果父元素包含子元素，JavaScript 中如何傳回 true？-js教程-PHP中文網

首頁

web前端

js教程

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

PHPz

Sep 03, 2023 pm 09:01 PM

如果父元素包含子元素，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中文網其他相關文章！

陳述

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

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。