contain与compareDocumentPosition
contain方法由IE创建,用于判断元素之间是否是父亲与后代的关系,例如:如果A元素包含B元素,则返回true,否则,返回false
eg:
<div id= "a">
<div id= "b"></div>
</div>
var a= document.getElementById("a");
var b= document.getElementById("b");
console.log(a.contains(b)); //true
值得注意的是这个方法得到了大多数浏览器的支持,除了IE的死对头Firefox,这里我们介绍另一种函数compareDocumentPosition(),即对比文档元素之间的位置
a在b的前面 4
a在b的后面 2
a包含b 20
b包含a 10
a与b相同 0
(这些结论由本人亲测获得,与w3c教程上的返回值不完全相同)
compareDocumentPosition得到了所有浏览器的支持(IE9+)
由此得出兼容性方案
if(!!window.find){
HTMLElement.prototype.contains = function(B){
return this.compareDocumentPosition(B) - 19 > 0
}
}
contain与compareDocumentPosition的更多相关文章
- contains与compareDocumentPosition
Sizzle中有一个contains方法(jQuery.contains),用来遍历是否包含指定的元素 IE率先引入一个contains()方法,可以在节点中查找某一个节点是不是当前节点的厚点,如果 ...
- 使用compareDocumentPosition比较两个元素在文档中的位置
PS:尊重原创,转载请注明来自http://www.cnblogs.com/Raoh/p/js_compareDocumentPosition_between_two_node.html 使用comp ...
- contains 和 ele.compareDocumentPosition确定html节点间的关系
~~~ nodeA.contains(nodeB) //ie , nodeA.compareDocumentPosition(nodeB) //firefox opera 1.DOMElement ...
- javascript中的contains方法和compareDocumentPosition方法
IE有许多好用的方法,后来都被其他浏览器抄袭了,比如这个contains方法.如果A元素包含B元素,则返回true,否则false.唯一不支持这个方法的是IE的死对头firefox.不过火狐支持com ...
- DOM、BOM 操作超级集合
本章内容: 定义 节点类型 节点关系 选择器 样式操作方法style 表格操作方法 表单操作方法 元素节点ELEMENT 属性节点attributes 文本节点TEXT 文档节点 Document 位 ...
- jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理
这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白.这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏. 看这一部分的源码需要有一个完整的概念后 ...
- 深入理解DOM节点关系
× 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...
- Web javascript 中常用API合集
来源于:https://www.kancloud.cn/dennis/tgjavascript/241852 一.节点 1.1 节点属性 Node.nodeName //返回节点名称,只读 Node. ...
- DOM(文档对象模型)
1.定义: DOM是Document Object Model文档对象模型的缩写.是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 例如:我们有一段HTML,那么如何访问第二层第一个 ...
随机推荐
- 《The Swift Programming Language》的笔记-第24页
The Swift Programming Language读书笔记学习笔记 第24页 本页主要内容有两个:打印输出和怎样在swift凝视代码 1 怎样打印变量和常量的值? 使用println函数,细 ...
- PANDAS 数据合并与重塑(join/merge篇)
pandas中也常常用到的join 和merge方法 merge pandas的merge方法提供了一种类似于SQL的内存链接操作,官网文档提到它的性能会比其他开源语言的数据操作(例如R)要高效. 和 ...
- STL中的容器
STL中的容器 一. 种类: 标准STL序列容器:vector.string.deque和list. 标准STL关联容器:set.multiset.map和multimap. 非标准序列容器slist ...
- 面试10大算法汇总——Java篇
问题导读 1 字符串和数组 2 链表 3 树 4 图 5 排序 6 递归 vs 迭代 7 动态规划 8 位操作 9 概率问题 10 排列组合 11 其他 -- 寻找规律 英文版 以下从Java角度解释 ...
- 并发编程7 管道&事件&信号量&进程池(同步和异步方法)
1,管道 2.事件 3.信号量 4.进程池的介绍&&进程池的map方法&&进程池和多进程的对比 5.进程池的同步方法和异步方法 6.重新解释同步方法和异步方法 7.回调 ...
- myeclipse10.7导出war包时出错解决办法
myeclipse10.7的版本破解后,导出war包时报“SECURITY ALERT: INTEGERITY CHECK ERROR”的错误. 选中项目->export->java ee ...
- pdb
core code: import pdb pdb.set_trace() 单步执行并进入:s 单步执行并不进入:n 下一断点:c 当前位置:where 从当前函数返回:r 退出:q pdb comm ...
- Redis数据存储优化机制(转)
原文:Redis学习笔记4--Redis数据存储优化机制 1.zipmap优化hash: 前面谈到将一个对象存储在hash类型中会占用更少的内存,并且可以更方便的存取整个对象.省内存的原因是新建一个h ...
- PyMongo的使用(转)
原文:http://www.oschina.net/code/snippet_1382328_37407 #!/usr/bin/env python #coding:utf-8 # Author: - ...
- 【我的Android进阶之旅】如何隐藏Android中EditText控件的默认下划线
Android EditText控件是经常使用的控件,但是有时候我们并不需要它的一些默认的属性,比如说下划线,因为有时候这样的默认下划线看起来特别怪异,和其他控件在一起搭配的时候不协调,因此有时候就需 ...