Borislav Hadzhiev
Wed Oct 20 2021·2 min read
Photo by Cesar Armando
The "getElementsByTagName is not a function" error occurs for multiple reasons:
getElementsByTagName()
method on a value that is not a DOM
element.getElementsByTagName
(it's case sensitive).Here is an example of how the error occurs.
<!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>
index.js
file.Here is the code in index.js
.
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 we got the error back.
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.
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.
getElementsByTagName
method on it.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.
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.
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
.
getElementsByTagName
property.Then we know we can safely call the getElementsByTagName
method on the object.
getElementsByTagName
correctly - it's case sensitive and it's quite tricky to spell.