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


Posted in Javascript onFebruary 04, 2010

从那起,我已经对这些方法做了大量的研究,并且已经在很多场合使用他们。在很多任务中,他们被证明是非常有用的(特别关于结构的抽象 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
000 0 元素一致
001 1 节点在不同的文档(或者一个在文档之外)
010 2 节点 B 在节点 A 之前
100 4 节点 A 在节点 B 之前
000 8 节点 B 包含节点 A
000 16 节点 A 包含节点 B
000 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 。如果你查看比特发生的变化,将增加你的理解。
100 (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 相关文章推荐
utf-8编码引起js输出中文乱码的解决办法
Jun 23 Javascript
JS删除字符串中重复字符方法
Mar 09 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
jQuery及JS实现循环中暂停的方法
Feb 02 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
解决ajax不能访问本地文件问题(利用js跨域原理)
Jan 24 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
JS常见内存泄漏及解决方案解析
May 30 Javascript
JavaScript代码实现微博批量取消关注功能
Feb 05 Javascript
使用SyntaxHighlighter实现HTML高亮显示代码的方法
Feb 04 #Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 #Javascript
jQuery生成asp.net服务器控件的代码
Feb 04 #Javascript
javascript两段代码,两个小技巧
Feb 04 #Javascript
JavaScript面向对象之静态与非静态类
Feb 03 #Javascript
JavaScript 学习笔记(十六) js事件
Feb 01 #Javascript
js左侧多级菜单动态的解决方案
Feb 01 #Javascript
You might like
twig模板常用语句实例小结
2016/02/04 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP让数组中有相同值的组成新的数组实例
2017/12/31 PHP
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
jQuery中绑定事件的命名空间详解
2011/04/05 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
js限制checkbox选中个数以限制六个为例
2014/07/15 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
jQuery禁用快捷键例如禁用F5刷新 禁用右键菜单等的简单实现
2016/08/31 Javascript
详解springmvc 接收json对象的两种方式
2016/12/06 Javascript
vue使用Axios做ajax请求详解
2017/06/07 Javascript
JS实现简单拖拽效果
2017/06/21 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
JavaScript中import用法总结
2019/01/20 Javascript
vue实现点击隐藏与显示实例分享
2019/02/13 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
2019/04/10 Javascript
[01:55]《走出家门看比赛》——DOTA2 2015国际邀请赛同城线下观战
2015/07/18 DOTA
pyqt5 从本地选择图片 并显示在label上的实例
2019/06/13 Python
Django单元测试中Fixtures的使用方法
2020/02/26 Python
python代码区分大小写吗
2020/06/17 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
pymysql模块使用简介与示例
2020/11/17 Python
德国购买健身器材:AsVIVA
2017/08/09 全球购物
Homestay中文官网:全球寄宿家庭
2018/10/18 全球购物
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
公务员职业生涯规划书范文  
2014/01/19 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
演讲主持词
2014/03/18 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
导游词之金鞭溪风景区
2019/09/12 职场文书
PostgreSQL将数据加载到buffer cache中操作方法
2021/04/16 PostgreSQL
CSS 还能这样玩?奇思妙想渐变的艺术
2021/04/27 HTML / CSS
SpringBoot整合Minio文件存储
2022/04/03 Java/Android
python中Pyqt5使用Qlabel标签播放视频
2022/04/22 Python