Borislav Hadzhiev
Reading timeยท3 min
Photo from Unsplash
The "TypeError: 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>
Notice that the JS script tag is placed at the bottom of the body tag.
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 the error occurred.
getElementsByTagName
method on valid DOM elementsTo 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
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.
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
.
console.log(typeof null); // ๐๏ธ object
getElementsByTagName
property.Then we know we can safely call the getElementsByTagName
method on the object.
getElementsByTagName
correctly - it is case-sensitive and it is quite tricky to spell.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.