要素の親divを取得する


208

これは非常に簡単なはずですが、問題があります。子要素の親divを取得するにはどうすればよいですか?

私のHTML:

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

私のJavaScript:

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

私は考えていたdocument.parentparent.container、うまくいくと思いましたが、not definedエラーが出続けます。pDocが定義されていることに注意してください。特定の変数ではありません。

何か案は?

PS私は可能であればjQueryを避けたいと思います。

回答:


336

あなたはを探していますparentNode、それはElementから継承しNodeます:

parentDiv = pDoc.parentNode;

便利なリファレンス:

  • DOM2 Core仕様-すべての主要ブラウザで十分にサポートされています
  • DOM2 HTML仕様-DOMとHTMLの間のバインディング
  • DOM3 Core仕様-一部のアップデート、すべての主要ブラウザですべてがサポートされているわけではありません
  • HTML5仕様 -DOM / HTMLバインディングが含まれる

33

直接の親よりも離れた特定のタイプの要素を探している場合は、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;
}

jQueryの場合:el.closest(tagName)
Ullullu '

3
@Ullullu —見てみましょう、10,000行のライブラリまたは10行の関数ですか?;-)
RobG 2017年




-1

要素の親を知ることは、要素の「実際の流れ」からそれらを配置しようとするときに役立ちます。

以下のコードは、提供された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 -->
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.