这应该很简单,但我遇到了麻烦。如何获取子元素的父 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。
您正在寻找 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 standard 的一部分。它将选择器作为参数并返回第一个匹配的祖先,如果没有则返回 null。
属性 pDoc.parentElement
或 pDoc.parentNode
将为您获取父元素。
var parentDiv = pDoc.parentElement
编辑:这有时是 parentNode
在某些情况下。
https://developer.mozilla.org/en-US/docs/Web/API/Node/parentElement
这可能会帮助你。
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 -->
我最近不得不做类似的事情,我使用了这个片段:
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
函数,您就可以开始了。希望对一些人有用✌️