Home >Web Front-end >JS Tutorial >javascript contains and compareDocumentPosition methods to determine whether there is a relationship between HTML nodes_javascript skills

javascript contains and compareDocumentPosition methods to determine whether there is a relationship between HTML nodes_javascript skills

WBOYOriginal: 2016-05-16 18:35:191010browse

Since then I have done a lot of research on these methods and have used them on many occasions. They prove to be very useful in many tasks (especially abstract DOM selectors regarding 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 trying to optimize CSS selector traversal (like: "#id1 #id2"). You can get the element via getElementById and then use .contains() to determine if #id1 actually contains #id2.
Note: If the 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.

Copy code The 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 the DOM Level 3 specification and allows 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). Your eventual on/off of individual numbers (Translator's Note: On/Off corresponds to 0/1) will give you a final result.
Here is the result returned from NodeA.compareDocumentPosition(NodeB) with the information you can get.
Bits Number Meaning
000 0 The elements are consistent
001 1 The node is in a different document (or one is outside the document)
010 2 Node B is before node A
100 4 Node A is in Node B Before
000 8 Node B Contains Node A
000 16 Node A Contains Node B
000 32 Private Use of Browser
Now, this means a possible result would be something like:

Copy code The code is as follows:

< ;div id="b">

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.
100 (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 execute it in IE.

Copy code The code is as follows:

 
// 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 < b .sourceIndex && 4 ) 
(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 a result that 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 works 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), is 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:

Copy the code The 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 build the directory of a site in order:
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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery Learning 4 Browser Event Model_jqueryNext article：jQuery Learning 4 Browser Event Model_jquery

See more

javascript contains and compareDocumentPosition methods to determine whether there is a relationship between HTML nodes_javascript skills

Related articles