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的更多相关文章

  1. contains与compareDocumentPosition

    Sizzle中有一个contains方法(jQuery.contains),用来遍历是否包含指定的元素 IE率先引入一个contains()方法,可以在节点中查找某一个节点是不是当前节点的厚点,如果 ...

  2. 使用compareDocumentPosition比较两个元素在文档中的位置

    PS:尊重原创,转载请注明来自http://www.cnblogs.com/Raoh/p/js_compareDocumentPosition_between_two_node.html 使用comp ...

  3. contains 和 ele.compareDocumentPosition确定html节点间的关系

    ~~~ nodeA.contains(nodeB) //ie ,   nodeA.compareDocumentPosition(nodeB) //firefox opera 1.DOMElement ...

  4. javascript中的contains方法和compareDocumentPosition方法

    IE有许多好用的方法,后来都被其他浏览器抄袭了,比如这个contains方法.如果A元素包含B元素,则返回true,否则false.唯一不支持这个方法的是IE的死对头firefox.不过火狐支持com ...

  5. DOM、BOM 操作超级集合

    本章内容: 定义 节点类型 节点关系 选择器 样式操作方法style 表格操作方法 表单操作方法 元素节点ELEMENT 属性节点attributes 文本节点TEXT 文档节点 Document 位 ...

  6. jQuery-1.9.1源码分析系列(三) Sizzle选择器引擎——编译原理

    这一节要分析的东东比较复杂,篇幅会比较大,也不知道我描述后能不能让人看明白.这部分的源码我第一次看的时候也比较吃力,现在重头看一遍,再分析一遍,看能否查缺补漏. 看这一部分的源码需要有一个完整的概念后 ...

  7. 深入理解DOM节点关系

    × 目录 [1]父级属性 [2]子级属性 [3]同级属性[4]包含方法[5]关系方法 前面的话 DOM可以将任何HTML描绘成一个由多层节点构成的结构.节点分为12种不同类型,每种类型分别表示文档中不 ...

  8. Web javascript 中常用API合集

    来源于:https://www.kancloud.cn/dennis/tgjavascript/241852 一.节点 1.1 节点属性 Node.nodeName //返回节点名称,只读 Node. ...

  9. DOM(文档对象模型)

    1.定义: DOM是Document Object Model文档对象模型的缩写.是针对HTML和XML文档的一个API,通过DOM可以去改变文档. 例如:我们有一段HTML,那么如何访问第二层第一个 ...

随机推荐

  1. boost::interprocess::shared_memory_object(1)(基本类型)

    #include <iostream> #include <boost/interprocess/managed_shared_memory.hpp> struct pos2d ...

  2. 下载安装配置与使用MySQL-5.7.12-winx64.zip

    第一步:下载安装包 下载 地址:http://www.mysql.com/ 第二步:解压下载包 下载好后解压文件,把内容解压到想要的位置,本例解压到“D:\Program Files\mysql-5. ...

  3. .NET面试

    作者:最佳菜鸟链接:https://zhuanlan.zhihu.com/p/22224795来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 1 .术语 面试出现频率: ...

  4. python之MySQL学习——数据查询

    import pymysql as ps # 打开数据库连接 db = ps.connect(host='localhost', user='root', password='123456', dat ...

  5. MyEclipse中手工添加dtd支持

    1.先下载好相应的dtd文件,如struts-2.3.dtd 2.打开MyEclipse,Window->Preferences 在搜索框中输入"XML Catalog" 3 ...

  6. 解决----------“win10,不能打字了,已禁用IME”

    登录Windows 10系统桌面后,右键点击左下角的开始菜单图标,然后在弹出菜单中选择“计算机管理”菜单项在打开的“计算机管理”窗口中,找到左侧系统工具下的“任务计划程序”菜单项点击任务计划程序前面的 ...

  7. stopPropagation(), preventDefault() , return false 事件

    因为有父, 子节点同在, 因为有监听事件和浏览器默认动作之分. 使用 JavaScript 时为了达到预期效果经常需要阻止事件和动作执行. 一般我们会用到三种方法, 分别是 stopPropagati ...

  8. eclipse/IDEA使用maven

    下载,解压(无须安装),配置环境变量,命令行下mvn -v测试.https://www.cnblogs.com/luotaoyeah/p/3764533.html eclipse使用maven 为ec ...

  9. PHP的几种排序方法

    <?php /** * PHP最常用的四个排序方法及二种查找方法 * 下面的排序方法全部都通过测试 * auther : soulence * date : 2015/06/20 */ //PH ...

  10. 【我的Android进阶之旅】Android Studio查看Logcat时,如果一行Log太长如何换行显示?

    使用Android Studio一段时间了,还有很多小技巧没有掌握.今天又发现了一个比较好用的小技巧,这里分享出来. 1.Android Studio默认显示效果 比如我们用Logcat来查看打印的L ...