javascript比较文档位置_javascript技巧

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 都采取了一些主动落实这一方法。我依然期待看到更多的浏览器进入,以帮助向前推动。

时间: 2025-01-21 12:58:30

javascript比较文档位置_javascript技巧的相关文章

初识javascript 文档碎片_javascript技巧

后来是一技术群问到以下一段代码: 复制代码 代码如下: function html2node(s) { var d = document.createElement('div'); d.innerHTML = s; if (d.childNodes.length == 1) return d.childNodes[0]; var df = document.createDocumentFragment(); while (d.firstChild) df.appendChild(d.firstC

javascript获取文档坐标和视口坐标_javascript技巧

元素的位置是以像素度量的,向右代表X坐标的增加,向下代表Y坐标的增加,但是,有两个不同的点作为坐标系的原点:元素的X和Y坐标可以相对于文档的左上角或者相对于在职中显示文档的视口的左上角. 在定级窗口和标签页中,"视口"只是实际显示文档内容的浏览器的一部分:它不包括浏览器的"外壳"(如菜单.工具条和标签页). 针对框架也中显示的文档,是口试定了框架页的<iframe>元素.无论在何种情况下,当讨论元素的位置是,必须弄清楚所使用的坐标是文档坐标还是视口坐标.

word文档排版打印技巧

  1. 版大图小或纸大版小 当版面中的图片或表格远远小于纸张尺寸时,若任由默认设置来打印,那么打印出来的版面会显得空白较多,看起来很不协调.此时需要根据情况,采取相应的措施来解决. 均衡边距,图片置中 如果要打印从网页中截取的一块地图,直接发送到打印机可能会有多余的空白,效果难看,可将这块地图复制后植入到WPS(或Word)空白版面中.这时发现版面不合适,而拖动图片又无法将其置于正中.这是因为默认图片采用了"嵌入式"的版式,要实现居中,可将图片看作一个"字"来处理

Word 2007选取文档内容的技巧 及如何去掉修改标记

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   Microsoft Word在当前使用中是占有巨大优势的文字处理器,这使得Word专用的档案格式Word 文件(.doc)成为事实上最通用的标准.Word文件格式的详细资料并不对外公开.Word文件格式不只一种,因为随Word软件本身的更新,文件格式也会或多或少的改版,新版的格式不一定能被旧版的程序读取(大致上是因为旧版并未内建支援新版格式的能力).微软已经详细

javascript 拖放效果实现代码_javascript技巧

有许多理由让你在页面中加入拖放的功能,其中最简单的理由是重新组织数据.举个例子,你可能希望用户能够重组一系列的页面元素,通过放置一个input或 select组件在各个元素的旁边来代表它们的顺序是一种解决方案,使该组元素可以被拖放是一种替代方案.或者也许你想在网站上拥有一个可以被用户移动的导航窗口.这些都是使用拖放功能的简单理由,因为你能够实现! 在你的网页上实现拖放的效果并不是很复杂.首先,我们知道鼠标的位置,然后我们需要了解用户什么时候点击一个元素,以至于我们知道要准备开始拖动它,最后我们要

探讨JavaScript语句的执行过程_javascript技巧

废话不多说,直奔主题了.javascript的运行原理总结如下: 1.按照html文档流顺序执行javascript代码 浏览器是按照文档流从上到下逐步解析页面结构和信息的,javascript代码作为嵌入的脚本作为html文档的组成部分,所以javascript代码在加载时的执行顺序也是根据脚本标签<script>的出现顺序来确定的. 如果通过脚本标签<script>的src属性来引入外部.js文件,那么它也将按照其语句出现的顺序来执行,而且执行过程是文档加载的一部分.不会因为是

javascript 获取文档所有图片

javascript 获取文档所有图片 function updateUI(){     var imgs = document.getElementsByTagName("img");     for(var i=0, len=imgs.length; i < len; i++){         imgs[i].title = document.title + " image " + i;     }       var msg = document.ge

金山WPS Office文档编辑实用技巧五则

用WPS纵向文本选择去除名单多余数据 在网上搜到一份NBA效率值的前百位排名,不错的资料,马上把它下到自己电脑上存起来.(如下图所示)但说我对这份名单的排名不感兴趣,只要进了百强,从排前三的乔丹奥尼尔罗宾逊到最后的琼斯在我看来都是一样棒的.所以我决定把名次删掉,只留球员人名.操作过程我写在下面,那几位问我怎样快速删除竖行文字的同事可以看一下,以后处理类似的文件就知道怎么办了. 文档编辑实用技巧五则-office实用技巧">电脑教程 论坛上的名单格式有点乱,而且我不想要前面的那个名次 打开W

浅谈Javascript线程及定时机制_javascript技巧

setTimeout.setInterval的使用 Javascript api文档中定义setTimeout和setInterval第二个参数意义分别为间隔多少毫秒后回调函数被执行和每隔多少毫秒回调函数被执行.但随着工作经验的积累,我们发现事实并非如此. 比如 div.onclick=function(){ setTimeout(function(){ document.getElementById('input').focus(); },0); } 就解释不通了,立即执行就立即执行呗,干嘛还