木森林林常识库

木森林林常识库
专业信息资源分享平台

JavaScript中的DOM专有扩展-contains()方法

在实际开发中,经常需要知道某个节点是不是另一个节点的后代。IE为此率先引入了contains()方法,以便不通过在DOM文档树中查找即可获得这个信息。调用contains()方法的应该是祖先节点,也就是搜索开始的节点,这个方法接收一个参数,即要检测的后代节点。如果被检测的节点是后代节点,该方法返回true;否则,返回false。

支持contains()方法的浏览器有IE、Firefox9+、Safari、Opera和Chrome。

使用DOM Level 3 compareDocumentPosition()也能够确定节点间的关系。

这个方法用于确定两个节点间的关系,返回一个表示该关系的掩码(bitmask)。如下:

  • 1:无关(哥顶的节点不在当前文档中)。
  • 2:居前(给定的节点在DOM树中位于参考节点之前)。
  • 4:居后(给定的节点在DOM树中位于参考节点之后)。
  • 8:包含(给定的节点是参考节点的祖先)。
  • 16:被包含(给定的节点是参考节点的后代)。

支持这个方法的浏览器有IE9+、Firefox、Safari、Opera9.5+和Chrome。

如下所示为通用的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(otherNode) == "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,则继续执行代码。否则,如果浏览器是WebKit且至少是Safari3(WebKit版本号为522或更高),那么也可以继续执行代码。在WebKit版本号小于522的Safari浏览器中,contains()方法不能正常使用。

接下来检查是否存在compareDocumentPosition()方法,而函数的最后一步则是自otherNode开始向上遍历DOM结构,以递归方式取得parentNode,并检查其是否与refNode相等。在文档树的顶端,parentNode的值等于null,于是循环结束。这是针对旧版本Safari设计的一个后备策略。

分享:

评论