获取元素的父div

2020/10/14 03:41 · javascript ·  · 0评论

这应该真的很简单,但是我遇到了麻烦。如何获得子元素的父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 Core规范-得到所有主要浏览器的良好支持
  • DOM2 HTML规范-DOM和HTML之间的绑定
  • DOM3 Core规范-一些更新,并非所有主流浏览器都支持所有更新
  • 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;
}

该属性pDoc.parentElementpDoc.parentNode将为您提供父元素。

var parentDiv = pDoc.parentElement

编辑:parentNode在某些情况下有时这样

https://developer.mozilla.org/zh-CN/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函数,您一切顺利。希望对某些人有用

本文地址:http://javascript.askforanswer.com/huoquyuansudefudiv.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!