使用 JavaScript 通过标签获取最近的父元素
使用 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
上面的示例选择了一个将 body 元素作为其父元素的 div 元素。
如果向 closest() 方法提供了无效的选择器字符串，则会抛出 SyntaxError。
相关文章
Do you understand JavaScript closures?
发布时间：2025/02/21 浏览次数：108 分类：JavaScript
-
The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.
Do you know about the hidden traps in variables in JavaScript?
发布时间：2025/02/21 浏览次数：178 分类：JavaScript
-
Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av
How much do you know about the Prototype Chain?
发布时间：2025/02/21 浏览次数：150 分类：JavaScript
-
The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start
如何在 JavaScript 中合并两个数组而不出现重复的情况
发布时间：2024/03/23 浏览次数：86 分类：JavaScript
-
本教程介绍了如何在 JavaScript 中合并两个数组，以及如何删除任何重复的数组。
