Javascript comparison document location

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.


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
000000 0 element consistency
000001 1 node in different documents (or one out of documents)
000010 2 node B before node
000100 4 node A before Node B
001000 8 Node B contains node
010000 16 node A contains Node B
100000 private use of 32 browsers

Now, this means a possible result is similar:


<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.

000100 (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.


// 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:


// 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.