zoukankan      html  css  js  c++  java
  • javascript中的contains方法和compareDocumentPosition方法

    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>
    复制代码

    解决方法:

    if (window.Node && Node.prototype && !Node.prototype.contains){
       Node.prototype.contains = function (arg) {
         return !!(this.compareDocumentPosition(arg) & 16)
       }
     }

    更短的:

    if(!!window.find){
      HTMLElement.prototype.contains = function(B){
        return this.compareDocumentPosition(B) - 19 > 0
      }
    }

    兼容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      }
    复制代码
  • 相关阅读:
    Memcached通信协议
    quartz在集群环境下的最终解决方案
    在中间层 .NET 应用程序中通过授权管理器使用基于角色的安全
    微软MVC框架实战:开源的JS库Knockout
    EL表达式
    Hadoop安装配置
    Memcached安装
    Maven对不同的测试环境用不同的参数进行打包
    项目管理案例:赢与非输之别
    十年WEB技术发展历程
  • 原文地址:https://www.cnblogs.com/ljk001/p/8098113.html
Copyright © 2011-2022 走看看