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

判断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包含elA
16 被包含,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;
	}
}

 

 

 

你可能感兴趣的:(浏览器,chrome,IE,webkit,firefox)