web-dev-qa-db-ja.com

要素の親divを取得する

これは本当に簡単なはずですが、問題があります。子要素の親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を避けたいと思います。

181
OVERTONE

parentNode を探しています。 ElementNode から継承しています。

parentDiv = pDoc.parentNode;

便利な参考文献:

  • DOM2 Core specification - すべての主要ブラウザでよくサポートされています
  • DOM2 HTML specification - DOMとHTMLの間のバインディング
  • DOM3 Core specification - 一部の更新、すべての主要ブラウザでサポートされているわけではありません
  • HTML5 specification - DOM/HTMLバインディングが追加されました
296
T.J. Crowder

直接の親よりも遠い特定のタイプの要素を探している場合は、DOMが見つかるまで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;
}
30
RobG

プロパティpDoc.parentElementまたはpDoc.parentNodeはあなたに親要素を与えます。

12
Thor Jacobsen

これはあなたを助けるかもしれません。

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

var parentDiv = pDoc.parentElement

編集:これは時々parentNodeです。

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

2
LoganDark

要素の「本当の流れ」からそれらを除外しようとしているとき、要素の親を知ることは役に立ちます。

以下のコードはidが与えられた要素のparentの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 -->
0
vish0910