JavaScript: How to Detect if an Element Exists?

There are events in JavaScript as reference before we start to capture the DOM element: load or DOMContentLoaded or readystatechange, etc.

But sometimes, we can't solely depend on either one of those events to detect when the elements have been ready (available) for further DOM manipulation.

Especially if the element is injected dynamically.

---

So to answer that, we can use setInterval to wait and repetitively search the particular element(s) we need to find.

Using setInterval

Let's wrap it with anonymous auto-invoked function.

(function (d) { let interval // For keeping "setInterval" method. // Function to check the element. function check() { // The element we need to find. const elementWeNeedToDetect if (elementWeNeedToDetect) { console.log("Element is found"); // Attach a callback or directly do something here. clearInterval(interval) // Stop timer. } else { // Still checking. } } // Repetitively call the "check" function above. interval = setInterval(check, [delay in milliseconds]) })(document)

• More aboute setInterval() at MDN

Limiting setInterval with Counter

This is useful so that the timer won't run forever if the element is never to be found: (function (d) { let interval let counter = 0 const limit = 100 // Or other non-negative integer. // Function to check the element. function check() { // The element we need to find. const elementWeNeedToDetect // Increment counter. counter += 1 // Or counter++ if (counter >= limit) { console.warn("Limit is reached.") // Perhaps add callback to handle this. clearInterval (interval) // Stop timer. return // Do not continue to next line. } if (elementWeNeedToDetect) { console.log("Element is found."); // Attach a callback or directly do something here. clearInterval(interval) // Stop the timer. } else { // Still checking. } } // Repetitively call the "check" function above. interval = setInterval(check, 100) // Delay duration: 100ms. })(document)

---

Let's use the timer without the counter limiter and dive into the searching methods to get the element.

---

#1 Working with id

It can be done by using getElementById.

For instance, we want to find an element with the id element-id.

(function (d) { let interval function check() { const elementWeNeedToDetect = d.getElementById("element-id") if (elementWeNeedToDetect) { console.log("Element is found.") // Attach callback using "elementWeNeedToDetect". // Example: success(elementWeNeedToDetect) // Stop timer. clearInterval(interval) } } interval = setInterval(check, 100) // Delay duration: 100ms. })(document)

---

#2 Working with class

It can be done by using querySelector for just 1 element. If there are multiple elements with similar class in DOM, the first found from the NodeList will be returned.

For instance, the class of the element is .single-class. (function (d) { let interval function check() { const elementWeNeedToDetect = d.querySelector(".single-class") if (elementWeNeedToDetect) { console.log("Element is found.") // Attach callback using "elementWeNeedToDetect". // Example: success(elementWeNeedToDetect) // Stop timer. clearInterval(interval) } } interval = setInterval(check, 100) // Delay duration: 100ms. })(document)

---

#3 Working with multiple elements with similar class

It can be done by using querySelectorAll for multiple elements. This method will return NodeList. I put spread syntax assignment ([...]) to automatically convert it to Array.

For instance, the class of the element is .similar-class. (function (d) { let interval function check() { const elementWeNeedToDetect = [...d.querySelectorAll(".similar-class")] // We use "length" here because it is an array. if (elementWeNeedToDetect.length) { console.log("Elements are found.") // Attach callback using that "elementWeNeedToDetect". // Example: success(elementWeNeedToDetect) // Stop timer. clearInterval(interval) } } interval = setInterval(check, 100) // Delay duration: 100ms. })(document)

---

The Methods querySelector and querySelectorAll to Get the Element(s)

querySelector will return the DOM element and querySelectorAll will return the NodeList.

To convert NodeList into Array, so it will be iterable using reduce, map, filter, etc., we can implement [...NodeList] ➡️ Spread syntax. Just like the example above and more examples below.

Side note:

NodeList can use forEach method since July 2015.

ℹ️ More at MDN about NodeList — forEach()

Both querySelector and querySelectorAll can be used to get element by id

We need to put # (hashtag) in front of the element's id name to do it.

So the id of an element with id = element-id must be written as #element-id like so:

const querySelectorById = document.querySelector("#element-id") // "querySelectorById" variable will consist of element instance found in DOM. // Attribute "id" is supposed to be unique in DOM, // but we still can use "querySelectorAll": const querySelectorAllById = [...document.querySelectorAll("#element-id")] // "querySelectorAllById" variable will be an array // that consists of all elements found in DOM. // We can access the element by "querySelectorAllById[index]" // ➡️ "index" is zero based.

Both can be used to get element by its native tag, like div, p, a, etc.

const querySelectorByTag = document.querySelector("div") // "querySelectorByTag" variable will consist of first found "div" in DOM. const querySelectorAllByTag = [...document.querySelectorAll("div")] // "querySelectorAllByTag" variable will be an array // that consists of all "div" found in DOM. // We can access the element by "querySelectorAllByTag[index]" // ➡️ "index" is zero based.

Both can be also used to get element by its specific attribute.

For example we want to find all a with attribute target="_blank":

const querySelectorElm = document.querySelector("a[target='_blank']") // "querySelectorElm" variable will consist of first found "a[target='_blank']" const querySelectorElms = [...document.querySelectorAll("a[target='_blank']")] // "querySelectorElms" variable will be an array // that consists of all "a[target='_blank']" elements found in DOM. // We can access the element by "querySelectorAllByTag[index]" // ➡️ "index" is zero based.

• More about querySelector() at MDN
• More about querySelectorAll() at MDN

---

Combine with Event

Instead of using anonymous auto-invoked function, we can wrap it with event listener ➡️ addEventListener.

DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", () => { let interval // For keeping "setInterval" method. // Function to check the element. function check() { if (elementWeNeedToDetectIsFound) { console.log("Element is found.") // Attach a callback or directly do something here. clearInterval(interval) // Stop timer. } else { // Still checking. } } // Repetitively call the "check" function above. interval = setInterval(check, [delay duration]) })

load event:

window.addEventListener("load", () => { let interval // For keeping "setInterval" method. // Function to check the element. function check() { if (elementWeNeedToDetectIsFound) { console.log("Element is found.") // Attach a callback or directly do something here. clearInterval(interval) // Stop timer. } else { // Still checking. } } // Repetitively call the "check" function above. interval = setInterval(check, [delay duration]) })

• More aboute document at MDN
• More aboute window at MDN

---

Thank you for visiting.

I hope this is useful 🙂