How to Check if Element Exists in DOM in JavaScript

To check whether a matching element exists, use the lookup that fits how you identify it. document.getElementById() returns the matching element or null, so test its result for a truthy value. Class and tag lookups return collections instead; check their length because even an empty collection is truthy.

Use getElementById() to find one matching element

Use getElementById() when you know an element’s unique id. It returns one Element when the ID matches, or null when no element has that ID. The ID is passed without a # prefix.

The following browser-page example looks for the link with ID help-link:

<a id="help-link" href="/help">Help</a>
<script>
  const helpLink = document.getElementById("help-link");
  const exists = helpLink !== null;
  console.log(exists);
</script>

The exists variable is Boolean. Boolean(helpLink) or !!helpLink also converts the result to true or false. Use !== null when you want the check to state explicitly what the lookup returns.

Check class, name, and tag matches

Use getElementsByClassName() to match a class, getElementsByName() to match a name attribute, and getElementsByTagName() to match an element tag. These methods use different attributes: for example, a class value belongs in class, while a form control’s name belongs in name.

<input class="search-field" name="query">
<script>
  const byClass = document.getElementsByClassName("search-field");
  const byName = document.getElementsByName("query");
  const byTag = document.getElementsByTagName("input");

  console.log(byClass.length > 0);
  console.log(byName.length > 0);
  console.log(byTag.length > 0);
</script>

getElementsByClassName() and getElementsByTagName() return live HTMLCollection objects. getElementsByName() returns a NodeList. A collection with no matches has length 0; it is still an object, not null. Use collection.length > 0 (or collection.length !== 0) to check for a match.

Understand lookup results and Boolean checks

A single-element lookup and a collection lookup need different existence checks. Convert a getElementById() result with Boolean(element) or compare it with null. For a collection from a class, name, or tag lookup, inspect length instead. Applying !! directly to a collection does not tell you whether it contains an element: both an empty collection and a nonempty collection are truthy.

Choose the API based on whether your question is “is there one element with this ID?” or “how many elements match this criterion?” If you need the elements afterward, keep the returned element or collection rather than converting it to a Boolean too early.

Run this example:

const matches = [{ id: "help-link" }];
const exists = matches.length > 0;
console.log(exists);

The example is a standalone illustration of the collection-length check; the DOM-specific snippets above are browser-page source and are not executed here.

Check whether a node is inside document.body

document.body.contains(node) returns a Boolean indicating whether node is the body itself or a descendant of it. It checks DOM-tree containment, not whether the node is visible on screen. A node can be in the body and still be hidden with CSS or otherwise not displayed.

Pass one node to contains(). If a lookup gave you a collection, choose an item first and account for the collection possibly having no items. For example, const matches = document.getElementsByName("query"); const isInBody = matches.length > 0 && document.body.contains(matches[0]); checks the first matching node only; it does not test every match. If your actual question is whether any matching node is in the body, check the items individually.