From then on, I have done a lot of research on these methods and have used them on many occasions. In many tasks, they are proven to be very useful (especially with regard to the abstract DOM selector of the structure).
1, Domelement.contains (Domnode)
This method was first used in IE to determine whether the DOM Node is contained in another Dom Element.
This is useful when trying to optimize the CSS selector traversal (like: "#id1 #id2"). You can get the element by getElementById and then use the. Contains () to determine whether the #id1 actually contains #id2.
Note: If Dom Node is consistent with the DOM element,. Contains () returns True, although an element cannot contain itself.
Here's a simple execution wrapper that can be run in: Internet Explorer, Firefox, Opera, and Safari.
Copy Code code 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, allowing you to determine the position of each other between 2 Dom Node. This method is stronger than. Contains (). One possible application of this method is to sort DOM Node into a detailed and precise order.
Using this method, you can determine a series of information about the position of an element. All of this information will return a bit, bit, and also called bits.
For those, people know very little. Bit code is the storage of multiple data as a simple number (translator Note: 0 or 1). You finally turn on/off the individual number (translator Note: On/off corresponds to 0/1), will give you a final result.
Here is the result returned from Nodea.comparedocumentposition (NodeB) that contains the information you can get.
Bits number Meaning
000 0 elements consistent
001 1 nodes in different documents (or one outside the document)
010 2 node B before node A
100 4 node A before node B
000 8 node B contains node A
000 16 node A contains node B
000 32 private use of browsers
Now, this means that a possible result is similar to:
Copy Code code as follows:
<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, containing B (+16) and before B (+4), the final result is the number 20. If you look at the changes in bits, you will increase your understanding.
100 (4) + 010000 (16) = 010100 (20)
This, no doubt, helps to understand the single most confusing DOM API method. Of course, his worth deserved.
Now, Domnode.comparedocumentposition is available in Firefox and Opera. However, there are some tricks that we can use to execute him in IE.
Copy Code code 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. Start by using the. Contains () method (as we discussed earlier) to give us a result that contains (+16) or is contained (+8). IE also has a. sourceindex property in all DOM elements 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 the Back (+4). In addition, if an element is not in the current document,. Sourceindex will be equal to-1, this gives us another answer (+1). Finally, through the inference of this process, we can determine if an element equals himself, and returns an empty bit code (+0).
This function can be run in Internet Explorer, Firefox, and Opera. But there is a disability in Safari (because he only has the contains () method, not the. sourceindex attribute. We can only get the inclusion (+16), is included (+8), all other results will be returned (+1) to represent a disconnect).
PPK provides a great example of how new functionality can be used by creating a Getelementsbytagnames method. Let's adapt him to our new approach:
Copy Code code 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 him to build the directory of a site 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 coming in to help push forward
