logo标签列表

获取元素的父级div

javascripthtmlgetelementbyid
272

这应该很简单，但我遇到了麻烦。如何获取子元素的父级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 已定义，只是其中的某些变量未定义。

有任何想法吗？

P.S. 如果可能的话，我希望避免使用 jQuery。

7个回答
432
53

如果您正在寻找一个比直接父元素更远的特定类型的元素，您可以使用一个函数，该函数会向上遍历 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。

使用 jQuery：el.closest(tagName) - Ullullu
15
让我们看看，是用一万行库还是一个十行的函数？;-) - RobG
@Ullullu的建议非常有帮助，谢谢。 - quant
2
@quant - 你不需要使用jQuery来使用Element.closest。 :-) - RobG
3
@RobG 很酷，这更加理由使用它而不是编写自己的代码。你应该将那个2021年的编辑移到你的回复顶部，因为我认为那才是正确的答案。 - quant
18

属性pDoc.parentElement或pDoc.parentNode将获取父元素。

13
但是有什么区别吗？ - Ben Wheeler
1
这里很好地解释了区别：https://dev59.com/M2oy5IYBdhLWcg3wPLr0 - Jonathan Elkins
4
1
我最近需要做类似的事情，我使用了以下片段：
const getNode = () =>
  for (let el = this.$el; el && el.parentNode; el = el.parentNode){
    if (/* insert your condition here */) return el;
  }
  return null
})

该函数将返回满足条件的元素。我正在查找元素上的CSS类。如果没有这样的元素，它将返回null。

如果有人要查找多个元素，则仅返回提供的元素的最近父级。

我的例子是:

if (el.classList?.contains('o-modal')) return el;

我在vue组件中使用它(this.$el)，将其更改为您的document.getElementById函数，然后你就可以使用了。希望对某些人有用 ✌️

0

这可能会对你有所帮助。

ParentID = pDoc.offsetParent;
alert(ParentID.id);
0

当您尝试将元素定位在“真实流”之外时，了解其父级非常有用。

下列代码将输出所提供元素的父元素的 ID。可用于诊断对齐问题。

<!-- Patch of code to find parent -->
<p id="demo">Click the button </p>
<button onclick="parentFinder()">Find Parent</button>
<script>
function parentFinder()
{
    var x=document.getElementById("demo"); 
    var y=document.getElementById("*id of Element you want to know parent of*");
    x.innerHTML=y.parentNode.id;
}
</script>
<!-- Patch ends -->
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接