How to find and access parent nodes via JavaScript


Have you ever had to access a parent node from a given child node? In this example, we are going to traverse up the DOM tree starting from the button to look for the parent node with the name attribute itsMe.

Demo
My name is notMe

My name is itsMe

My name is notMeEither

My name is tryAgain

My name is sorryNotMe

My name is nopeSorry


Here is the HTML code. It’s just a series of embedded div elements with different names and the input button where we start to traverse up the DOM tree accessing each parent node and asking for it’s name attribute value. The onClick event of the button triggers the findParentNode and passes the name of the element we are looking for and the object itself which, in this case, is the button. This is the starting point where we will begin traversing up the DOM tree by accessing the parent nodes of each element and seeing if the name attribute matches what we are looking for.

  1. <div name="notMe" style="padding:10px;border:1px solid green;">
    
  2. My name is <b>notMe</b>
    
  3.     <div name="itsMe" style="padding:10px;border:1px solid blue;">
    
  4.     My name is <b>itsMe</b>
    
  5.         <div name="notMeEither" style="padding:10px;border:1px solid red;">
    
  6.         My name is <b>notMeEither</b>
    
  7.             <div name="tryAgain" style="padding:10px;border:1px solid purple;">
    
  8.             My name is <b>tryAgain</b>
    
  9.                 <div name="sorryNotMe" style="padding:10px;border:1px solid black;">
    
  10.                 My name is <b>sorryNotMe</b>
    
  11.                     <div name="nopeSorry" style="padding:10px;border:1px solid brown;">
    
  12.                     My name is <b>nopeSorry</b>
    
  13.                         <input type="button" value="Find Parent Object with name=itsMe" onClick="findParentNode('itsMe', this);">
    
  14.                     </div>
    
  15.                 </div>
    
  16.             </div>
    
  17.         </div>
    
  18.     </div>
    
  19. </div>

Here is the findParentNode JavaScript code:

  1. function findParentNode(parentName, childObj) {
  2.     var testObj = childObj.parentNode;
  3.     var count = 1;
  4.     while(testObj.getAttribute('name') != parentName) {
  5.         alert('My name is ' + testObj.getAttribute('name') + '. Let\'s try moving up one level to see what we get.');
  6.         testObj = testObj.parentNode;
  7.         count++;
  8.     }
  9.     // now you have the object you are looking for - do something with it
  10.     alert('Finally found ' + testObj.getAttribute('name') + ' after going up ' + count + ' level(s) through the DOM tree');
  11. }

In line 2, we access the parent node of the child element via the parentNode method which is the first div above the button named nopeSorry. We then begin a count of the number of times we traversed up the DOM tree and set it to 1 because we have already accessed the parent node once. The while loop will test if the name of the current node will match the name that we are looking for. If not, it moves up the DOM tree by accessing the next parent node and continues to look for the right name while increasing the count by 1 each time. Once it finds the right node, the function exits the while loop and alerts the node name along with the number of times it traversed up the DOM tree.

If you do not know the name of the parent element you are looking for you can also search using the tagName method. The tagName will return the value of the tag name of the given node such as A or DIV.

If you found that my code was helpful in any way, shape, or form and would like to buy me a beer, please use the Donate button below =) Cheers!





Published by

Allen Liu

Building websites is a passion of mine. During the course of my work, I have created some snippets of code that I hope will prove useful to other developers.

2 thoughts on “How to find and access parent nodes via JavaScript”

  1. Hi Allen,

    I’ve a query, I am new to javascript and am a Java developer.
    Could you please help me understand, when I see a .js file called in an html and one of the function inside .js is not called.
    for ex.) function abc(height, weight)
    Name of File of .js : mainpanel.js
    Name of html file: panelload.html

    I see only panelload.html loads mainpanel.js, but I dont see function abc called in this. How should I find the html in which function abc is called?

    Regards,
    Ashok

    1. Sorry Ashok for the delayed response but let me know if you are still experiencing this issue and I’ll take a quick look for you.

      Allen

Leave a Reply

Your email address will not be published. Required fields are marked *