The ‘cannot read property firstChild of null’ error occurs in JavaScript when –
- You are calling the firstChild method of a DOM element that doesn’t exist.
- You have the script calling firstChild method placed above the HTML where the DOM element is defined.
Let’s have a look at each of these in detail below –
1. You Are Calling The firstChild Method Of A DOM Element That Doesn’t Exist
This is probably the most common cause of the ‘cannot read property firstChild of null’ error. Consider the following code snippet where we try to access the first child node of an element that doesn’t exist –
let someDiv = document.getElementById("someDiv");
let firstChildNode = someDiv.firstChild;This will cause an error because the ‘someDiv’ element doesn’t exist in the HTML document. Thus, calling the firstChild method on it will result in an error.
You can fix this error by making sure that the DOM element you are trying to access actually exists in the HTML document. You can do this using JavaScript –
if(someDiv){
let firstChildNode = someDiv.firstChild;
}else{
console.log("someDiv does not exist in the document");
}2. You Have The Script Calling firstChild Method Placed Above The HTML Where The DOM Element Is Defined
This is a fairly common mistake that developers make – they place their script tags at the top of the HTML document before any of the HTML elements are defined. This is not wrong per se but can cause problems if you are trying to access HTML elements from your JavaScript code.
Consider the following HTML document –
<html>
<head></head>
<body>
<script>
let someDiv = document.getElementById("someDiv");
let firstChildNode = someDiv.firstChild; //this will cause an error because "someDiv" isn"t defined yeT
</script>
<div id="someDiv">
<div>First Child</div>
</div>
</body>
</html>As you can see, the script tag is placed before the ‘someDiv’ element in the HTML document. This will cause an error because when the JavaScript code try to access ‘someDiv’, it won’t be defined yet. The browser will try to run the script before it has parsed the HTML document and thus, it won’t be able to find the ‘someDiv’ element.
You can fix this error by simply moving the script tag below the HTML element you are trying to access –
<html>
<head></head>
<body>
<div id="someDiv">
<div>First Child</div>
</div>
<script>
let someDiv = document.getElementById("someDiv");
let firstChildNode = someDiv.firstChild; //this will not cause an error because "someDiv" is defined
console.log(firstChildNode.textContent);
</script>
</body>
</html>Output:
“First Child”
There is a chance that you get an empty of a text value from the firstChild Node because of the white space between the tags. In that case, you can use the firstElementChild method to access the first child element.
Here is a code snippet demonstrating the same –
<html>
<head></head>
<body>
<div id="someDiv">
<div>First Child</div> //this div is the first child element of "someDiv"
</div>
<script>
let someDiv = document.getElementById("someDiv");
let firstChildNode = someDiv.firstElementChild; //this will not cause an error because "someDiv" is defined
console.log(firstChildNode.textContent);
</script>
</body>
</html>Output:
“First Child”
Please note that if any of these two methods is called on a node with no first child, they will return null. Therefore, you should always check if the returned value is null or not before accessing any of its properties.
Conclusion – cannot read property firstChild of null
The “Cannot read property ‘firstChild’ of null” error is caused when you try to access the firstChild property of a DOM element that doesn’t exist in the HTML document. You can fix this error by making sure that the DOM element you are trying to access actually exists in the HTML document.
Alternatively, you can also move your script tags at the bottom of the HTML document to make sure that the browser parses them after it has parsed the HTML document.
I hope this article was helpful and that you were able to fix the “Cannot read property ‘firstChild’ of null” error in your code. If you have any questions or comments, feel free to post them in the comments section below.