Getting the parent div of element

javascript html getelementbyid

2022-08-30 00:33:21

This should be really simple but I'm having trouble with it. How do I get a parent div of a child element?

My HTML:

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

My JavaScript:

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

I would have thought or would work but I keep getting errors. Note that the is defined, just not certain variables of it.document.parentparent.containernot definedpDoc

Any ideas?

P.S. I would prefer to avoid jQuery if possible.

答案 1

You're looking for parentNode, which Element inherits from Node:

parentDiv = pDoc.parentNode;

Handy References:

DOM2 Core specification - well-supported by all major browsers
DOM2 HTML specification - bindings between the DOM and HTML
DOM3 Core specification - some updates, not all supported by all major browsers
HTML5 specification - which now has the DOM/HTML bindings in it

答案 2

If you are looking for a particular type of element that is further away than the immediate parent, you can use a function that goes up the DOM until it finds one, or doesn't:

// 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;
}

Edit 2021

Element.closest is part of the DOM standard. It takes a selector as an argument and returns the first matching ancestor or null if there isn't one.