javascript比较文档位置


Posted in Javascript onApril 08, 2008

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 相关文章推荐
使用按钮控制以何种方式打开新窗口的属性介绍
Dec 17 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
Javascript模仿淘宝信用评价实例(附源码)
Nov 26 Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 Javascript
微信小程序 页面跳转和数据传递实例详解
Jan 19 Javascript
react开发中如何使用require.ensure加载es6风格的组件
May 09 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
Jul 03 Javascript
详解Vue组件之作用域插槽
Nov 22 Javascript
如何使用Node.js爬取任意网页资源并输出PDF文件到本地
Jun 17 Javascript
原生js实现二级联动菜单
Nov 27 Javascript
javascript实现切割轮播效果
Nov 28 Javascript
vue基于Teleport实现Modal组件
May 31 Vue.js
js函数般调用正则
Apr 08 #Javascript
javascript背投广告代码的完善
Apr 08 #Javascript
大家未必知道的Js技巧收藏
Apr 07 #Javascript
用JavaScript调用WebService的示例
Apr 07 #Javascript
HTML中Select不用Disabled实现ReadOnly的效果
Apr 07 #Javascript
javascript add event remove event
Apr 07 #Javascript
JS动画效果代码3
Apr 03 #Javascript
You might like
Smarty Foreach 使用说明
2010/03/23 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
jQuery 位置插件
2008/12/25 Javascript
JavaScript小技巧 2.5 则
2010/09/12 Javascript
深入理解JavaScript系列(2) 揭秘命名函数表达式
2012/01/15 Javascript
网页前端优化之滚动延时加载图片示例
2013/07/13 Javascript
div模拟滚动条效果示例代码
2013/10/16 Javascript
javascript通过navigator.userAgent识别各种浏览器
2013/10/25 Javascript
js抽奖实现随机抽奖代码效果
2013/12/02 Javascript
js/jQuery简单实现选项卡功能
2014/01/02 Javascript
JQuery替换DOM节点的方法
2015/06/11 Javascript
超级给力的JavaScript的React框架入门教程
2015/07/02 Javascript
Javascript页面跳转常见实现方式汇总
2015/11/28 Javascript
基于js对象,操作属性、方法详解
2016/08/11 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
详解async/await 异步应用的常用场景
2019/05/13 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
JavaScript 实现HTML DOM增删改查操作的常见方法详解
2020/01/04 Javascript
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python 已知平行四边形三个点,求第四个点的案例
2020/04/12 Python
python实现交并比IOU教程
2020/04/16 Python
Python 爬虫的原理
2020/07/30 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
台湾前三大B2C购物网站:MOMO购物网
2017/04/27 全球购物
Desigual德国官网:在线购买原创服装
2018/03/27 全球购物
智能旅行箱:Horizn Studios
2018/04/30 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
Java基础面试题
2014/07/19 面试题
初中生学习的自我评价
2013/11/14 职场文书
前台领班岗位职责
2013/12/04 职场文书
中学生社会实践活动总结
2014/07/03 职场文书
2014房屋登记授权委托书
2014/10/13 职场文书
2015年行政执法工作总结
2015/05/23 职场文书
某学校的2019年度工作报告范本
2019/10/11 职场文书
基于Python实现nc批量转tif格式
2022/08/14 Python