TypeError: getElementsByTagName is not a function in JS

# TypeError: getElementsByTagName is not a function in JS

The "TypeError: getElementsByTagName is not a function" error occurs for multiple reasons:

Calling the getElementsByTagName() method on a value that is not a DOM element.
Placing the JS script tag above the code that declares the DOM elements.
Misspelling getElementsByTagName (it's case-sensitive).

typeerror getelementsbytagname is not a function

Here is an example of how the error occurs.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <div class="box">
      <p>Box 1</p>
      <p>Box 2</p>
    </div>
    <div class="box">
      <p>Box 3</p>
      <p>Box 4</p>
    </div>

    <!-- ✅ Your JS script here ✅ -->
    <script src="index.js"></script>
  </body>
</html>

Notice that the JS script tag is placed at the bottom of the body tag.

Had we placed the JS script tag above the code that declares the DOM elements, they wouldn't be accessible in the index.js file.

Here is the code in index.js.

index.js

Copied!
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box]

// ⛔️ TypeError: getElementsByTagName is not a function
const paragraphs = boxes.getElementsByTagName('p');

We called the Element.getElementsByTagName method on a NodeList and not a DOM element, so the error occurred.

# Only call the `getElementsByTagName` method on valid DOM elements

To solve the "getElementsByTagName is not a function" error, make sure to only call the getElementsByTagName method on valid DOM elements and place the JS script tag at the bottom of the body, after the DOM elements have been declared.

index.js

Copied!
const boxes = document.getElementsByClassName('box');
console.log(boxes); // 👉️ [div.box, div.box]

// ✅ Works
const paragraphs = boxes[0].getElementsByTagName('p');

console.log(paragraphs); // 👉️ [p, p]

By accessing the element at index 0 of the NodeList, we got back a DOM element, on which we can safely call the getElementsByTagName method.

# Check if the element exists before calling `getElementsByTagName`

If the element you're calling the method on sometimes doesn't exist, you can conditionally check if the element is there before calling the getElementsByTagName method.

For example, a basic DOM element has a type of object, so we can check if the value is an object and contains the getElementsByTagName property before calling the method.

index.js

Copied!
const box = null;

if (typeof box === 'object' && box !== null && 'getElementsByTagName' in box) {
  const result = box.getElementsByTagName('p');
}

Our if condition uses the logical AND (&&) operator, so for the if block to run, all of the conditions have to be met.

We first check if the box variable stores a value with a type of object because DOM elements have a type of object.

Then we check if the variable is not equal to null. Unfortunately, if you check the type of null - console.log(typeof null), you will get an "object" value back, so we have to make sure the value is not null.

index.js

Copied!
console.log(typeof null); // 👉️ object

The last thing we check for is that the object contains the getElementsByTagName property.

Then we know we can safely call the getElementsByTagName method on the object.

If the error persists, make sure you are spelling getElementsByTagName correctly - it is case-sensitive and it is quite tricky to spell.

# Conclusion

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.

TypeError: getElementsByTagName is not a function in JS