javascript compare document location_javascript skills

1. DOMElement.contains(DOMNode)

This method was first used in IE to determine whether a DOM Node is contained in another DOM Element.

This method is useful when trying to optimize CSS selector traversal (like: "#id1 #id2"). You can get the element via getElementById and then use .contains() to determine whether #id1 actually contains #id2.

Note: If DOM Node and DOM Element are consistent, .contains() will return true , although an element cannot contain itself.

Here is a simple execution wrapper that can run in: 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 the DOM Level 3 specification, allowing you to determine the mutual position between 2 DOM Nodes. This method is more powerful than .contains(). One possible application of this method is to sort DOM Nodes into a specific 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 code (Bit, also known as binary bit).

Little is known about those. Bit code stores multiple data as a simple number (Translator's Note: 0 or 1). You end up opening/closing individual numbers (Translator's Note: Opening/closing corresponds to 0/1), which will give you a final result.

Here is the result returned from NodeA.compareDocumentPosition(NodeB), containing the information you can get.

Bits Number Meaning
000000 0 Elements are consistent
000001 1 Nodes are in different documents (or one is outside the document)
000010 2 Node B is before node A
000100 4 Node A precedes node B
001000 8 Node B contains node A
010000 16 Node A contains node B
100000 32 Private use of browser

Now, this means a possible The result is similar to:

 

Once a node A contains another node B, contains B (16) and is before B (4), then the final result is the number 20. If you look at what happens to the bits, it will increase your understanding.

000100 (4) 010000 (16) = 010100 (20)

This, without a doubt, helps to understand the single most confusing DOM API method. Of course, his worth is well deserved.

DOMNode.compareDocumentPosition is now available in Firefox and Opera. However, there are some tricks we can use to implement it in IE.


// Compare Position - MIT Licensed, John Resig
function comparePosition(a, b){
return a.compareDocumentPosition ?
a.compareDocumentPosition(b) :
a.contains ?
( a != b && a.contains(b) && 16 )
( a != b && b.contains(a) && 8 )
( a.sourceIndex >= 0 && b.sourceIndex >= 0 ? (a.sourceIndex (a.sourceIndex > b.sourceIndex && 2) :
1) : 🎜> 0;
}
IE provides us with some methods and properties that we can use. To start, use the .contains() method (as we discussed earlier) to give us the result of contains (16) or is contained (8). IE also has a .sourceIndex attribute on all DOM Elements that corresponds to the position of the element in the document, for example: document.documentElement.sourceIndex == 0. Because we have this information, we can complete two compareDocumentPosition puzzles: in front (2) and in back (4). Additionally, if an element is not in the current document, .sourceIndex will be equal to -1, which gives us another answer (1). Finally, by extrapolating this process, we can determine 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. But it has incomplete functionality in Safari (because it only has the contains() method and no .sourceIndex attribute. We can only get Contains (16), Contained (8), and all other results will return (1) representing a disconnect).

PPK provides a great example of making new functionality available by creating a getElementsByTagNames method.Let's adapt it into 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       var tags = elem.getElementsByTagName( tagNames[i] ); for ( var j = 0; j results.push( tags[j] );                                                                           > return results.sort(function(a, b){
return 3 - (comparePosition(a, b) & 6);
});
}
We can now use it to press Construct a site's directory sequentially:


getElementsByTagNames("h1, h2, h3");
Although Firefox and Opera have taken some initiatives to implement this method. I'm still looking forward to seeing more browsers come in to help move forward.