Uzyskiwanie elementu div elementu nadrzędnego

208

To powinno być naprawdę proste, ale mam z tym problem. Jak uzyskać rodzicielską div elementu potomnego?

Mój HTML:

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

Mój JavaScript:

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

Myślałam document.parentlub parent.containerzadziałałaby, ale wciąż pojawiają się not definedbłędy. Zauważ, że to pDocjest zdefiniowane, tylko niektóre jego zmienne.

Jakieś pomysły?

PS Wolałbym unikać jQuery, jeśli to możliwe.

OVERTONE
źródło

Odpowiedzi:

336

Szukasz parentNode, która Elementdziedziczy po Node:

parentDiv = pDoc.parentNode;

Przydatne referencje:

  • Specyfikacja DOM2 Core - dobrze obsługiwana przez wszystkie główne przeglądarki
  • Specyfikacja DOM2 HTML - powiązania między DOM a HTML
  • Specyfikacja DOM3 Core - niektóre aktualizacje, nie wszystkie obsługiwane przez wszystkie główne przeglądarki
  • Specyfikacja HTML5 - która zawiera teraz powiązania DOM / HTML
TJ Crowder
źródło
33

Jeśli szukasz określonego typu elementu, który znajduje się dalej niż bezpośredni rodzic, możesz użyć funkcji, która przechodzi do DOM, dopóki go nie znajdzie lub nie:

// 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;
}
RobG
źródło
with jQuery: el.closest (tagName)
Ullullu
3
@ Ullullu - zobaczmy, 10 000 linii biblioteki lub funkcja 10 linii? ;-)
RobG
14

Właściwość pDoc.parentElementlub pDoc.parentNodedostanie element nadrzędny.

Thor Jacobsen
źródło
0

To może ci pomóc.

ParentID = pDoc.offsetParent;
alert(ParentID.id); 
Sinan ÇALIŞKAN
źródło
-1

Znajomość elementu nadrzędnego elementu jest przydatna, gdy próbujesz ustawić je na „rzeczywistym przepływie” elementów.

Podany kod wyświetli identyfikator elementu nadrzędnego elementu, którego identyfikator jest podany. Może być stosowany do diagnozy niewspółosiowości.

<!-- 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 -->
vish0910
źródło