在前端开发中，我们经常需要检查一个元素是否包含在另一个元素中。这个需求可能来自于一些交互操作，比如判断用户点击的元素是否在某个区域内，或者是为了实现一些特定的功能，比如拖放、选取等。
在本文中，我们将介绍如何使用 JavaScript 来检查一个元素是否包含在另一个元素中。我们会深入探讨 DOM 树结构以及相关 API，帮助读者更好地理解和应用相关知识。
了解 DOM 树结构
在开始之前，我们先来了解一下 DOM 树结构。DOM（Document Object Model）是指文档对象模型，它是 HTML 或 XML 文档的编程接口。DOM 将整个文档表示为一个层级结构的节点树，每一个节点代表着文档中的一个元素、属性、文本等，而父子节点之间则是一种包含关系。
在 DOM 树结构中，我们可以通过父子节点的包含关系来判断一个元素是否包含在另一个元素中。具体来说，如果一个元素是另一个元素的子孙节点，那么它就被认为是包含在这个元素中的。
检查一个元素是否包含在另一个元素中
有多种方法可以检查一个元素是否包含在另一个元素中，下面我们将介绍其中的两种：使用 parentNode 属性和 contains() 方法。
使用 parentNode 属性
parentNode 是 DOM 中的一个属性，它返回某个节点的父节点。如果一个节点没有父节点，那么 parentNode 的值就是 null。
因此，我们可以通过判断一个元素的父节点来确定它是否包含在另一个元素中。比如，下面的代码演示了如何判断一个元素是否直接被包含在另一个元素中：
----- ------------- - ---------------------------------- ----- ------------ - --------------------------------- -- ------------------------ --- -------------- - ------------------ -- - ------ ----- -- --------- -
这里，我们首先获取了两个元素的引用，然后通过比较子元素的 parentNode 和父元素来判断它们之间的关系。
但是需要注意的是，这种方法只能判断直接包含关系，也就是说，如果一个元素是另一个元素的孙子节点、曾孙节点等，那么这种方法就不适用了。
使用 contains() 方法
contains() 是 DOM 中的一个方法，它接受一个参数，表示要检查的节点，如果指定的节点是当前节点的后代节点，则返回 true，否则返回 false。
因此，我们可以使用 contains() 方法来判断一个元素是否包含在另一个元素中。比如，下面的代码演示了如何检查一个元素是否被包含在另一个元素中：
----- ------------- - ---------------------------------- ----- ------------ - --------------------------------- -- -------------------------------------- - ------------------ -- --------- ------ --------- -
这里，我们首先获取了两个元素的引用，然后通过调用父元素的 contains() 方法并将子元素作为参数传入来判断它们之间的关系。
需要注意的是，contains() 方法只能用于判断一个元素和另一个元素之间的包含关系，而不能用于判断一个元素和另一个节点（比如文本节点）之间的关系。
总结
在本文中，我们介绍了如何使用 JavaScript 来检查一个元素是否包
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/10343