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 相关文章推荐
利用404错误页面实现UrlRewrite的实现代码
Aug 20 Javascript
Jquery 自定义动画概述及示例
Mar 29 Javascript
JavaScript前补零操作实例
Mar 11 Javascript
JS实现随机乱撞彩色圆球特效的方法
May 05 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
教你快速搭建Node.Js服务器的方法教程
Mar 30 Javascript
vue和webpack项目构建过程常用的npm命令详解
Jun 15 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
简化版的vue-router实现思路详解
Oct 19 Javascript
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
《神奇女侠:血脉》神力女超人大战犯罪公司
2020/04/09 欧美动漫
win2003服务器使用WPS的COM组件的一些问题解决方法
2012/01/11 PHP
PHP实现的json类实例
2015/07/28 PHP
PHP框架laravel的.env文件配置教程
2017/06/07 PHP
跨浏览器开发经验总结(三)   警惕“IE依赖综合症”
2010/05/13 Javascript
JS时间选择器 兼容IE6,7,8,9
2012/06/26 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
Vue 过滤器filters及基本用法
2017/12/26 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
JS实现拖动模糊框特效
2020/08/25 Javascript
[15:41]教你分分钟做大人——灰烬之灵
2015/03/11 DOTA
python构造icmp echo请求和实现网络探测器功能代码分享
2014/01/10 Python
Python多进程编程技术实例分析
2014/09/16 Python
Python安装图文教程 Pycharm安装教程
2018/03/27 Python
python向已存在的excel中新增表,不覆盖原数据的实例
2018/05/02 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
python实现求两个字符串的最长公共子串方法
2018/07/20 Python
Python中三维坐标空间绘制的实现
2020/09/22 Python
python实现经典排序算法的示例代码
2021/02/07 Python
基于CSS3实现图片模糊过滤效果
2015/11/19 HTML / CSS
微软俄罗斯官方网站:Microsoft俄罗斯
2016/09/18 全球购物
Answear匈牙利:来自全球200多个知名时尚品牌
2017/04/21 全球购物
viagogo波兰票务平台:演唱会、体育比赛、戏剧门票
2018/04/23 全球购物
幼儿园教师岗位职责
2014/03/17 职场文书
力学专业求职信
2014/07/23 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
学校施工安全责任书
2015/01/29 职场文书
军事博物馆观后感
2015/06/05 职场文书
爱国电影观后感
2015/06/19 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js