javascript中的contains方法和compareDocumentPosition方法
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方法的更多相关文章
- JavaScript中的match方法和search方法
search在一个字串对象(string object)中查找关键词字串(规范表达式,regular expression),若匹配(即在目标字串中成功找到关键词)则返回关键词在目标字串中第一次出现的 ...
- JavaScript中的apply()方法和call()方法使用介绍
1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(t ...
- Java8新特性(一)_interface中的static方法和default方法
什么要单独写个Java8新特性,一个原因是我目前所在的公司用的是jdk8,并且框架中用了大量的Java8的新特性,如上篇文章写到的stream方法进行过滤map集合.stream方法就是接口Colle ...
- JS中的call()方法和apply()方法用法总结
原文引自:https://blog.csdn.net/ganyingxie123456/article/details/70855586 最近又遇到了JacvaScript中的call()方法和app ...
- js中的splice方法和slice方法简单总结
slice:是截取用的 splice:是做删除 插入 替换用的 slice(start,end): 参数: start:开始位置的索引 end:结束位置的索引(但不包含该索引位置的元素) 例如: va ...
- JS中的call()方法和apply()方法用法总结（挺好 转载下）
最近又遇到了JacvaScript中的call()方法和apply()方法,而在某些时候这两个方法还确实是十分重要的,那么就让我总结这两个方法的使用和区别吧. 1. 每个函数都包含两个非继承而来的方法 ...
- Mapper类/Reducer类中的setup方法和cleanup方法以及run方法的介绍
在hadoop的源码中,基类Mapper类和Reducer类中都是只包含四个方法:setup方法,cleanup方法,run方法,map方法.如下所示: 其方法的调用方式是在run方法中,如下所示: ...
- java 中的set方法和get方法的理解
get的意思是获取,set的意思是设置. get方法和set方法是实现类的封装访问的很好的工具. 当类中的变量设为private 时,他的意思就是说,只能通过自身和子类的访问,但是对于别的其他的类来说 ...
- java8新特性：interface中的static方法和default方法
java8中接口有两个新特性,一个是静态方法,一个是默认方法. static方法 java8中为接口新增了一项功能:定义一个或者多个静态方法. 定义用法和普通的static方法一样: public i ...
随机推荐
- SAP-参数（条件表）配置教程–GS01/GS02/GS03
转载:http://www.baidusap.com/abap/others/2849 在SAP开发中,某段代码运行可能需要满足某个条件,通常解决办法有两种:一种是在代码中写死限制条件,此种方式当限制 ...
- MM-发票校验与收货的差异处理
SAP FI-财务发票校验修改金额后没有进入差异科目问题:公司新建物料采购订单,在MM科目自动确定配置完成后,做发票校验时,修改金额没修改数量时,差异进入了原材料科目 换采购订单继续测试时,修改金额没 ...
- MySQL常见问题集锦及注意事项
一.表设计上的坑 1.字段设计 1.1 字段类型设计 尽量使用整型表示字符串: `INET_ATON(str)`,address to number `INET_NTOA(number)`,numbe ...
- springcloud工程建立 父工程+公用子模块+微服务提供模块
建立 Java Working Set:工程多的时候可以展开收缩,方便管理 切换到Package Explorer视图,并点击视图右侧下箭头,选择Working Sets,如下图: 建立父工程,将后续 ...
- 2019-ACM-ICPC-沈阳区网络赛-K. Guanguan's Happy water-高斯消元+矩阵快速幂
2019-ACM-ICPC-沈阳区网络赛-K. Guanguan's Happy water-高斯消元+矩阵快速幂 [Problem Description] 已知前\(2k\)个\(f(i)\),且 ...
- G1混合式GC与三色标记算法详解【纯理论】
继续基于上一次https://www.cnblogs.com/webor2006/p/11146273.html的理论进一步了解G1. G1收集概览: G1算法将堆划分为若干个区域(Region),它 ...
- python（列表及列表的相关操作、元组和range）
1.什么是列表 列表是一个课表的数据类型 列表有[]来表示,每一项元素用逗号隔开,列表什么都能装.是能装对象的对象. 列表可以装大量数据. 2.列表的索引和切片 列表和字符串一样,也有索引和切片.只不 ...
- flask中使用ajax 处理前端请求，每隔一段时间请求不通的接口，结果展示同一页面
需求: flask中使用ajax 处理前端请求,每隔一段时间请求不通的接口,结果展示同一页面 用到 setTimeout方法,setTimeout(function(){},1000):setTime ...
- P2P system: Chord
DHT= Distributed Hash Table store the objects(files) at nodes (hosts, machines) in a cluster. The cl ...
- 在 windows 上安装 git 2.15
下载 by win 下载地址:https://git-scm.com/download/win 如下图.选择对应的版本下载: 安装 by win 1.双击下载好的git安装包.弹出提示框.如下图: 2 ...