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

Bits Number Meaning
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      }

javascript中的contains方法和compareDocumentPosition方法的更多相关文章

  1. JavaScript中的match方法和search方法

    search在一个字串对象(string object)中查找关键词字串(规范表达式,regular expression),若匹配(即在目标字串中成功找到关键词)则返回关键词在目标字串中第一次出现的 ...

  2. JavaScript中的apply()方法和call()方法使用介绍

    1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(t ...

  3. Java8新特性(一)_interface中的static方法和default方法

    什么要单独写个Java8新特性,一个原因是我目前所在的公司用的是jdk8,并且框架中用了大量的Java8的新特性,如上篇文章写到的stream方法进行过滤map集合.stream方法就是接口Colle ...

  4. JS中的call()方法和apply()方法用法总结

    原文引自:https://blog.csdn.net/ganyingxie123456/article/details/70855586 最近又遇到了JacvaScript中的call()方法和app ...

  5. js中的splice方法和slice方法简单总结

    slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...

  6. JS中的call()方法和apply()方法用法总结（挺好 转载下）

    最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...

  7. Mapper类/Reducer类中的setup方法和cleanup方法以及run方法的介绍

    在hadoop的源码中,基类Mapper类和Reducer类中都是只包含四个方法:setup方法,cleanup方法,run方法,map方法.如下所示: 其方法的调用方式是在run方法中,如下所示: ...

  8. java 中的set方法和get方法的理解

    get的意思是获取,set的意思是设置. get方法和set方法是实现类的封装访问的很好的工具. 当类中的变量设为private 时,他的意思就是说,只能通过自身和子类的访问,但是对于别的其他的类来说 ...

  9. java8新特性：interface中的static方法和default方法

    java8中接口有两个新特性,一个是静态方法,一个是默认方法. static方法 java8中为接口新增了一项功能:定义一个或者多个静态方法. 定义用法和普通的static方法一样: public i ...

随机推荐

  1. aspx反射调用方法

    string name = base.Request["action"]; ]); if (obj2 != null) { s = obj2.ToString(); } 传入方法名 ...

  2. 【前端开发】】ES6属性promise封装js动画

    如下是我写的demo源码: 可以直接复制用浏览器打开看到效果哦: <!DOCTYPE html> <html> <head> <meta charset=&q ...

  3. Dubbo服务发布、引用

    DUBBO原理.应用与面经总结 Dubbo原理和源码解析之服务暴露 Dubbo原理和源码解析之服务引用 服务发布 服务的发布总共做了以下几件事,这个也可以从日志log上看出来: 暴露本地服务 暴露远程 ...

  4. Windows Server 2008搭建单域环境

    前言 一个典型的单域环境由主机,DC(Domain Controller域控制器).DNS服务器组成.DNS.DC都可以有多个,以实现负载均衡和容错 域中的计算机通过DNS解析域控制器,然后向域控制器 ...

  5. mybatis遍历map

    mytabis是可以遍历map的,试过很多其他的方法都不行,最终使用如下方法是可以的: 1.mapper.java如下(注意要加@Param注解,否则不行,我就在这里折腾了不少时间): int upd ...

  6. java线程基础巩固---多Product多Consumer之间的通讯导致出现程序假死的原因分析

    在上一次中已经实现一个生产者与消费者的初步模型(http://www.cnblogs.com/webor2006/p/8413286.html),但是当时只是一个生产者对应一个消费者,先贴下代码: p ...

  7. 河南省acm第九届省赛--《表达式求值》--栈和后缀表达式的变形--手速题

    表达式求值 时间限制:1000 ms | 内存限制:65535 KB 难度:3   描述 假设表达式定义为:1. 一个十进制的正整数 X 是一个表达式.2. 如果 X 和 Y 是 表达式,则 X+Y, ...

  8. 大数据之路week06--day01（Xshell和Xftp的下载与安装、配置JDK）

    上一节,介绍了VMware的下载与安装.安装CentOS 在企业中,我们大多数是不会有界面化操作的,领导也不会直接给你账户的,我们需要自己从外部链接到Linux系统进行操作,对Linux系统的操作都在 ...

  9. 负载均衡集群（LBC）

    一.LVS简介及工作模式1. LVS简介Linux Virtual Server,该软件的功能是实现LB(load balance) 2.LVS的三种工作模式 1)NAT模式(NAT) LVS 服务器 ...

  10. DTcmsV4.0分析学习——(2)系统框架

    2.1物理结构 共8个项目,Web为启动项 项目间相互依赖关系图: 2.2逻辑结构 DTcms V4.0轻量级CMS系统框架采用的是典型的三层架构(项目与三层架构并非直接对应关系,至于什么是三层架构这 ...