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

avatar

Borislav Hadzhiev

Thu Oct 21 20212 min read

banner

Photo by Eddy Lackmann

Solve - Cannot read property 'firstChild' of Null #

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

  1. Accessing the firstChild property on a null value (a DOM element that doesn't exist).
  2. Placing the JS script tag above the HTML where the DOM elements are created.
index.js
const el = null; // โ›”๏ธ Cannot read properties of null (reading 'firstChild') console.log(el.firstChild);

To solve the "Cannot read property 'firstChild' of null" error, make sure you're using the correct id when getting the DOM element. The error often occurs when passing an invalid id to the getElementById method.

index.js
const el = document.getElementById('does-not-exist'); console.log(el); // ๐Ÿ‘‰๏ธ null // โ›”๏ธ Cannot read properties of null (reading 'firstChild') const first = el.firstChild;

We passed a non-existent id to the getElementById method, so it returned a null value. Accessing the firstChild property on a null value causes the error.

To solve the "Cannot read property 'firstChild' of null" error, insert the JS script tag at the bottom of the body tag. The JS script has to be ran after the DOM elements have been created.

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

The index.js script is executed before the html elements are created. This means that the div elements will not be accessible inside the index.js file.

index.js
const el = document.getElementById('box'); console.log(el); // ๐Ÿ‘‰๏ธ null // โ›”๏ธ Cannot read properties of null (reading 'firstChild') const first = el.firstChild;

Instead you should place the JS script tag at the bottom of the body tag, after the DOM elements are declared.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box"><div>Content 1</div></div> <!-- โœ… GOOD - div elements already exist โœ… --> <script src="index.js"></script> </body> </html>

Now we can access the div element inside the index.js file.

index.js
const el = document.getElementById('box'); console.log(el); // ๐Ÿ‘‰๏ธ div#box // โœ… Works const first = el.firstChild; console.log(first.textContent); // ๐Ÿ‘‰๏ธ "Content 1"
If you get a #text value back when using the firstChild property, you should probably use the firstElementChild property instead.

You might get #text response back or an empty string when accessing the firstChild property on the element, because a text node is inserted to preserve the whitespace between the outer and inner tags.

index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> </head> <body> <div id="box"> <!-- โŒ whitespace inserted here returns #text --> <div>Content 1</div> <div>Content 2</div> <!-- โŒ whitespace inserted here returns #text --> </div> <script src="index.js"></script> </body> </html>

To avoid this, you should use the firstElementChild property.

index.js
const el = document.getElementById('box'); console.log(el); // ๐Ÿ‘‰๏ธ div#box // โœ… firstElementChild works as expected โœ… const first = el.firstElementChild; console.log(first.textContent); // ๐Ÿ‘‰๏ธ "Content 1"
If the node on which you're accessing the firstChild or firstElementChild properties has no children, the properties return a value of null.

Conclusion #

The "Cannot read property 'firstChild' of null" error occurs when trying to access the firstChild property on a null value.

Variables that store a value of null are often returned from methods such as getElementById(), when the element does not exist in the DOM.

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