使用 JavaScript 检查父元素是否有特定的类

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

使用 JavaScript 检查父元素是否有特定的类

作者：迹忆客最近更新：2022/12/15 浏览次数：

JavaScript 中要检查父元素是否具有特定类：

使用 closest() 方法，将其作为参数传递给类选择器。
如果存在具有特定类的父级，则该方法返回该元素。
如果不存在具有所提供类的父级，则该方法返回 null。

以下是本文示例的 HTML。

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="parent-1">
      <div class="parent2">
        <div id="child">Box 1</div>
      </div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

下面是JavaScript代码

// ✅ Check if any of the parent elements have class `parent-1`
const child = document.getElementById('child');
const parentHasClass = child.closest('.parent-1') !== null;

console.log(parentHasClass); // 👉️ true

// ✅ Check if DIRECT parent element has class `parent-1`.
const directParentHasClass =
  child.parentElement?.classList.contains('parent-1');
console.log(directParentHasClass); // 👉️ false

我们使用 Element.closest() 方法来选择具有 parent-1 类的父元素。

closest() 方法遍历元素及其父元素，直到找到与提供的选择器匹配的节点。

如果元素本身与选择器匹配，则返回该元素。如果不存在与提供的选择器匹配的元素，则 closest() 方法返回 null。

parentHasClass 变量存储一个布尔值：

如果 id 为 child 的 div 的父元素包含 parent-1 类，则为真。
如果没有则为假。

这种方法不会专门检查直接父元素是否包含该类，它会检查层次结构中任何位置的父元素是否包含提供的类。

要检查元素的直接父级是否具有特定类：

使用 parentElement 属性选择元素的父级。
使用 classList.contains() 方法检查父类是否包含该类。
如果元素的类列表包含该类，则该方法返回 true，否则返回 false。

const child = document.getElementById('child');

// ✅ Check if DIRECT parent element has class `parent-1`.
const directParentHasClass =
  child.parentElement?.classList.contains('parent-1');
console.log(directParentHasClass); // 👉️ false