节点间"包孕"关系的访问

2012-10-25

节点间包含关系的访问判断2个节点间是否存在包含关系，即是否存在父子之间的关系，我们可以使用:elA.conta

节点间"包含"关系的访问

判断2个节点间是否存在包含关系，即是否存在父子之间的关系，我们可以使用:
elA.contains(elB)方法，如果elA是elB的祖先，则返回true.

//判断 <html>元素是否包含<body>元素alert(document.documentElement.contains(document.body)); //true

IE，Chrome,Opera8+,Safari3+支持该属性,Firefox不支持该方法，不过，它提供了另外一个方法：
elA.compareDocumentPosition(elB)，它返回一个"位掩码"来表示节点间的关系。返回值如下：

Mask含义1无联系，elB不在elA所在的document中2之前，elB在elA之前（DOM tree上的位置）4之后，elB在elA之后（DOM tree上的位置）8包含，elB包含elA16被包含，elB被包含在elA

//例如：//因为 <body>在<html>之后，且被包含，所以值为 4 + 16 = 20；alert(document.documentElement.contains(document.body)); //20

?因此，跨浏览器的包含判断函数如下：

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;}}

热点排行

Web前端

节点间"包孕"关系的访问