Notes on Day 30 of 30 Days of JavaScript

• notes • series • javascript • javascript30

I have reached the end of this challenge! Thanks Wes for this wonderful initiative :-)

Table of Contents

Lessons Learned

Node.parentNode

It returns the immediate parent element Node based from the DOM tree structure.

It also returns null if the node has just been created and is not yet attached to the tree.

<style type="text/css">
  div {
  border: 1px solid #CCC;
  display: block;
  padding: 2rem;
  cursor: pointer;
}

.one { background: pink; }
.two { background: yellow; }
.three { background: orange; }
</style>

<div class="one">
  <div class="two">
    <div class="three">
    </div>
  </div>
</div>

document.querySelector('.three').parentNode
> <div class="two">...</div>

document.querySelector('.two').parentNode
> <div class="one">...</div>

document.querySelector('.one').parentNode
> <body>...</body>

Getting the parent node of the <html> element returns the document interface.

document.querySelector('html').parentNode
> #document

References

Twitter, LinkedIn