Cannot read properties of null (reading 'parentNode') in JS

# Cannot read properties of null (reading 'parentNode') in JS

The "Cannot read properties of null (reading 'parentNode')" error occurs for 2 reasons:

Accessing the parentNode property on a null value (a DOM element that doesn't exist).
Inserting the JS script tag above the HTML, where the DOM elements are declared.

cannot read property parentnode of null

Here is an example of how the error occurs.

index.js

Copied!
const content = document.getElementById('does-not-exist');
console.log(content); // 👉️ null

// ⛔️ Uncaught TypeError: Cannot read properties of null (reading 'parentNode')
const parentNode = content.parentNode;

The code for this article is available on GitHub

We attempted to access the parentNode property on a null value which caused the error.

# Make sure the DOM element exists before accessing `parentNode`

To solve the error, make sure to use the correct id when getting the DOM element.

The error often occurs when passing an invalid id to the getElementById method.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <!-- 👇️ `id` should match your JS code -->
      <div id="content">Content</div>
    </div>

    <script src="index.js"></script>
  </body>
</html>

The id of the element in your HTML code should match the id you specified in the call to the document.getElementById() method in your JavaScript code.

# Place the JS script tag at the bottom of the body tag

Place the JS script tag at the bottom of the body.

The JS script tag should run after the DOM elements have been declared.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <!-- ⛔️ BAD - script is run before div is created ⛔️ -->
    <script src="index.js"></script>

    <div>
      <div id="content">Content</div>
    </div>
  </body>
</html>

The code for this article is available on GitHub

The index.js file is run before the two div elements are created, so you can't access the elements inside of the index.js file.

index.js

Copied!
const content = document.getElementById('content');
console.log(content); // 👉️ null

// ⛔️ Cannot read properties of null (reading 'parentNode')
const parentNode = content.parentNode;

You should place the index.js script tag at the bottom of the body tag, after all the DOM elements have been declared.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div>
      <div id="content">Content</div>
    </div>

    <!-- ✅ GOOD - divs are already created ✅ -->
    <script src="index.js"></script>
  </body>
</html>

place js script tag at bottom of body tag

The code for this article is available on GitHub

Now the div elements will be accessible inside of the index.js file.

index.js

Copied!
const content = document.getElementById('content');
console.log(content); // 👉️ div#content

// ✅ Works
const parentNode = content.parentNode;
console.log(parentNode); // 👉️ div

accessing parentnode attribute successfully

The code for this article is available on GitHub

HTML code is parsed from top to bottom, so the script tag has to be placed at the bottom of the body tag, after all of the DOM elements it needs to access.

Things to note when using the parentNode property:

Trying to access the parentNode property on a Document or DocumentFragment nodes returns null - they can never have a parent.
The property returns null if the HTML element has been created but not yet attached to the DOM.

# Conclusion

To solve the "Cannot read properties of null (reading 'parentNode')" error, make sure to use the correct id when getting the DOM element.

The error often occurs when passing an invalid id to the getElementById method.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

Cannot read properties of null (reading 'parentNode') in JS