获取元素的父div

IT技术 javascript html getelementbyid
2021-01-20 14:07:16

这应该很简单，但我遇到了麻烦。如何获取子元素的父 div？

我的 HTML： 

<div id="test">
    <p id="myParagraph">Testing</p>
</div>

我的 JavaScript： 

var pDoc = document.getElementById("myParagraph");
var parentDiv = ??????????

我会想document.parent或parent.container会工作，但我不断收到not defined错误。请注意，pDoc是定义的，只是不是它的某些变量。

有任何想法吗？

PS 如果可能的话，我宁愿避免使用 jQuery。

6个回答

您正在寻找parentNode，它Element继承自Node：

parentDiv = pDoc.parentNode;

方便参考：

  • DOM2 核心规范——得到所有主流浏览器的良好支持
  • DOM2 HTML规范 - DOM 和 HTML 之间的绑定
  • DOM3 核心规范 - 一些更新，并非所有主流浏览器都支持
  • HTML5 规范- 现在包含 DOM/HTML 绑定

如果你正在寻找一种比直接父元素更远的特定类型的元素，你可以使用一个函数，它会在 DOM 中向上移动直到找到一个，或者没有：

// Find first ancestor of el with tagName
// or undefined if not found
function upTo(el, tagName) {
  tagName = tagName.toLowerCase();

  while (el && el.parentNode) {
    el = el.parentNode;
    if (el.tagName && el.tagName.toLowerCase() == tagName) {
      return el;
    }
  }

  // Many DOM methods return null if they don't 
  // find the element they are searching for
  // It would be OK to omit the following and just
  // return undefined
  return null;
}

编辑 2021

Element.closest是DOM 标准的一部分。它接受一个选择器作为参数并返回第一个匹配的祖先，如果没有则返回 null。

@Ullullu 的建议真的很有帮助，谢谢。
2021-03-25 14:07:16
@RobG 很酷，更有理由使用它而不是自己编写。您应该将 2021 年的编辑移至回复的顶部，因为我认为这是正确的答案。
2021-04-03 14:07:16
@Ullullu——让我们看看，10,000 行库还是 10 行函数？;-)
2021-04-05 14:07:16
@quant—— Element.closest不需要 jQuery 。:-)
2021-04-08 14:07:16
使用 jQuery : el.closest(tagName)
2021-04-12 14:07:16

该属性pDoc.parentElement或pDoc.parentNode将为您提供父元素。

但有什么区别呢？
2021-03-19 14:07:16

var parentDiv = pDoc.parentElement

编辑：这有时是parentNode在某些情况下。

https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement

这可能对你有帮助。

ParentID = pDoc.offsetParent;
alert(ParentID.id);
其它你可能感兴趣的问题
上一篇如何将内联 svg（在 DOM 中）绘制到画布上？ 下一篇未捕获的类型错误：无法使用“in”运算符来搜索“length”