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,那么如何访问第二层第一个 ...
随机推荐
- CSS样式呈现优先级
经常出现CSS样式不生效的问题. 比如我先对p{},然后在其中一个标签写了个.p_style{}怎么都不生效,于是想到了CSS的呈现优先级. 经过自己测试, 属性style="" ...
- asp 之 让实体中字段类型为DateTime的字段仅仅显示日期不显示时间
在我们平时的工作开发中.我们一般会遇到这种一个问题:某个实体的某个字段是DateTime类型的,但是我们在界面上仅仅想让它显示日期不显示时间! 一个订单实体: //订单类 public ...
- django数据库设计
1 知识点 主要是分析设计数据库的数据表和数据表字段,然后使用Navicat Data Modeler创建模 将sqlite数据库修改成mysql数据库,同步数据 2 模型 2.1 数据表所有的数据列 ...
- 自动更新本地 GIT 仓库
随着开源软件的兴起,尤其是 GITHUB 的蓬勃发展,很多开源软件都通过 GIT 进行管理,在我的计算机上就一个目录是我关注并使用的开源软件 GIT 本地副本,如何定期更新这些仓库,一个个的更新太累人 ...
- knowledgeroot 的配置与优化
首先下载 KnowledgeRoot 的安装包,就是一个压缩文件,解压缩后放到 WebRoot 下面 在浏览器中打开网站,自动提示进行安装,安装的过程很简单,安装结束后即可以使用. 安装包创建的数据库 ...
- iOS7中弹簧式列表的制作
本文转载至 http://www.devdiv.com/forum.php?mod=viewthread&tid=208170&extra=page%3D1%26filter%3Dty ...
- iOS-tableView本地动画刷新
比如:就拿删除tableView中一个Cell为例子. // XXXTableViewCellDelegate - (void)tapDeleteHelloUser:(CJHelloTableView ...
- Adapter适配器 final int Id 导致选中的Item不在当前界面
写了上面这么一个横向混动,点击切换到,哪个的Item上就会有一个 常用 的小图标.但是我每次滑动切换到后面 成龙9这个Item,这个 常用的图片,也在 这个上面了,但是他一更新,就变成 等你再 ...
- tsinsen A1333. 矩阵乘法
题目链接:传送门 题目思路:整体二分(二分的是答案,附带的是操作) 把矩阵中的元素对应成插入操作,然后就有插入和询问操作. 然后根据插入操作对于答案的影响,询问操作所匹配的符合答案个数,将操作分为两段 ...
- ef AddDays报错
ef func写法,在语句中不能使用adddays方法 )); 这样写就是不行 可以改为: ); 下面是我的一个案例,虽然到了最后都没有实现功能! public List<ContractBud ...