Comparing Document Locations

<br />A great blog post by PPK two years ago that explains how the contains() and compareDocumentPosition() methods work in their respective browsers. Since then, I have done a lot of research on these methods and have used them on many occasions. They can prove to be very useful for many tasks (especially abstracting DOM selectors with structures).
1. DOMElement.contains(DOMNode)
This method was originally 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 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.
There is a simple executable wrapper that runs 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 and allows you to determine the relative position of two 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 sequence of information about an element's position. All this information will be returned as a bit code (Bit, also known as binary bit).
Of those, little is known. Bitcode is the storage of multiple data as a single number (Translator's note: 0 or 1). You end up turning on/off individual numbers, which will give you a final result.
Here is the result returned from NodeA.compareDocumentPosition(NodeB) with 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 is before Node B
001000 8 Node B contains Node A
010000 16 Node A contains Node B
100000 32 Private use of browsers Now, this means that a possible result is something like:
<div id="a">
<div id="b"></div>
</div>
<script>
alert( document.getElementById("a").compareDocumentPosition(document.getElementById("b")) == 20);
</script>
Once a node A contains another node B, contains B (16) and comes before B (4), 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 make sense of the single most confusing DOM API method. Of course, his value 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.
// 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. First, we use the .contains() method (as we discussed earlier) to give us the result of either containing ( 16 ) or being contained ( 8 ). IE also has a .sourceIndex property on all DOM Elements that corresponds to the element's position 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 our other answer (1). Finally, by extrapolating this process, we can determine that if an element is equal to itself, a null bit code (0) is returned.
This function works in Internet Explorer, Firefox, and Opera. But it has broken functionality in Safari (because it only has a contains() method, but no .sourceIndex property. We can only get contains (16), is contained by (8), and all other results will return (1) indicating a break).
PPK provides a great example of making new functionality available by creating a getElementsByTagNames method. Let's adapt it to our new method:

We can now use this to build a site's directory in order:
getElementsByTagNames("h1, h2, h3");
Although Firefox and Opera have taken some initiative to implement this approach. I still look forward to seeing more browsers come in to help move things forward.
Comparing Document Position
// 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);
});
}

<<: Docker configures the storage location of local images and containers

>>: CSS scroll bar style modification code

Windows Server 2008 Tutorial on Monitoring Server Performance

Comparing Document Locations

Windows Server 2008 Tutorial on Monitoring Server Performance

Detailed explanation of CSS text decoration text-decoration & text-emphasis

Summary of Linux commands commonly used in work

Detailed example of getting the maximum value of each group after grouping in MySQL

Java uses Apache.POI to export HSSFWorkbook to Excel

Element table header row height problem solution

mySQL server connection, disconnection and cmd operation

Summary of some common techniques in front-end development

Detailed explanation of the use of find_in_set() function in MySQL

Practical skills that must be mastered in calling UNI-APP components in the easycom mode

Recommend

CSS fixes the container level (div...) tag in one position (on the far right of the page)

The perfect solution for highlighting keywords in HTML

Building an image server with FastDFS under Linux

Detailed explanation of error handling examples in MySQL stored procedures

33 of the best free English fonts shared

Sample code for displaying a scroll bar after the HTML page is zoomed out

Analyzing Linux high-performance network IO and Reactor model

Installation and use of mysql mycat middleware

How to create a style guide for your website in web interface design (with pictures and text)

React+Antd implements an example of adding, deleting and modifying tables

Summary of MySQL ALTER command knowledge points

Tutorial on installing PHP on centos via yum

HTML tutorial, easy to learn HTML language (2)

Detailed explanation of Nginx log customization and enabling log buffer

How to call the interrupted system in Linux