JavaScript Node contains() Method

What Is contains()?

Node.contains(otherNode) returns a Boolean: true if otherNode is this node or a descendant (child, grandchild, …), otherwise false (MDN).

parent.contains(otherNode)

→ true  if otherNode === parent
         OR otherNode is under parent
→ false otherwise
→ false if otherNode is null

parent
 └─ child
     └─ grandchild   ← parent.contains(grandchild) === true

How to Use contains()

Call it on the possible ancestor and pass the node you want to test.

1. Get the ancestor node (for example a container or document.body).
2. Call ancestor.contains(otherNode).
3. Treat true as “same node or somewhere underneath.”
4. Remember null → false; self → true.

Pseudocode

function contains(self, other):
  if other is null:
    return false
  if other is self:
    return true
  walk up from other via parentNode
  return true if we reach self
  return false

Cheat Sheet

Keep these facts handy when testing DOM ancestry.

Live Preview

Run contains() checks on a small tree: nested child, self, null, outside node, or MDN’s isInPage idea.

Loading…

JavaScript Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

const parent = document.getElementById("parent");
const child = document.getElementById("child");
console.log(parent.contains(child)); // true

true

const el = document.getElementById("parent");
console.log(el.contains(el)); // true

true

const parent = document.getElementById("parent");
console.log(parent.contains(null)); // false

false

function isInPage(node) {
  return node === document.body
    ? false
    : document.body.contains(node);
}

console.log(isInPage(document.getElementById("child")));
console.log(isInPage(document.body));

true
false

const parent = document.getElementById("parent");
const outside = document.getElementById("outside");
console.log(parent.contains(outside)); // false

false

Performance Notes

Use contains() on user events (click, focus), not in a tight timer loop.

Key Takeaways