确定节点直接的关系

佚名 6年前 (2019-04-17) 随笔 1882人围观抢沙发百度已收录

确定节点直接的关系，通常使用contains，但是它只能得到两个节点是否为父子节点不能确定其他关系。

compareDocumentPosition()能够确定节点间的关系，支持这个方法的浏览器有 IE9+、Firefox、Safari、Opera9.5和Chrome,该方法返回一个位掩码(bitmask) 1 无关 2 居前给定节点在参考节点之前 4 据后给定节点在参考节点之后 8 包含给定节点是参考节点的祖先 16 被包含给定节点是参考节点的后代 contains应该是掩码16 通用的contains函数

function contains(refNode, otherNode){
    if(typeof refNode.contains == 'function' &&
      (!client.engine.webkit || 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且至少是Safari3(WebKit版本号为522或更高)，那么也可以继续指向代码在WebKit版本号小于522的Safari浏览器中，contains()方法不能正常使用
接下来检查是否存在compareDocumentPositon()方法，而函数的最后一步则是自otherNode开始向上遍历DOM结构，以递归方式取得parentNode,并检查是否与refNode相等。在文档树的顶端，parentNode的值等于null, 于是循环结束。这是针对旧版本Safari设计的一个后备策略。