Получение родительского 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 определен, но не некоторые его переменные.

Есть идеи?

Постскриптум Я предпочел бы избежать JQuery, если это возможно.

Ответ 1

Вы ищете parentNode, который Element наследует от Node:

parentDiv = pDoc.parentNode;

Полезные ссылки:

спецификация DOM2 Core - хорошо поддерживается всеми основными браузерами
спецификация DOM2 HTML - привязки между DOM и HTML
DOM3 Core - некоторые обновления, не все поддерживаемые всеми основными браузерами
спецификация HTML5 - в которой теперь есть привязки DOM/HTML

Ответ 2

Если вы ищете определенный тип элемента, который находится дальше, чем непосредственный родитель, вы можете использовать функцию, которая поднимается до 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;
}

Ответ 3

Свойство pDoc.parentElement или pDoc.parentNode предоставит вам родительский элемент.

Ответ 4

var parentDiv = pDoc.parentElement

edit: в некоторых случаях это иногда parentNode.

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

Ответ 5

Это может вам помочь.

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

Ответ 6

Знание родительского элемента полезно, когда вы пытаетесь расположить их "реальный поток" элементов.

Ниже приведенный код выведет идентификатор родителя элемента, идентификатор которого указан. Может использоваться для диагностики несоосности.

<!-- 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 -->

Ответ 7

я написал маленький отрывок, чтобы пройти через DOM, чтобы найти первый соответствующий parentNode.

Надеюсь, это когда-нибудь кому-нибудь поможет.

(/¯◡ ‿ ◡) ⊃━ ☆ ﾟ. * ･｡ﾟ,

function getFirstParentMatch(element, selector) {
  if (!element) {return element};
  element.matches(selector) || (element = (element.nodeName.toLowerCase() === 'html' ? false : getFirstParent(element.parentNode, selector)));
  return element;    
}