javascript中的contains方法

　　在研究一个多级菜单联动的js时，发现contains方法，以前没有碰到过，不知何意，然后在@司徒正美的博客发现有详细介绍，暂且摘录在此。

　　IE有许多好用的方法，后来都被其他浏览器抄袭了，比如这个contains方法。如果A元素包含B元素，则返回true，否则false。唯一不支持这个方法的是IE的死对头firefox。不过火狐支持compareDocumentPosition() 方法，这是W3C制定的方法，标准浏览器都支持，不过实用性性很差，因此没有什么人用，推广不开来。它的使用形式与contains差不多，但返回的不是 一个布尔值，而是一个很奇怪的数值，它是通过如下方式累加计算出来的：

BitsNumberMeaning
000000 0 元素一致
000001 1 节点在不同的文档（或者一个在文档之外）
000010 2 节点 B 在节点 A 之前
000100 4 节点 A 在节点 B 之前
001000 8 节点 B 包含节点 A
010000 16 节点 A 包含节点 B
100000 32 浏览器的私有使用

 

contains方法的应用：

 1  
 2 <!doctype html>
 3 <title>dom contains 方法 by 司徒正美</title>
 4 <meta charset="utf-8"/>
 5 <meta name="keywords" content="dom contains 方法 by 司徒正美" />
 6 <meta name="description" content="dom contains 方法 by 司徒正美" />
 7 
 8 <script type="text/javascript">
 9   window.onload = function(){
10     var A = document.getElementById('parent'),
11     B = document.getElementById('child');
12     alert(A.contains(B));
13     alert(B.contains(A));
14   }
15 </script>
16 <h2 style="text-align:center">contains方法</h2>
17 
18 <div id="parent">
19   <p>
20     <strong id="child" >本例子会在火狐中会报错。</strong>
21   </p>
22 </div>

firefox中compareDocumentPosition方法的应用：

 <!doctype html>
<title>dom contains 方法 by 司徒正美</title>
<meta charset="utf-8"/>
<meta name="keywords" content="dom contains方法 by 司徒正美" />
<meta name="description" content="dom contains方法 by 司徒正美" />
<script type="text/javascript">
  window.onload = function(){
    var A = document.getElementById('parent'),
    B = document.getElementById('child');
    alert(A.compareDocumentPosition(B));//B与A不相连，B在A的后面，B被A包含 4+16 = 20
    alert(B.compareDocumentPosition(A));//A与B不相连，A在B的前面，A包含B 2+8 = 10
  }
</script>
<h2 style="text-align:center">compareDocumentPosition方法</h2>

<div id="parent">
  <p>
    <strong id="child" >本例子请在标准浏览器中运行。</strong>
  </p>
</div>

兼容contains及compareDocumentPosition方法：

 1 var contains  =  function(a, b, itself){
 2          // 第一个节点是否包含第二个节点
 3          //contains 方法支持情况：chrome+ firefox9+ ie5+, opera9.64+(估计从9.0+),safari5.1.7+
 4          if(itself && a == b){
 5              return true
 6          }
 7          if(a.contains){
 8              if(a.nodeType === 9 )
 9                  return true;
10              return a.contains(b);
11          }else if(a.compareDocumentPosition){
12              return !!(a.compareDocumentPosition(b) & 16);
13          }
14          while ((b = b.parentNode))
15              if (a === b) return true;
16          return false;
17      }
posted @ 2013-11-06 10:18  特雷西one  阅读(35746)  评论(1)  编辑  收藏  举报