Javascript contains method, with demo

IE has many easy-to-use methods and is later copied by other browsers, such as the contains method. If element A contains Element B, true is returned; otherwise, false is returned. The only thing that does not support this method is the opposite of IE firefox.

<! Doctype html> <title> dom contains METHOD by SITU zhengmei </title> <meta charset = "UTF-8"/> <meta name = "keywords" content = "dom contains METHOD by SITU <meta name = "description" content = "dom contains METHOD by SITU zhengmei"/> <script type = "text/javascript"> window. onload = function () {var A = document. getElementById ('parent'), B = document. getElementById ('child '); alert (. contains (B); alert (B. contains (A) ;}</script> 






Tip: the code can be modified before running!

However, Firefox supports the compareDocumentPosition () method, which is developed by W3C and supported by standard browsers. However, it is not practical, so no one can use it and cannot be promoted. Its usage is similar to that of contains, but the returned value is not a Boolean value, but a very strange value. It is calculated in the following way:


 
 
 
   
    
  
 
   
    
  
 
   
    
   
 
  
 
   
 
    
Bits
 
    
Number
 
    
Meaning
 
   
 
  
 
 
  
 
   
 
    
000000
 
    
0
 
    
Element consistency
 
   
 
   
 
    
000001
 
    
1
 
    
Node in different documents (or one out of the document)
 
   
 
   
 
    
000010
 
    
2
 
    
Node B is before node.
 
   
 
   
 
    
000100
 
    
4
 
    
Node A is before Node B.
 
   
 
   
 
    
001000
 
    
8
 
    
Node B contains node
 
   
 
   
 
    
010000
 
    
16
 
    
Node A contains Node B
 
   
 
   
 
    
100000
 
    
32
 
    
Private Use of browsers
 
   
 
  

 


<! Doctype html> <title> dom contains METHOD by SITU zhengmei </title> <meta charset = "UTF-8"/> <meta name = "keywords" content = "dom contains METHOD by SITU <meta name = "description" content = "dom contains METHOD by SITU zhengmei"/> <script type = "text/javascript"> window. onload = function () {var A = document. getElementById ('parent'), B = document. getElementById ('child '); alert (. compareDocumentPosition (B); // B is not connected to A, B is behind A, B is contained by A 4 + 16 = 20 alert ( B. compareDocumentPosition (A); // A and B are not connected, A is in front of B, A contains B 2 + 8 = 10 }</script> 






Tip: the code can be modified before running!

PPK provides the following solutions.
Copy to ClipboardReference: [www.bkjia.com] if (window. Node & Node. prototype &&! Node. prototype. contains ){

Node. prototype. contains = function (arg ){

Return !! (This. compareDocumentPosition (arg) & 16)

}

}
I made a shorter one:
Copy to ClipboardReference: [www.bkjia.com] if (!! Window. find ){

HTMLElement. prototype. contains = function (B ){

Return this. compareDocumentPosition (B)-19> 0

}

}

<! Doctype html> <title> dom contains METHOD by SITU zhengmei </title> <meta charset = "UTF-8"/> <meta name = "keywords" content = "dom contains METHOD by SITU zhengmei "/> <meta name =" description "content =" dom contains METHOD by SITU zhengmei "/> <script type =" text/javascript "> if (!! Window. find) {HTMLElement. prototype. contains = function (B) {return this. compareDocumentPosition (B)-19> 0} window. onload = function () {var A = document. getElementById ('parent'), B = document. getElementById ('child '); alert (. contains (B); alert (B. contains (A) ;}</script> 






Tip: the code can be modified before running!

Copy to ClipboardReference: [www.bkjia.com] descendantOf: function (element, ancestor ){

If (element. compareDocumentPosition)

Return (element. compareDocumentPosition (ancestor) & 8) === 8;

If (ancestor. contains)

Return ancestor. contains (element) & ancestor! = Element;

While (element = element. parentNode)

If (element = ancestor) return true;



Return false;



},
Ruby's Louvre Source: http://www.cnblogs.com/rubylouvre