Node: compareDocumentPosition() method

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

The compareDocumentPosition() method of the Node interface reports the position of its argument node relative to the node on which it is called.

Syntax

js
compareDocumentPosition(otherNode)

Parameters

otherNode

The Node for which position should be reported, relative to the node.

Return value

An integer value representing otherNode's position relative to node as a bitmask combining the following constant properties of Node or 0 if otherNode is the same as this node:

Node.DOCUMENT_POSITION_DISCONNECTED (1)

Both nodes are in different documents or different trees in the same document.

Node.DOCUMENT_POSITION_PRECEDING (2)

otherNode precedes the node in either a pre-order depth-first traversal of a tree containing both (e.g., as an ancestor or previous sibling or a descendant of a previous sibling or previous sibling of an ancestor) or (if they are disconnected) in an arbitrary but consistent ordering.

Node.DOCUMENT_POSITION_FOLLOWING (4)

otherNode follows the node in either a pre-order depth-first traversal of a tree containing both (e.g., as a descendant or following sibling or a descendant of a following sibling or following sibling of an ancestor) or (if they are disconnected) in an arbitrary but consistent ordering.

Node.DOCUMENT_POSITION_CONTAINS (8)

otherNode is an ancestor of the node.

Node.DOCUMENT_POSITION_CONTAINED_BY (16)

otherNode is a descendant of the node.

Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC (32)

The result relies upon arbitrary and/or implementation-specific behavior and is not guaranteed to be portable.

Zero or more bits can be set, depending on which scenarios apply. For example, if otherNode is located earlier in the document and contains the node on which compareDocumentPosition() was called, then both the DOCUMENT_POSITION_CONTAINS and DOCUMENT_POSITION_PRECEDING bits would be set, producing a value of 10 (0x0A).

Example

js
const head = document.head;
const body = document.body;

if (head.compareDocumentPosition(body) & Node.DOCUMENT_POSITION_FOLLOWING) {
  console.log("Well-formed document");
} else {
  console.error("<head> is not before <body>");
}

Note: Because the result returned by compareDocumentPosition() is a bitmask, the bitwise AND operator must be used for meaningful results.

Specifications

Specification
DOM
# ref-for-dom-node-comparedocumentposition①

Browser compatibility

desktop mobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
compareDocumentPosition
Chrome – Full support
Chrome 2 (Release date: 2009-05-21)
footnote Full support
Edge – Full support
Edge 12 (Release date: 2015-07-29)
footnote Full support
Firefox – Full support
Firefox 1 (Release date: 2004-11-09)
footnote Full support
Opera – Full support
Opera 12.1 (Release date: 2012-11-20)
footnote Full support
Safari – Full support
Safari 4 (Release date: 2009-06-08)
footnote Full support
Chrome Android – Full support
Chrome Android 18 (Release date: 2012-06-27)
footnote Full support
Firefox for Android – Full support
Firefox for Android 4 (Release date: 2011-03-29)
footnote Full support
Opera Android – Full support
Opera Android 12.1 (Release date: 2012-10-09)
footnote Full support
Safari on iOS – Full support
Safari on iOS 3.2 (Release date: 2010-04-03)
footnote Full support
Samsung Internet – Full support
Samsung Internet 1 (Release date: 2013-04-27)
footnote Full support
WebView Android – Full support
WebView Android 4.4 (Release date: 2013-12-09)
footnote Full support
WebView on iOS – Full support
WebView on iOS 3.2 (Release date: 2010-04-03)
footnote Full support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

See also