PS:尊重原创,转载请注明来自http://www.cnblogs.com/Raoh/p/js_compareDocumentPosition_between_two_node.html

使用compareDocumentPosition方法比较两个节点,将会返回描述它们在文档中位置的整数。

compareDocumentPosition的枚举值
二进制值 枚举值 位置信息
000000          0 元素一致
000001          1 没有关系,两个节点不属于同一个文档 
000010          2 节点 A 在节点 B 后面 
000100          4 节点 A 在节点 B 前面 
001000          8 节点 A 位于 节点 B 内部
010000          16 节点 A 包含节点 B 
100000          32 没有关系,或是两个节点是同一元素的两个属性

拿到这个整数之后,通过一些位运算,我们就能得出元素位置的详细信息。(实际上,这与C#语言中的[Flags]一个道理)

直接上示例代码:

var doc = document,
html = doc.documentElement,
body = doc.body; var pos = html.compareDocumentPosition(body);// var after = pos & 2;//
console.log('html在body后面',!!after); var before = pos & 4;//
console.log('html在body前面',!!before); var inside = pos & 8;//
console.log('html在body内部',!!inside); var contain = pos & 16;//
console.log('html包含body',!!contain);

使用compareDocumentPosition比较两个元素在文档中的位置的更多相关文章

  1. jquery获取元素在文档中的位置信息以及滚动条位置(转)

    jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886     原文链接 原创 201 ...

  2. html中如何获取元素在文档中的位置

    html中如何获取元素在文档中的位置 一.总结 一句话总结: $("#elem").offset().top $("#elem").offset().left ...

  3. Java解析word,获取文档中图片位置

    前言(背景介绍): Apache POI是Apache基金会下一个开源的项目,用来处理office系列的文档,能够创建和解析word.excel.ppt格式的文档. 其中对word文档的处理有两个技术 ...

  4. java POI往word文档中指定位置插入表格

    1.Service  demo import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.a ...

  5. jquery 追加元素/jquery文档处理,插入、修改、移动、删除指定的DOM元素.

    jquery 追加元素 $("#content").append("..."); // 添加到元素内部最后面 $("#content").p ...

  6. CSS文档流与块级元素和内联元素(文档)

    CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...

  7. Effective Java 第三版——56. 为所有已公开的API元素编写文档注释

    Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...

  8. CSS-position 属性&元素脱离文档流引发父级边框塌陷问题

    CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...

  9. float的元素脱离文档流,但不完全脱离,只是提升了半层;

    float的元素脱离文档流,但不完全脱离,只是提升了半层:

随机推荐

  1. PHP 魔术方法总结

    1.__get.__set 这两个方法是为在类和他们的父类中没有声明的属性而设计的 __get( $property ) 当调用一个未定义的属性时访问此方法 __set( $property, $va ...

  2. lighttpd+fastcgi模块分析

    一开始不怎么明白fastcgi和cgi的区别,查了资料说,fastcgi多了一个进程池,不要每次都fork和退出 这个不是重点,还是对着代码看吧 怎样在lighttpd运行php呢,需要下面这样配置 ...

  3. trie树 Codeforces Round #367 D Vasiliy's Multiset

    // trie树 Codeforces Round #367 D Vasiliy's Multiset // 题意:给一个集合,初始有0,+表示添加元素,-去除元素,?询问集合里面与x异或最大的值 / ...

  4. ping命令的几个简单使用

    发觉linux下的ping命令花样还挺多的,下面是几个例子 1.ping www.baidu.com,最粗糙的用法,此时主机将不停地向目的地址发送ICMP echo request数据包,直至你按下C ...

  5. 安装CPqD/ofdissector遭遇的错误

    为了安装支持openflow1.3的wireshark插件,在下载了ofdissector.git,并进入了其src目录后,执行scons install,出现如下错误: util/FieldMana ...

  6. 第二百七十八天 how can I 坚持

    生命的意义.必须要做点什么啊.今年我们二十七八岁. 遇事不急,理清头绪就没那么复杂. 今天突然有点悔意,元旦好像应该不回去看房,花销有点大了,算了,过去的就让他过去吧,都是回忆.至少玩的挺嗨. 记住, ...

  7. JSF 2.0 hello world example

    In this tutorial, we will show you how to develop a JavaServer Faces (JSF) 2.0 hello world example, ...

  8. Linux上svn服务器的搭建

    安装svn服务器 直接用yum安装,命令如下: #yum install -y subversion 验证是否安装成功. #svnserve --version 创建SVN版本库 在home目录下创建 ...

  9. OAuth2-Server-php

    Yii 有很多 extension 可以使用,在查看了 Yii 官网上提供的与 OAuth 相关的扩展后,发现了几个 OAuth2 的客户端扩展,但是并没有找到可以作为 OAuth2 Server 的 ...

  10. JS一定要放在Body的最底部么? 聊聊浏览器的渲染机制

    请参看文章 https://segmentfault.com/a/1190000004292479 网上的回答: 1.js加载会阻塞其它内容加载,使页面加载时间更长,尤其是js文件太大,有的页面js文 ...