使用 JavaScript 通过标签获取最近的父元素

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

Vue React JavaScript Angular CSS HTML

使用 JavaScript 通过标签获取最近的父元素

作者：迹忆客最近更新：2023/01/19 浏览次数：

使用 closest() 方法通过标签获取最近的父元素，例如 child.parentElement.closest('div')。 closest() 方法遍历元素及其父元素，直到找到与提供的选择器匹配的节点。

以下是本文示例的 HTML。

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

  <body>
    <div id="parent-1">
      <span id="parent-2">
        <div id="child">Child 1</div>
      </span>
    </div>

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

这是相关的 JavaScript 代码。

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

// ✅ Gets immediate parent, regardless which Tag
const immediateParent = child.parentElement;
console.log(immediateParent); // 👉️ span#parent-2

// ✅ Gets a parent that is a `div` element
const parent = child.parentElement.closest('div');
console.log(parent); // 👉️ div#parent-1

我们使用 Node.parentElement 属性来获取 DOM 节点的直接父元素。

但是，parentElement 属性不允许我们在返回父元素时过滤结果。

我们使用了 closest 方法通过标签获取最近的父元素。

我们在调用 closest() 方法之前访问子元素的 parentElement 属性的原因是因为 closest() 方法遍历元素及其父元素，直到找到与提供的选择器字符串匹配的节点。

在我们的例子中，子元素是一个 div 元素，而我们想要访问的父元素是一个 div，因此调用 closest() 方法并向其传递一个 div 选择器会返回子元素。

通过访问 parentElement 属性，我们开始遍历 DOM，从父元素开始寻找与选择器匹配的元素。

如果没有元素与选择器匹配，则 closest() 方法返回 null。

该方法采用包含选择器的字符串。提供的选择器可以根据需要指定。

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

// ✅ Gets a parent that is a `div` element
const parent = child.parentElement.closest('body > div');

console.log(parent); // 👉️ div#parent-1