这应该很简单,但我遇到了麻烦。我如何得到一个子元素的父div ?

我的HTML:

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

我的JavaScript:

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

我认为是文件。父母或父母。容器将工作,但我一直得到未定义的错误。注意,pDoc是定义的,而不是它的某些变量。

什么好主意吗?

注:如果可能的话,我倾向于避免使用jQuery。


当前回答

这可能对你有帮助。

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

其他回答

这可能对你有帮助。

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

如果你正在寻找比直接父元素更远的特定类型的元素,你可以使用一个函数向上查找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

元素。最接近是DOM标准的一部分。它接受一个选择器作为参数,并返回第一个匹配的祖先,如果没有则返回null。

我最近不得不做一些类似的事情,我使用了这个片段:

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'))返回el;

我在vue组件(this.$el)中使用了它,将其更改为您的文档。函数getElementById,就可以开始了。希望对一些人有用✌️

你要找的是parentNode,它是Element从Node继承的:

parentDiv = pDoc.parentNode;

方便的引用:

DOM2核心规范——所有主流浏览器都支持 DOM2 HTML规范——DOM和HTML之间的绑定 DOM3核心规范-一些更新,不是所有主流浏览器都支持 HTML5规范——现在包含了DOM/HTML绑定

var parentDiv = pDoc.parentElement

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

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