contains和compareDocumentPosition 方法来确定是否HTML节点间的关系


Posted in Javascript onSeptember 13, 2011

从那起,我已经对这些方法做了大量的研究,并且已经在很多场合使用他们。在很多任务中,他们被证明是非常有用的(特别关于结构的抽象 DOM 选择器)。
1、DOMElement.contains(DOMNode)
这个方法起先用在 IE ,用来确定 DOM Node 是否包含在另一个 DOM Element 中。
当尝试优化 CSS 选择器遍历(像:“#id1 #id2”),这个方法很有用。你可以通过 getElementById 得到元素,然后使用 .contains() 确定 #id1 实际上是否包含 #id2。
注意点:如果 DOM Node 和 DOM Element 相一致,.contains() 将返回 true ,虽然,一个元素不能包含自己。
这里有一个简单的执行包装,可以运行在:Internet Explorer, Firefox, Opera, and Safari。
function contains(a, b) {
return a.contains ? a != b && a.contains(b) : !!(a.compareDocumentPosition(arg) & 16);
}

2、NodeA.compareDocumentPosition(NodeB)
这个方法是 DOM Level 3 specification 的一部分,允许你确定 2 个 DOM Node 之间的相互位置。这个方法比 .contains() 强大。这个方法的一个可能应用是排序 DOM Node 成一个详细精确的顺序。
使用这个方法你可以确定关于一个元素位置的一连串的信息。所有的这些信息将返回一个比特码(Bit,比特,亦称二进制位)。
对于那些,人们知之甚少。比特码是将多重数据存储为一个简单的数字(译者注:0 或 1)。你最终打开 / 关闭个别数目(译者注:打开/关闭对应 0 /1),将给你一个最终的结果。
这里是从 NodeA.compareDocumentPosition(NodeB) 返回的结果,包含你可以得到的信息。
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)
这个,毫无疑问,有助于理解单个最混乱的 DOM API 方法。当然,他的价值当之无愧的。
现在,DOMNode.compareDocumentPosition 在 Firefox 和 Opera 中是可用的。然而,有一些技巧,我们可以用来在 IE 中执行他。
// 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; 
}

IE 提供给我们一些可以使用的方法和属性。开始,使用 .contains() 方法(如我们前面所讨论的),以便给我们包含(+16)或者被包含(+8)的结果。IE 还有一个 .sourceIndex 属性在所有的 DOM Element 对应着元素在文档中的位置,例如:document.documentElement.sourceIndex == 0。因为我们有这个信息,我们可以完成两个 compareDocumentPosition 难题:在前面(+2)和在后面(+4)。另外,如果一个元素不在当前的文档,.sourceIndex 将等于 -1,这个给我们另外一个回答(+1)。最后,通过这个过程的推断,我们可以确定如果一个元素等于他本身,返回一个空的比特码(+0)。
这个函数可以在 Internet Explorer、Firefox 和 Opera 中运行。但在 Safari 中却有残缺功能(因为他只有 contains() 方法,而没有 .sourceIndex 属性。我们只能得到 包含(+16),被包含(+8),其他的所有结果都将返回(+1)代表一个断开)。
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");
虽然 Firefox 和 Opera 都采取了一些主动落实这一方法。我依然期待看到更多的浏览器进入,以帮助向前推动
Javascript 相关文章推荐
JQuyer $.post 与 $.ajax 访问WCF ajax service 时的问题需要注意的地方
Sep 20 Javascript
JS自动适应的图片弹窗实例
Jun 29 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
May 19 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
canvas实现简易的圆环进度条效果
Feb 28 Javascript
JS实现的走迷宫小游戏完整实例
Jul 19 Javascript
js实现一个简单的MVVM框架示例
Jan 15 Javascript
原生JavaScript实现的简单放大镜效果示例
Feb 07 Javascript
js中如何完美的解析数据
Mar 18 Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
微信小程序实现购物车小功能
Dec 30 Javascript
jQuery中使用了document和window哪些属性和方法小结
Sep 13 #Javascript
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 #Javascript
各情景下元素宽高的获取实现代码
Sep 13 #Javascript
JS字符串函数扩展代码
Sep 13 #Javascript
Javascript学习笔记 delete运算符
Sep 13 #Javascript
Webkit的跨域安全问题说明
Sep 13 #Javascript
Array, Array Constructor, for in loop, typeof, instanceOf
Sep 13 #Javascript
You might like
怎么在Windows系统中搭建php环境
2013/08/31 PHP
php使用类继承解决代码重复的问题
2015/02/11 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
Laravel日志用法详解
2016/10/09 PHP
PHP实现的抓取小说网站内容功能示例
2019/06/27 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
浅析javascript闭包 实例分析
2010/12/25 Javascript
使用 js+正则表达式为关键词添加链接
2014/11/11 Javascript
jQuery插件scroll实现无缝滚动效果
2015/04/27 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
2016/08/11 Javascript
微信小程序实现多个按钮toggle功能的实例
2017/06/13 Javascript
jQuery实现的两种简单弹窗效果示例
2018/04/18 jQuery
vue+axios+element ui 实现全局loading加载示例
2018/09/11 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
JavaScript 对引擎、运行时、调用堆栈的概述理解
2018/10/22 Javascript
解决iview多表头动态更改列元素发生的错误的方法
2018/11/02 Javascript
浅谈Vue 函数式组件的使用技巧
2020/06/16 Javascript
Python的标准模块包json详解
2017/03/13 Python
python 第三方库的安装及pip的使用详解
2017/05/11 Python
Pycharm技巧之代码跳转该如何回退
2017/07/16 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
使用python批量化音乐文件格式转换的实例
2019/01/09 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python使用 request 发送表单数据操作示例
2019/09/25 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
Chupi官网:在爱尔兰手工制作的订婚、结婚戒指和精美珠宝
2020/09/28 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
机电职业生涯规划书范文
2014/03/08 职场文书
转让协议书范本
2014/09/13 职场文书
慰问信范文
2015/02/14 职场文书
法制工作总结2015
2015/07/23 职场文书
python中os.path.join()函数实例用法
2021/05/26 Python
MYSQL主从数据库同步备份配置的方法
2021/05/26 MySQL