JavaScript获取指定元素的父元素的实现方法

在 JavaScript 中，获取一个元素的父元素非常简单，主要通过以下属性或方法实现：

1. 使用parentNode属性

返回当前节点的父节点，可能是元素节点、文档节点或文档片段节点。对于元素节点，通常就是其父元素。

let child = document.getElementById('myElement');
let parent = child.parentNode;

2. 使用parentElement属性

返回当前元素的父元素节点，如果父节点不是元素（例如是文本节点或文档节点），则返回 null。推荐在只想获取元素节点时使用。

let child = document.getElementById('myElement');
let parent = child.parentElement;

示例

<div id="parent">
  <p id="child">点击我</p>
</div>

<script>
  let child = document.getElementById('child');
  console.log(child.parentNode);     // <div id="parent">...</div>
  console.log(child.parentElement);   // <div id="parent">...</div>
</script>

注意事项

• 如果当前元素已经是根节点（如 html 元素），parentNode 返回 document，而 parentElement 返回 null。
• 对于文本节点或注释节点，parentNode 可以获取其父元素，而 parentElement 始终为 null（因为它们不是元素）。

相关方法：closest()

如果你需要向上查找匹配某个 CSS 选择器的祖先元素（包括自身），可以使用 closest() 方法。

let ancestor = element.closest('.some-class');

该方法返回最近的匹配祖先元素，如果没有找到则返回 null。

到此这篇关于JavaScript获取指定元素的父元素的实现方法的文章就介绍到这了,更多相关JavaScript获取指定元素父元素内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！