JavaScript: How to Detect if an Element Exists?

There are events in JavaScript we can use to capture the DOM elements (as variables).
But sometimes, we can't precisely detect when they will be complete (ready for DOM manipulation) using "only" the event (load, DOMContentLoaded, readystatechange, etc). Especially if they are injected dynamically.

---

Let's

Structure of using setInterval
The JavaScript basic coding looks like this: (function (d) { var interval; // for [setInterval] method; // the function to check the element function check() { var element_we_want_to_detect; if ( element_we_want_to_detect ) { // console.log("element is found"); // attach a callback or directly do something here clearInterval( interval ); // stop the timer } else { // still checking // do something else or just be quiet } } // repetitively call the [check] function above interval = setInterval( check, [duration] ); }(document));

Using setInterval with counter (as setTimeout substitute)
This is useful so that the timer won't run infinitely if the element we're looking for isn't actually in the HTML document (we forgot to put the proper name/place the element, or sumthin): (function (d) { var interval, counter = 0, limit = [integer]; // non-negative integer // the function to check the element function check() { var element_we_want_to_detect; counter += 1; // or counter++; if ( element_we_want_to_detect && counter < limit ) { // console.log( "Success. Element is found" ); // attach a callback or directly do something here clearInterval( interval ); // stop the timer } else if ( !element_we_want_to_detect && counter === limit ) { // console.log( "Limit has been reached. Cannot find the element." ); // add some callback to handle this clearInterval ( interval ); // stop the timer } else { // still checking // do something else or just be quiet } } // repetitively call the [check] function above interval = setInterval( check, [duration] ); }(document));

---

Let's use the basic method (without counter)

#1 Example

Working with id
For instance, we want to find an element with the id some_element.
(function (d) { var interval; function check() { var elm_id; if ( d.getElementById( "some_element" ) ) { /*\ \\\ Previously, the condition was using [length]. \\\ That would return error if the element "isn't there". \\\ So, I changed that. The condition above to avoid error: \\\ [cannot get property 'length' on null object] \\\ on [null object] event, it will return [false] \\\ on [not-null object] event, it will return [true] \*/ // define variable [elm_id] with the found element elm_id = d.getElementById( "some_element" ); // console.log("element is found"); // attach callback using that [elm_id] variable argument // example: success(elm_id); // ( FYI, [success] function can be placed outside this self-invoked scope. ) // Then function [success] will run with a proper received value. // Remember, we need to put the callback inside this [if] block. clearInterval( interval ); } } interval = setInterval( check, 100 ); // duration: 100ms }(document));

---

#2 Example

Working with class
We want to find out the existence of all elements with the class some_class thingy.
(function (d) { var interval; function check() { // this will be an array of elements var elm_classes = d.querySelectorAll( ".some_class.thingy" ); if ( elm_classes[0] !== "" && elm_classes[elm_classes.length - 1] !== "" ) { /*\ /// the first and the last array element aren't empty /// we can "just" check the first one [or] the last one though \*/ // console.log("elements are found"); // attach callback // pass that array of elements [elm_classes] to another function clearInterval( interval ); } } interval = setInterval( check, 100 ); // duration: 100ms }(document));

---

That's the basic idea of using the JavaScript setInterval method to detect whether a DOM element (or multiple elements) is (are) ready.

The basics and examples above start right away and self-invoked.
We can also attach an event before the "search" begins. Such as, window.onload.

---

This is the snapshot of a "simple" demo

I suppose you can re-type this and run on browser.

---

Informational

To get the DOM elements by tag name, we can use:
document.getElementsByTagName( "the_tag" )

Example:
We want to get all the div tags on the HTML document:
document.getElementsByTagName( "div" )
That will return a set of HTMLCollection. Not an array (of elements).
The HTMLCollection needs to be converted to an array so we can "fully access" any of them.
Related Q&A at Stack Overflow

There are also:

• document.getElementsByClassName( "the_class_name" ) (HTML5): returns array of elements with the specified class "the_class_name"
• document.getElementsByName( "the_name" ) (HTML4): returns array of elements with name attribute "the_name"
• element.getElementsByTagNameNS( "namespaceURI", "the_tag_name" ) (XML/XHTML): info at MDN