Skip to main content

How to Resolve "TypeError: Cannot read properties of null (reading 'parentNode')" Error in JavaScript

The TypeError: Cannot read properties of null (reading 'parentNode') is a common error in front-end JavaScript. It occurs when you attempt to access the .parentNode property of an element that your script failed to find in the DOM. In simple terms, your code is trying to find the parent of an element that doesn't exist, and is working with a null value instead.

This guide will break down the two primary causes of this error: your script executing before the DOM is ready, and an incorrect selector. You will learn the definitive solutions for each, including the best practices for script placement and how to write defensive code that gracefully handles missing elements.

Understanding the Root Cause: null Has No Properties​

The error message is very literal. The .parentNode property is a reference that belongs to DOM element objects. The value null in JavaScript represents the intentional absence of an object, and as such, it has no properties at all. When your code tries to find an element with a method like document.getElementById() and fails, the method returns null.

Example of error:

// `child` will be `null` if no element with the ID 'child-element' exists.
const child = document.getElementById('child-element');

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

The code fails because it's trying to access the .parentNode property on null.

Cause 1 (Most Common): Script Executes Before the HTML is Parsed​

The most frequent cause of this error is placing your <script> tag in the <head> of your HTML document. The browser parses HTML from top to bottom. If your script runs before the browser has parsed the element you're looking for, that element won't exist in the DOM yet, and your query for it will return null.

Example of code with problem:

<!DOCTYPE html>
<html>
  <head>
    <script src="app.js"></script> <!-- ❌ Runs before the #child div is created -->
  </head>
  <body>
    <div id="parent"><div id="child"></div></div>
  </body>
</html>

Solution A: Move the <script> Tag to the End of the <body>​

This is the simplest fix. By moving your <script> tag to just before the closing </body> tag, you guarantee that the entire HTML document has been parsed before your script begins to run.

<!DOCTYPE html>
<html>
  <body>
    <div id="parent"><div id="child"></div></div>

    <!-- ✅ Good: The #child div exists before this script runs -->
    <script src="app.js"></script>
  </body>
</html>

Solution B: Use the defer Attribute on the <script> Tag​

This is the modern and often recommended best practice. The defer attribute tells the browser to download the script but to execute it only after the document has been fully parsed. This allows you to keep your scripts in the <head>.

<!DOCTYPE html>
<html>
  <head>
    <!-- ✅ Best Practice: Script is downloaded early but runs late -->
    <script src="app.js" defer></script>
  </head>
  <body>
    <div id="parent"><div id="child"></div></div>
  </body>
</html>

Solution C: Wrap Your Code in a DOMContentLoaded Event Listener​

This approach also allows your <script> to remain in the <head>. You wrap your DOM manipulation code in an event listener that waits for the DOMContentLoaded event, which fires when the initial HTML is ready.

// app.js
document.addEventListener('DOMContentLoaded', () => {
  // This code will only run after the entire DOM is ready
  const child = document.getElementById('child');
  
  if (child) {
    const parent = child.parentNode;
    console.log(parent);
  }
});

Cause 2: The Selector is Incorrect or the Element Doesn't Exist​

If your script is loading at the correct time but you're still getting the error, the problem is a simple bad selector. You might have a typo in the ID, or the element truly isn't in your HTML.

<div id="main-parent"><div id="main-child"></div></div>
// Typo in the ID: 'child' instead of 'main-child'
const child = document.getElementById('child'); // returns null

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

Solution: Check for null Before Accessing .parentNode​

A robust script should always be defensive. Before you try to interact with an element or its properties, you should first check that you actually found the element.

Solution with an if statement​

This solution prevents the TypeError and provides a clear, helpful error message in the console, making debugging much easier.

const child = document.getElementById('child');

if (child) {
  const parent = child.parentNode;
  console.log(parent);
} else {
  console.error("Error: The child element was not found in the DOM.");
}

Solution with Optional Chaining (?.)​

This is a more modern and concise syntax for the same check.

const child = document.getElementById('child');

// The parentNode property is only accessed if `child` is not null or undefined
const parent = child?.parentNode;

console.log(parent); // Output: undefined (no error)

Conclusion​

The TypeError: Cannot read properties of null (reading 'parentNode') error is a clear indication that your JavaScript is running at the wrong time or is looking for the wrong element.

To fix it:

  1. Ensure your script runs after the DOM is ready. The best way to do this is by adding the defer attribute to your <script> tag in the <head>, or by moving your <script> tag to the end of the <body>.
  2. Verify your selectors. Double-check the ID, class name, or CSS selector to ensure it matches an element in your HTML.
  3. Write defensive code. Always check if an element is null before you try to access its .parentNode, either with an if block or with the optional chaining (?.) operator.

Table of Contents