HTML DOM compareDocumentPosition() Method

Element Object Reference Element Object

Example

Find out where one paragraph is positioned compared to another paragraph:

var p1 = document.getElementById("p1");
var p2 = document.getElementById("p2");
var x = p1.compareDocumentPosition(p2);

The result of x will be:

4

Try it yourself »

Definition and Usage

The compareDocumentPosition() method compares two nodes, and returns an integer describing where they are positioned in the document.

Look at the example above. The possible return values would specify:

1: No relationship, the two nodes do not belong to the same document.

2: The first node (p1) is positioned after the second node (p2).

4: The first node (p1) is positioned before the second node (p2).

8: The first node (p1) is positioned inside the second node (p2).

16: The second node (p2) is positioned inside the first node (p1).

32: No relationship, or the two nodes are two attributes on the same element.

Note: The return value could also be a combination of values. I.e. the returnvalue 20 means that p2 is inside p1 (16) AND p1 is positioned before p2 (4).


Browser Support

The numbers in the table specify the first browser version that fully supports the method.

Method
compareDocumentPosition() Yes 9.0 Yes Yes Yes

Syntax

node.compareDocumentPosition(node)

Parameter Values

Parameter Type Description
node Node object Required. Specifies the node to compare with the current node

Technical Details

Return Value: A Number, representing where two nodes are positioned compared to each other.

Possible return values:

1 (No relationship, the two nodes do not belong to the same document)

2 (The first node (p1) is positioned after the second node (p2))

4 (The first node (p1) is positioned before the second node (p2))

8 (The first node (p1) is positioned inside the second node (p2))

16 (The second node (p2) is positioned inside the first node (p1))

32 (No relationship, or the two nodes are two attributes on the same element)

DOM Version Core Level 1 Node Object

Element Object Reference Element Object


SHARE THIS PAGE

COLOR PICKER

colorpicker





Search w3schools.com:

Translate w3schools.com: