在JavaScript / HTML中，获取指定元素的父元素

在 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。