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. wireshark tcp 协议分析 z

    虽然知道wireshark是抓包神器,只会大概大概用一下,还用一下下tcpdump,略懂一点BPF过滤器,也知道一点怎么用 wirkshark过滤相关的报文,但是对于详细的字段的含义,如何查看TCP的 ...

  2. windows远程连接linux桌面---使用tightvnc或者tigervnc

    一.安装tightvnc: tightvnc的安装在安装包中有详细的说明(README文件) 首先你要确保linux已经安装jpeg和zlib库, 2.编译 执行如下两个命令: [root@local ...

  3. 学习笔记 - 深究Bitmap压缩避免OOM的核心inSampleSize的最佳取值

    /** * 测试代码,通过在SDCard根目录放置几种不同大小的图片, 来自动测试压缩方式是否有效同时看是否会内存不够. * * @since * By:AsionTang * At:2014年3月2 ...

  4. 使用libzplay库封装一个音频类

    装载请说明原地址,谢谢~~      前两天我已经封装好一个duilib中使用的webkit内核的浏览器控件和一个基于vlc的用于播放视频的视频控件,这两个控件可以分别用在放酷狗播放器的乐库功能和MV ...

  5. Clang Language Extensions

    Xcode 本文是自<Clang Language Extensions> 中选取部分与 Objective-C 相关的内容翻译,由于作者水平有限,如存在理解错误或翻译不到位的地方,还请指 ...

  6. 在ubuntu下配置android开发环境

    http://developer.android.com/sdk/installing/index.html 基本上上面官网的链接可以解决所有问题,但是具体在安装过程中还是有一些坑. 说说具体流程 1 ...

  7. 百家搜索:在网站中添加Google、百度等搜索引擎

    来源:http://www.ido321.com/1143.html 看到一些网站上添加了各种搜索引擎.如Google.百度.360.有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键 ...

  8. 我用dedecms有感

    ---恢复内容开始--- 最近接了一个私单,简单的学校网站,注意,我一看上去是感觉很快,仿站,对方说这个东西你三天就能搞定啦,我也这么想的 (没经验啊) 接下来,我想都没想就用dedecms去做,之前 ...

  9. C++读取、旋转和保存bmp图像文件编程实现

    以前也遇到过bmp文件的读写.这篇博客很好,写的其他内容也值得学习. 参考:http://blog.csdn.net/xiajun07061225/article/details/6633938  学 ...

  10. delphi回调函数

    文章来源: http://anony3721.blog.163.com/blog/static/5119742010866050589/ 一.主单元 unit UnMain; interface us ...