TypeError: Cannot read property ‘parentNode’ of Null in JavaScript

Posted on by Edward Anderson
TypeError: Cannot read property 'parentNode' of Null in JavaScript

This article will guide you about the cause and how to fix the “TypeError: Cannot read property ‘parentNode’ of Null” error. Generally, there is two reasons for this error: accessing “parentNode” on a null or inserting script tag before the element’s declarations. Let’s get started to find out how to solve this problem!

TypeError: Cannot read property ‘parentNode’ of Null in JavaScript

parentNode is a property in JavaScript that is included in any HTML element (node), it returns the parent element of the element that calls this property. Sometimes, you will encounter this error when working with the attribute “parentNode”. There may be several reasons:

  1. Accessing the property on a null but not a DOM element, maybe because you have used another method, but it returns null instead of a node
  2. Inserting the <script> tag before declaring the HTML elements.

According to the above explanation, we have two causes of the error. Next, we will show you how to solve the error with two solutions, each corresponding to a cause.

Reason 1: Accessing “parentNode” on an element which doesn’t exist

This is one of the most significant causes of the “TypeError: Cannot read property ‘parentNode’ error of Null”. The following example describes this cause in detail.

Example:

<html>
  <body>
    <h1 id="learnshareit">LearnShareIT</h1>
    <script type="text/javascript">
      // Get the target element but receive null
      let target = document.querySelector("target");
      alert(target.parentNode);
    </script>
  </body>
</html>

Output:

Uncaught TypeError: Cannot read properties of null (reading 'parentNode')

In the above code, we used the document.querySelector() method to get the target element whose id is “target”. But we receive null meaning that it does not exist. Furthermore, the way we get the element by id using the querySelector() method has been wrong, as it requires a selector but not the id only. In this case, you will encounter “TypeError: Cannot read property ‘parentNode’ of Null”.

It would help if you made sure that the Dom element that you use exists and can access the property.

In the following example, we will get the element with id “learnshareit” instead of “target”:

<html>
  <body>
    <h1 id="learnshareit">LearnShareIT</h1>
    <script type="text/javascript">
      // Get the target element but receive null
      let target = document.querySelector("learnshareit");
      alert(target.parentNode);
    </script>
  </body>
</html>

Output:

Uncaught TypeError: Cannot read properties of null (reading 'parentNode')

As you can see, the error still appears, do you know why? Because you are using querySelector() to get the element according to its id, not the method getElementById(). The querySelector() method requires a CSS selector so you cannot pass the id of the element into it because it will be understood as the tag name, not the id. And because there is no tag name named “learnshareit” so it returns null. To get an element by Id using selector, just add a hash (#) character before its name. For example:

<html>
  <body>
    <h1 id="learnshareit">LearnShareIT</h1>
    <script type="text/javascript">
      // Get the target element but receive null
      let target = document.querySelector("#learnshareit");
      alert(target.parentNode);
    </script>
  </body>
</html>

Output:

[object HTMLBodyElement]

Or you can use getElementById() to get the target by its ID, you just need to pass its id only and also remove the hash (#):

<html>
  <body>
    <h1 id="learnshareit">LearnShareIT</h1>
    <script type="text/javascript">
      // Get the target element but receive null
      let target = document.getElementById("learnshareit");
      alert(target.parentNode);
    </script>
  </body>
</html>

Output:

[object HTMLBodyElement]

Have you found the differences between these two methods? In the latter one, we neglect the hash character and only pass the id we want. So we suggest you should check if the element returned by those method getElementsByClassName, getElementById, getElementsByTagName and query selectors is not null (you can print out it to check null) before getting any property.

Reason 2: Insert script tag before declaring DOM elements

Error “TypeError: Cannot read property ‘parentNode’ of Null” occurs when you insert script tags before declaring DOM elements.

For instance:

<html>
  <body>
    <script type="text/javascript">
      let target = document.getElementById("learnshareit");
      alert(target.parentNode);
    </script>
    <h1 id="learnshareit">LearnShareIT</h1>
  </body>
</html>

Output:

Since we inserted the script tag before declaring the div element with the id “target”, the program will run the script before creating the element h1. To avoid the “TypeError: Cannot read property ‘parentNode’ of Null” error, always insert the script tag after declaring DOM elements. For example:

<html>
  <body>
    <h1 id="learnshareit">LearnShareIT</h1>
    <script type="text/javascript">
      let target = document.getElementById("learnshareit");
      alert(target.parentNode);
    </script>
  </body>
</html>

Output:

[object HTMLBodyElement]

As you can see, in the example above we have changed the order of the script tag ang the h1 tag so that the script will appear after the h1 element. Therefore, the error has been solved.

Summary

This article has explained what causes the TypeError: Cannot read property ‘parentNode’ of Null in JavaScript and how to solve it. We hope our article will be helpful to you. Have a good day.

Maybe you are interested:

Related Posts

Leave a Reply

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