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,那么如何访问第二层第一个 ...
随机推荐
- 蓝桥杯 第四届C/C++预赛真题(1) 高斯日记(数学题,年份处理)
题目标题: 高斯日记 大数学家高斯有个好习惯:无论如何都要记日记. 他的日记有个与众不同的地方,他从不注明年月日,而是用一个整数代替,比如:4210 后来人们知道,那个整数就是日期,它表示那一天是高斯 ...
- XMLHttpRequest 对象 status 和statusText 属性对照表
XMLHttpRequest 对象 status 和statusText 属性对照表 status statusText 说明 0** - 未被始化 1** - 请求收到,继续处理 100 Conti ...
- 【IDEA】项目中引入Spring MVC
一.原文说明: IntelliJ idea创建Spring MVC的Maven项目 - winner_0715 - 博客园 https://images2015.cnblogs.com/blog/82 ...
- C#操作AD及Exchange Server总结(二)
上一节C#操作AD及Exchange Server总结(一)写了对AD的操作,新建AD用户后,通常都需要为此用户开启Exchange邮箱,接下来写如何远程操作Exchange. 三.对Exchange ...
- MyEclipse中手工添加dtd支持
1.先下载好相应的dtd文件,如struts-2.3.dtd 2.打开MyEclipse,Window->Preferences 在搜索框中输入"XML Catalog" 3 ...
- VS2010 / MFC + OpenCV 2.4.1打开图片
Windows 7 x64,VS2010 / MFC + OpenCV 2.4.1打开图片显示到Picture控件中. OpenCV 2.2.OpenCV 2.3同样适用. 工具/原料 WinXP / ...
- 传说中的MATLAB1.0(1984年DOS界面182K、运行良好)附下载
传说中的MATLAB1.0(1984年DOS界面182K.运行良好)附下载 你见过 MATLAB 最早的版本吗?下载一份 MATLAB 1.0,(只有182K, 只有20来个函数) 体会一下吧.MAT ...
- ios cocos2d 使用 sneakyInput 插件
昨晚看了篇使用sneakyInput插件实现模拟手柄的代码,不过我加上后出现了很多问题.最后只看如何实现,没有自己动手去操作.今天终于吧问题都解决了.记录下来.也供别人参考. 首先要先加入libz.d ...
- win7查看某个端口被占用的解决方法
1.开始---->运行---->cmd,或者是window+R组合键,调出命令窗口. 2.输入命令:netstat -ano,列出所有端口的情况.在列表中我们观察被占用的端口,比如是491 ...
- lua53编译
#下载lua包lua-5.3.5 #vs2017新建个空工程,删除lua.c,luac,c,设置配置类型 动态库.dll #编译完成