Javascript comparison document location

Source: Internet
Author: User

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>
Alert (document. getElementById ("a"). compareDocumentPosition (document. getElementById ("B") = 20 );
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 ):
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
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.