Question

这应该很简单，但我遇到了麻烦。如何获取子元素的父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。

Answer 1

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

parentDiv = pDoc.parentNode;

Handy References：

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

Answer 2

如果您正在寻找比直接父级更远的特定类型的元素，您可以使用一个上升到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;
}

Answer 3

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

Answer 4

这可能会对你有帮助。

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

Answer 5

var parentDiv = pDoc.parentElement

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

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

Answer 6

当您尝试将元素放置在＆＃34; real-flow＆＃34;时，了解元素的父元素非常有用。元素。

下面给出的代码将输出提供了id的元素的父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 -->

Answer 7

最近我不得不做类似的事情，我使用了以下代码段：

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函数，您很高兴。希望对某些人有用✌️

获取元素的父div

7 个答案: