HTML DOM compareDocumentPosition() Method Last Updated : 13 Jun, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report The DOM compareDocumentPosition() method is used to compare two nodes and it returns an integer describing where they are positioned in the document. Syntax: node1.compareDocumentPosition(node2) Return Value : This return an integer value and their meaning as follows : 1: This means that the two nodes do not belong to the same document.2: This means that the two nodes node1 is positioned after node2.4: This means that the two nodes node1 is positioned before node2.8: This means that the two nodes node1 is positioned inside node2.16: This means that the two nodes node2 is positioned inside node1.32: This means that the two nodes have no relationship or they are two attributes on the same element. Example-1: This will return only single value. HTML <!DOCTYPE html> <html> <style> div { width: 90%; height: 60%; padding: 20px; border: 2px solid green; font-weight: bold; } #ans { background-color: lightgrey; display: block; width: 100px; font-weight: bold; height: 20px; padding: 9px; color: green; float: right; margin-top: -20px; } #res { color: black; } </style> <body> <div> <p id="p1"> This is first paragraph </p> <p id="p2"> This is second paragraph </p> <p id="p3"> This is third paragraph </p> <p id="ans">Answer : <span id="res"></span></p> </div> <br> <input type = button onclick="myFunction()" value = "Click Me.!" /> <br> <script> function myFunction() { var x = p1.compareDocumentPosition(p2); document.getElementById("res").innerHTML = x; } </script> </body> </html> Output: Before click on the Button: After click on the button: Example-2: This will return combination of two values. HTML <!DOCTYPE html> <html> <style> div { width: 90%; height: 60%; padding: 20px; border: 2px solid green; font-weight: bold; } #ans { background-color: lightgrey; display: block; width: 100px; font-weight: bold; height: 20px; padding: 9px; color: green; float: right; margin-top: -20px; } #res { color: black; } </style> <body> <div> <p id="p1">This tutorial is on <span id="p2"> HTML | DOM compareDocumentPosition() Method </span> on GeeksforGeeks.! </p> <p id="ans"> Answer : <span id="res"></span> </p> </div> <br> <input type=button onclick="myFunction()" value="Click Me.!" /> <br> <script> function myFunction() { var x = p1.compareDocumentPosition(p2); document.getElementById("res").innerHTML = x; } </script> </body> </html> Output: Before Click on the Button: After Click on the Button: Answer will be 20. '4' means that first node is positioned before the second node and '16' second node is positioned inside the first node. Note: The return value can be a combination of values. i.e. if the return value is 20 that means p2 is inside p1, '16' and p1 is positioned before p2 '4'. Supported Browsers: Google Chrome 1 and aboveEdge 12 and aboveInternet Explorer 9 and aboveFirefox 1 and aboveOpera 12.1 and aboveSafari 4 and above Comment More infoAdvertise with us K kundankumarjha Follow Improve Article Tags : Web Technologies HTML HTML-DOM HTML-Methods Similar Reads HTML | DOM Style columns Property HTML DOM Style columns Property is used to set the width of the column & column count. Syntax: To Return the column property: object.style.columns To Set the column property: object.style.columns= "auto|columnwidth columncount| initial|inherit" Property Values: Auto: Sets both values of width 2 min read HTML | DOM Style height Property HTML DOM Style height Property is similar to CSS Height Property but it is used to set or get height of an element dynamically. Syntax : To set the height property : object.style.height = auto|length|%|initial|inherit;To get height property value: object.style.height Property Values: ValueDescriptio 2 min read HTML DOM Base Object The Base Object in HTML DOM is used to represent the HTML <base> element. This tag is used to set or get the properties of <base> element. This element can be accessed by using getElementById() method. Syntax: document.getElementById("Base_ID"); This "Base_ID" is assigned to HTML <bas 2 min read HTML | DOM Meta Object The DOM Meta Object is used to represent the HTML <meta> element. The Meta element is accessed by getElementById().Properties: Name attribute: This attribute is used to define the name of property.http-equiv attribute: This attribute is used to get http response message header.Scheme attribute 2 min read HTML | DOM TouchEvent altKey Property The TouchEvent altKey property is a read-only property and used for returning a Boolean value which indicates whether or not the "ALT" key was pressed when a touch event was triggered. The TouchEvent altKey property mostly returns false because generally, touch devices do not have an alt key. Syntax 2 min read HTML | DOM MouseEvent screenY Property The MouseEvent screenY property is a read-only property and used for returning the vertical coordinate of the mouse pointer when an event was triggered. Syntax : event.screenY Return Value: It returns a number which represents the vertical coordinate of the mouse pointer in pixels. Below program ill 1 min read HTML | DOM touchcancel Event The touchcancel event is used to execute a script when the touch event gets interrupted. It is considered a good practice to include the touchcancel event to clean up the code if the devices interrupt a touch event at different actions.Supported Tags All HTML elements supported by this event. Suppor 1 min read HTML DOM childNodes Property The childNodes property returns a node's child nodes as a nodeList object. White spaces and comments are also considered as nodes. The nodes are assigned index numbers, starting from 0. Searching and sorting operations can be performed using index number on the node list. Syntax: elementNodeReferenc 2 min read HTML DOM MouseEvent pageX Property The MouseEvent.pageX property returns the horizontal coordinate (in pixels) of the mouse pointer, relative to the entire document (not just the viewport), when a mouse event occurs. This value includes any horizontal scrolling that has been doneSyntax: event.pageXReturn Values: It returns the horizo 1 min read HTML | DOM MouseEvent offsetY Property The MouseEvent offsetY property is a read-only property and is used for returning the y-coordinate of the mouse pointer, relative to the target element. The MouseEvent offsetY property returns a number which represents the vertical coordinate of the mouse pointer, in pixels with respect to the scree 1 min read Like