contains与compareDocumentPosition方法详解

1. nodeA .contains( nodeB )：

这个方法起先用在 IE ，用来确定 nodeB 是否包含在另一个 nodeA 中。

注意点：如果 nodeA 和 nodeB 相一致，.contains() 将返回 true ，虽然，一个元素不能包含自己。

2、nodeA.compareDocumentPosition(nodeB)：

这个方法这个方法是 DOM Level 3 specification 的一部分，比contains方法强大得多，可以比较两个元素的相对位置，返回结果如下：

Bits Number Meaning

000000         0              元素一致
000001         1              节点在不同的文档（或者一个在文档之外）
000010         2              节点 B 在节点 A 之前
000100         4              节点 A 在节点 B 之前
001000         8              节点 B 包含节点 A
010000         16             节点 A 包含节点 B
100000         32             浏览器的私有使用

对于第一列代表的意思，可能很多同学以前不太了解，比特码可以将多个状态按位存储成一个数字，而多个状态是相互独立的，例如：

<div id="a">
<div id="b"></div>
</div>
<script>
alert( document.getElementById("a").compareDocumentPosition(document.getElementById("b")) == 20);
</script>

一旦一个节点 A 包含另一个节点 B，包含 B（+16）且在 B 之前（+4），则最后的结果是数字 20 。如果你查看比特发生的变化，将增加你的理解。

000100 (4) + 010000 (16) = 010100 (20)

3.contains和compareDocumentPosition各浏览器差异：

	IE6/7/8	IE9	Firefox	Safari	Chrome	Opera
contains	Y	Y	N	Y	Y	Y
compareDocumentPosition	N	Y	Y	Y	Y	Y

4.兼容IE的compareDocumentPosition实现：

// Compare Position - MIT Licensed, John Resig
function comparePosition(a, b){
return a.compareDocumentPosition ?
a.compareDocumentPosition(b) :
a.contains ?
( a != b && a.contains(b) && 16 ) +
( a != b && b.contains(a) && 8 ) +
( a.sourceIndex >= 0 && b.sourceIndex >= 0 ?
   (a.sourceIndex < b.sourceIndex && 4 ) +
   (a.sourceIndex > b.sourceIndex && 2 ) :
   1 ) :
0;
}

5.应用：

PPK 提供了一个关于通过创建一个 getElementsByTagNames 方法使新功能可以被使用的很棒的例子：

// Original by PPK quirksmode.org

function getElementsByTagNames(list, elem) {

elem = elem || document;

var tagNames = list.split(’,’), results = [];

for ( var i = 0; i < tagNames.length; i++ ) {

var tags = elem.getElementsByTagName( tagNames[i] );

for ( var j = 0; j < tags.length; j++ )

results.push( tags[j] );

}

return results.sort(function(a, b){

return 3 - (comparePosition(a, b) & 6);

});

}

我们现在可以使用他来按次序构建一个站点的目录：getElementsByTagNames("h1, h2, h3");

http://msdn.microsoft.com/en-us/library/ms536377%28VS.85%29.aspx

https://developer.mozilla.org/En/DOM/Node.compareDocumentPosition

http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition

http://ejohn.org/blog/comparing-document-position/

转载于:https://www.cnblogs.com/zhengyinhui/archive/2013/01/05/2847979.html

contains与compareDocumentPosition方法详解相关推荐

python统计csv行数_对Python 多线程统计所有csv文件的行数方法详解
如下所示: #统计某文件夹下的所有csv文件的行数(多线程) import threading import csv import os class MyThreadLine(threading.Th ...
python修改文件内容_Python批量修改文本文件内容的方法详解
这篇文章主要介绍了Python批量修改文本文件内容的方法的相关资料,需要的朋友可以参考下 Python批量替换文件内容,支持嵌套文件夹 import os path="./" fo ...
python二维元组_python中读入二维csv格式的表格方法详解(以元组/列表形式表示)
如何去读取一个没有表头的二维csv文件(如下图所示)? 并以元组的形式表现数据: ((1.0, 0.0, 3.0, 180.0), (2.0, 0.0, 2.0, 180.0), (3.0, 0.0, ...
Spring JdbcTemplate方法详解
2019独角兽企业重金招聘Python工程师标准>>> Spring JdbcTemplate方法详解标签: springhsqldbjava存储数据库相关sql 2012-07- ...
golang 解析php序列化,golang实现php里的serialize()和unserialize()序列和反序列方法详解...
Golang 实现 PHP里的 serialize() . unserialize() 安装 go get -u github.com/techleeone/gophp/serialize 用法 pa ...
ES5和ES6数组遍历方法详解
ES5和ES6数组遍历方法详解在ES5中常用的10种数组遍历方法: 1.原始的for循环语句 2.Array.prototype.forEach数组对象内置方法 3.Array.prototype. ...
linux expect 输入密码,shell脚本无密码登录 expect的使用方法详解
shell脚本无密码登录 expect的使用方法详解今天需要做一个定时任务脚本将最新的数据包文件传到远程的服务器上,虽然有密钥但也是要求输入密码的那种,所以只能另想办法实现让脚本自动输入密码了. 从 ...
饥荒怎么自动订阅服务器,饥荒联机版自动挂礼物mod及使用方法详解
饥荒联机版中官方经常会推出一些挂机掉落礼物的活动,可能一些玩家会觉得很麻烦,下面给大家分享一些自动挂礼物mod和其使用方法,希望可以帮助到各位玩家. 饥荒联机版自动挂礼物mod及使用方法详解挂礼物m ...
linux oracle 用户创建,LINUX下Oracle数据库用户创建方法详解
本文实例分析了LINUX下Oracle数据库用户创建方法.分享给大家供大家参考,具体如下: 1)登录linux,以oracle用户登录(如果是root用户登录的,登录后用 su - oracle命令切 ...

contains与compareDocumentPosition方法详解

contains与compareDocumentPosition方法详解相关推荐

最新文章

热门文章