Solve - Cannot read property 'parentNode' of Null in JS

avatar

Borislav Hadzhiev

Sat Oct 23 20212 min read

Solve - Cannot read property 'parentNode' of Null #

The "Cannot read property 'parentNode' of null" error occurs for 2 reasons:

  1. Accessing the parentNode property on a null value - a DOM element that doesn't exist.
  2. Inserting the JS script tag above the HTML, where the DOM elements are declared.
index.js
const content = document.getElementById('does-not-exist'); console.log(content); // ๐Ÿ‘‰๏ธ null // โ›”๏ธ Cannot read properties of null (reading 'parentNode') const parentNode = content.parentNode;

To solve the "Cannot read property 'parentNode' of null" 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
<!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>

To solve the "Cannot read property 'parentNode' of null" error, place the JS script tag at the bottom of the body. The JS script tag should be ran after the DOM elements are created.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <!-- โ›”๏ธ BAD - script is ran before div is created โ›”๏ธ --> <script src="index.js"></script> <div> <div id="content">Content</div> </div> </body> </html>

The index.js file is executed before the two div elements are created, therefore you can't access the elements from the index.js file.

index.js
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
<!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>

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

index.js
const content = document.getElementById('content'); console.log(content); // ๐Ÿ‘‰๏ธ div#content // โœ… Works const parentNode = content.parentNode; console.log(parentNode); // ๐Ÿ‘‰๏ธ div

Things to note when using the parentNode property:

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

Conclusion #

The "Cannot read property 'parentNode' of null" error occurs when you access the parentNode property on a null value.

To solve the error, run the JS script tag after the DOM elements have been created and make sure you're using the correct identifier.

Join my newsletter

I'll send you 1 email a week with links to all of the articles I've written that week

Buy Me A Coffee