数据结构
网络
关系数据库管理系统 (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+ 浏览量
广告