获取元素的父div

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

< p >我的HTML。 

<div id="test">
<p id="myParagraph">Testing</p>
</div>
< p >我的JavaScript: 

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

我本以为document.parent或parent.container可以工作，但我一直得到not defined错误。注意，pDoc是定义的，而不是它的某些变量。

什么好主意吗?

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

407838 次浏览
小开
最佳答案

你要找的是parentNode，它继承自Node:

parentDiv = pDoc.parentNode;

方便的引用:

小开

属性pDoc.parentElement或pDoc.parentNode会给你父元素。

小开

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

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

小开

这可能对你有帮助。

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

当您试图在元素的“实际流”中定位元素时，了解元素的父元素非常有用。

下面给出的代码将输出提供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 -->
小开

var parentDiv = pDoc.parentElement

edit:在某些情况下，有时是parentNode。

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

小开

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

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函数，就可以开始了。希望对一些人有用✌️


提交答案