JavaScript Node contains() Method

What You’ll Learn

The Node.contains() method returns whether another node is this node or a descendant of it. Learn the inclusive self-check, null behavior, the MDN isInPage pattern, and how it compares to compareDocumentPosition().

Introduction

When you need a simple yes/no answer—“is this node inside that container?”— contains() is the clearest API. It walks the descendant relationship, not just direct children.

One beginner surprise: a node contains itself. If you only care about true descendants (or “is this in the page body?”), exclude the self case explicitly, as MDN’s isInPage example does.

Understanding contains()

MDN: contains() returns whether a node is a descendant of a given node— itself, a direct child, a grandchild, and so on.

• True — otherNode is this node or nested under it.
• False — not in the subtree (or otherNode is null).
• Inclusive — node.contains(node) is true.
• Not only Elements — works with Node; text nodes can be tested too.

📝 Syntax

const inside = node.contains(otherNode);

Parameters

• otherNode — The node to test. Not optional in the signature, but may be null (then the result is always false).

Return value

A boolean: true if otherNode is contained in the node, otherwise false.

⚖️ contains() vs compareDocumentPosition()

Examples Gallery

Examples follow MDN Node.contains() patterns. Use View Output or Try It Yourself for each case.

const parent = document.getElementById("parent");
const child = document.getElementById("child");

console.log(parent.contains(child)); // true

true

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

true

const left = document.getElementById("left");
const right = document.getElementById("right");

console.log(left.contains(right)); // false
console.log(right.contains(left)); // false

false
false

const host = document.getElementById("host");
const missing = document.getElementById("nope"); // null

console.log(host.contains(null));    // false
console.log(host.contains(missing)); // false

false
false

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

const el = document.getElementById("target");
console.log(isInPage(el));            // true
console.log(isInPage(document.body)); // false

true
false

🚀 Common Use Cases

• Click-outside / dismiss: is the event target inside a modal or menu?
• Confirm a node still lives under a known container before updating UI.
• Validate drag-and-drop drop targets within a region.
• Check whether a selection or focus target is inside an editor root.
• Guard helpers like isInPage without treating body as “in page” when unwanted.

🔧 How It Works

📝 Notes

• Baseline Widely available (MDN, since July 2015).
• Not Deprecated, Experimental, or Non-standard — no status banner required.
• Inclusive: exclude self when you need strict descendants.
• Related: getRootNode(), compareDocumentPosition(), parentNode, appendChild(), JavaScript hub.

💡 Best Practices