使用 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
。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布,任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站。本站所有源码与软件均为原作者提供,仅供学习和研究使用。如您对本站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。