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

发布时间：2022/01/11 丨 文章来源：未知 丨 浏览次数：

开发人员经常需要确定某个给定的节点是不是另一个节点的后代。为此，IE率先引入了contains() 方法，让开发人员无须遍历DOM文档树即可获知此信息。应该在作为搜索起点的祖先节点上调用contains()方法，并为该方法传递一个参数，即要检测的后代节点。如果传人的节点是当前节点的 后代，那么方法返回true;否则返回false。来看下面的例子：
? ? ? ?alert(document.documentElement.contains(document.body>); //true
? ? ? ?这个例子测试元素是不是元素的后代，而在格式正确的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.huicuiwang.cn/如转载请注明出处!