Отримання батьківського елемента елемента


208

Це повинно бути дуже просто, але у мене виникають проблеми. Як отримати батьківський поділ дочірнього елемента?

Мій 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, якщо можливо.

Відповіді:


336

Ви шукаєте parentNode, що Elementуспадковує від Node:

parentDiv = pDoc.parentNode;

Зручні посилання:

  • Специфікація DOM2 Core - добре підтримується всіма основними браузерами
  • Специфікація DOM2 HTML - прив'язка між DOM та HTML
  • Основна специфікація DOM3 - деякі оновлення, які підтримуються не всіма основними браузерами
  • Специфікація HTML5 - тепер у ній є прив'язки DOM / HTML

33

Якщо ви шукаєте певний тип елемента, який знаходиться далі від безпосереднього батька, ви можете використовувати функцію, яка піднімає 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




-1

Знання батьківського елемента корисно, коли ви намагаєтесь розташувати їх у "реальному потоці" елементів.

Нижче наведений код виводить ідентифікатор батьківського елемента, ідентифікатор якого надається. Може використовуватися для діагностики нерівностей.

<!-- 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 -->
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.