The javascript contains and compareDocumentPosition methods are used to determine whether HTML nodes are close.

Since then, I have done a lot of research on these methods and have used them in many occasions. In many tasks, they prove to be very useful (especially concerning the abstract DOM selector of structures ).
1. DOMElement. contains (DOMNode)
This method was first used in IE to determine whether the DOM Node is contained in another DOM Element.
This method is useful when you try to optimize CSS selector traversal (for example, "# id1 # id2. You can get the element through getElementById, and then use. contains () to determine whether # id1 actually contains # id2.
Note: If the DOM Node and DOM Element are consistent,. contains () returns true, although an Element cannot contain itself.
There is a simple execution package that can run on Internet Explorer, Firefox, Opera, and Safari.
Copy codeThe Code is as follows:
Function contains (a, B ){
Return a. contains? A! = B & a. contains (B ):!! (A. compareDocumentPosition (arg) & 16 );
}


2. NodeA. compareDocumentPosition (NodeB)
This method is part of DOM Level 3 specification, allowing you to determine the locations of two DOM nodes. This method is more powerful than. contains. One possible application of this method is to sort DOM nodes into a detailed and precise order.
Using this method, you can determine a series of information about the position of an element. All this information will return a Bit (Bit, Bit, also known as binary ).
People know little about those. Bitcode stores multiple data as a simple number (Note: 0 or 1 ). You finally open/close the number of individual (Translator's note: open/close corresponds to 0/1), will give you a final result.
The result returned from NodeA. compareDocumentPosition (NodeB) contains the information you can obtain.
Bits Number Meaning
000 0 elements are consistent
001 1 node in different documents (or one out of documents)
010 2 node B before node
100 4 node A before Node B
8 Node B contains node
000 16 node A contains Node B
32 private use of browsers
Now, this means a possible result is similar:
Copy codeThe Code is as follows:
<Div id = "a">
<Div id = "B"> </div>
</Div>
<Script>
Alert (document. getElementById ("a"). compareDocumentPosition (document. getElementById ("B") = 20 );
</Script>

Once one node A contains another node B, contains B (+ 16) and before B (+ 4), the final result is A number of 20. If you view the changes in bits, it will increase your understanding.
100 (4) + 010000 (16) = 010100 (20)
This, without a doubt, helps to understand a single most chaotic dom api method. Of course, his value is well deserved.
Currently, DOMNode. compareDocumentPosition is available in Firefox and Opera. However, there are some tips we can use to execute it in IE.
Copy codeThe Code is as follows:
// Compare Position-MIT Licensed, John Resig
Function comparePosition (a, B ){
Return a. compareDocumentPosition?
A. compareDocumentPosition (B ):
A. contains?
(! = B & a. contains (B) & 16) +
(! = B & B. contains (a) & 8) +
(A. sourceIndex> = 0 & B. sourceIndex> = 0?
(A. sourceIndex <B. sourceIndex & 4) +
(A. sourceIndex> B. sourceIndex & 2 ):
1 ):
0;
}

IE provides us with some available methods and attributes. Start by using the. contains () method (as discussed earlier) to give us results that contain (+ 16) or are included (+ 8. In IE, The. sourceIndex attribute corresponds to the position of the Element in the document in all DOM elements, for example, document.doc umentElement. sourceIndex = 0. Because of this information, we can complete two compareDocumentPosition difficulties: In Front (+ 2) and in back (+ 4 ). In addition, if an element is not in the current document,. sourceIndex will be equal to-1. Here is another answer (+ 1 ). Finally, we can infer from this process that if an element is equal to itself, an empty bitcode (+ 0) is returned ).
This function can be run in Internet Explorer, Firefox, and Opera. However, Safari has incomplete functions (because it only has the contains () method, but does not have the. sourceIndex attribute. We can only get include (+ 16), include (+ 8), and all other results will return (+ 1) representing a disconnection ).
PPK provides a great example of using the getElementsByTagNames method to make new features available. Let's adapt him to our new method:
Copy codeThe Code is as follows:
// Original by PPK quirksmode.org
Function getElementsByTagNames (list, elem ){
Elem = elem | document;
Var tagNames = list. split (','), results = [];

For (var I = 0; I <tagNames. length; I ++ ){
Var tags = elem. getElementsByTagName (tagNames [I]);
For (var j = 0; j <tags. length; j ++)
Results. push (tags [j]);
}

Return results. sort (function (a, B ){
Return 3-(comparePosition (a, B) & 6 );
});
}


We can now use it to create a site directory in order:
GetElementsByTagNames ("h1, h2, h3 ");
Although Firefox and Opera both adopt some initiative to implement this method. I still look forward to seeing more browsers to help push forward