十年专注于品牌网站建设 十年专注于品牌网站建设,低调、有情怀的网络应用服务商!
南昌百恒网络微信公众号 扫一扫关注
小程序
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络微信小程序

百恒网络

南昌百恒网络

关于documentElement.contains()方法的使用方法及注意事项

百恒网络 2016-12-01 1473

开发人员经常需要确定某个给定的节点是不是另一个节点的后代。为此,IE率先引入了contains() 方法,让开发人员无须遍历DOM文档树即可获知此信息。应该在作为搜索起点的祖先节点上调用contains()方法,并为该方法传递一个参数,即要检测的后代节点。如果传人的节点是当前节点的 后代,那么方法返回true;否则返回false。来看下面的例子:
       alert(document.documentElement.contains(document.body>); //true
       这个例子测试<body>元素是不是<html>元素的后代,而在格式正确的HTML页面中,这个例子会返回true。IE、Safari3及更高版本、Opera 8及更高版本、Chrome都支持contains()方法。Safari2x中虽然也有这个方法.但无法正常使用。因此,需要通过浏览器检测来确定Safari的版本,以保证 可以正常使用这个方法。
       Firefox不支持contains()方法,但Firefox在DOM3级实现中提供了一个替代的compareDocumentPosition()方法(Opera 9.5及更高版本也支持此方法)。这个方法用于确定两个节点之间的关系,返回一个表示该关系的位掩码( bitmask)。下表列出了这个位掩码的值。 
       为模仿contains()方法,应该关注的是掩码16。可以对compareDocumentPosition()的结果执行按位与,以确定参考节点(调用compareDocumentPosition()方法的当前节点)是否包含给定的节点(传人的节点)。来看下面的例子:
       var result=document.documentElement. compareDocumentPosition( document. body);
       alert(!!(result&16));
       执行上面的代码后,结果会变成20(表示“居后”的4加上表示“被包含”的16)。对掩码16 执行按位操作会返回一个非零数值,而两个逻辑非操作符会将该数值转换成布尔值。
       使用一些浏览器及能力检测,就可以写出如下所示的一个通用的contains()函数:
       function contains( refNode, otherNode){
              if (typeof refNode. contains==”function”&&
                     (! client. engine .webkit ff client. engine .webkit>=522)){
              return refNode. contains( otherNode);
       } else if (typeof refNode. compareDocumentPosition== ”function"){
              return!!(refNode. compareDocumentPosition( otherNode) &16);
       } else{
              var node=otherNode. parentNode;
       do{
              if (node===refNode){
                     return true;

              } else {
                     node=node. parentNode;
              }
       } while (node!==null);
              return false:
              }
       }
       这个函数使用了三种方法来确定一个节点是不是另一个节点的后代。函数的第一个参数是参考节点,第二个参数是要检查的节点。在函数体内,首先检测refNode中是否存在contains()方法(能力检测)。这一部分代码还检查了当前浏览器所用的WebKit版本号。如果方法存在而且不是WebKit (! client.engine.webkit),则继续执行代码。否则,如果浏览器是WebKit且至少是Safari 3 (WebKit版本号为522或更高),那么也可以继续执行代码。在WebKit版本号小于522的Safari浏览器中, contains()方法不能正常使用。
       接下来检查是否存在compareDoumentPosition()方法,而函数的最后一步则是自otherNode 开始向上遍历DOM结构,递归地取得parentNode并检查是否与refNode相等。在文档树的顶端, parentNode的值等于null,于是循环结束。这是针对旧版本Safari设计的一个后备策略。
  本文仅限内部技术人员学习交流,不得作于其他商业用途.希望此文对广技人员有所帮助。原创文章出自:南昌网站建设公司-百恒网络http://www.jxbh.cn/如转载请注明出处!

400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号
扫一扫打开百恒网络小程序

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
售后服务 售后服务
 
备案专线 备案专线
 
×