zoukankan      html  css  js  c++  java
  • contains和compareDocumentPosition 方法来确定是否HTML节点间的关系

    ps:这两天在看Cloudgamer的js工具库 cloudgamer Js Library v0.1 ,里面有一个dom的contain方法,如下:

    var D={

    contains: document.defaultView   // 参见 JS从样式表取值的函数currentStyle(IE),defaultView(FF)
            ? function (a, b) { return !!( a.compareDocumentPosition(b) & 16 ); }
            : function (a, b) { return a != b && a.contains(b); }

    }

    我对compareDocumentPosition这个函数实在是陌生,见都没有见过,就上网找了一下,还真不错,找到了,扩展知识,做个记录吧……

    1、DOMElement.contains(DOMNode)

      这个方法起先用在 IE ,用来确定 DOM Node 是否包含在另一个 DOM Element 中。

        当尝试优化 CSS 选择器遍历(像:“#id1 #id2”),这个方法很有用。你可以通过 getElementById 得到元素,然后使用 .contains() 确定 #id1 实际上是否包含 #id2。

       注意:如果 DOMNode 和 DOMElement 相一致,.contains() 将返回 true ,虽然,一个元素不能包含自己。

    2、NodeA.compareDocumentPosition(NodeB)

        这个方法是 DOM Level 3 specification 的一部分,允许你确定 2 个 DOM Node 之间的相互位置。这个方法比 .contains() 强大。这个方法的一个可能应用是排序 DOM Node 成一个详细精确的顺序。

        使用这个方法你可以确定关于一个元素位置的一连串的信息。所有的这些信息将返回一个比特码(Bit,比特,亦称二进制位)。

        对于那些,人们知之甚少。比特码是将多重数据存储为一个简单的数字(译者注:0 或 1)。你最终打开 / 关闭个别数目(译者注:打开/关闭对应 0 /1),将给你一个最终的结果。

        这里是从 NodeA.compareDocumentPosition(NodeB) 返回的结果,包含你可以得到的信息。

    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             浏览器的私有使用

      这个表格的意思如下:

    <div id="a"><div id="b"></div></div>

    <script>
     alert( document.getElementById("a").compareDocumentPosition(document.getElementById("b")) == 20);
    </script>

    满足a在b之前,而且a包含b,则返回结果就是4+16=20,则cloudgamer的js工具代码就很好理解了,加入支持defaultView的话,那肯定不支持contain方法,那么就使用compareDocumentPosition与16作位与操作只要大于等于16,结果肯定不是0啦;否则就使用ie的contain方法来进行判断就ok

  • 相关阅读:
    一些 Ubuntu 使用的小技巧
    体验 Web 自动化测试工具 Selenium
    CentOS 7 上安装 Nginx
    Windows查看端口占用情况
    Windows远程登录提醒:由于没有远程桌面授权服务器可以提供许可证,远程会话连接已断开。请跟服务器管理员联系。
    Vue动态的改变css样式
    centos7 U盘安装卡在 starting dracut initqueue hook Reached target Basic System
    用tsc编译ts文件的时候报错,tsc : 无法加载文件,因为在此系统上禁止运行脚本;
    Linux修改SSH默认的端口号
    Centos编译安装新版本Git
  • 原文地址:https://www.cnblogs.com/pigtail/p/2540246.html
Copyright © 2011-2022 走看看