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. 使ViewFlipper中的WebView实现手势效果

    使ViewFlipper中的WebView实现手势效果   今天写Blog阅读器的时候遇到了这个问题,把它分享给大家,让同样是新手们少走冤枉路始初写这个功能的时候,用过了好多方法,也耗了不少时间去研究 ...

  2. UIImage 缩放等效果处理

    //等比率缩放 - (UIImage *)scaleToSize:(UIImage *)img size:(CGSize)size{ // 创建一个bitmap的context // 并把它设置成为当 ...

  3. 《Python 学习手册4th》 第九章 元组、文件及其他

    ''' 时间: 9月5日 - 9月30日 要求: 1. 书本内容总结归纳,整理在博客园笔记上传 2. 完成所有课后习题 注:“#” 后加的是备注内容 (每天看42页内容,可以保证月底看完此书) “重点 ...

  4. bzoj 1458 士兵占领(最大流)

    [题意] n行m列,第i行必须放L[i],第j列必须放C[j],有障碍格,求满足条件至少需要放多少. [思路] 至少放多少等价于最多不放多少. 对行列分别建XY点,则连边(S,Xi,a)(Yi,T,b ...

  5. 《GettingThingsDone》--GTD学习笔记(二)-GTD实践指导

    一.准备阶段的建议: 高级的工作管理方法就是学会一套系统并付诸实施,直到将这套系统和方法融入你的工作和生活中. 通过行动使自己感觉良好,要比通过使自己感觉良好而进入一种较佳的行动状态容易的多. 当你在 ...

  6. JAVA与数据库开发(JDBC-ODBC、SQL Server、MySQL)

    1)配置数据库环境和驱动 2)设计数据库结构并创建数据库 3)对数据库进行增删改查操作...

  7. ubuntu14.04.03 vsftpd

    apt-get install vsftpd /etc/vsftpd.conf配置Example listen=YES anonymous_enable=NO local_enable=YES wri ...

  8. homework-01 最大子串和

    题目描述 对于一个给定的数列,求该数列最大的子串和(连续) 问题分析 处理发生区间上的问题时,经常会用一个非常简单经典的思路——部分和(也有叫前缀和).部分和的思想在很多复杂的区间上的算法中都有应用, ...

  9. 随便看看My97DatePicker源码J方法

    如果有一个路径是写错的并且这个路径是写在前面,那么相关的css文件你就别想引进来了 <script language="javascript" type="text ...

  10. AutoCAD.NET二次开发:创建自定义菜单(AcCui)

    从CAD2007之后,Autodesk提供了一个新的程序集AcCui.dll,使用这个程序集,我们可以方便地做一些界面方面的操作,比如创建自定义菜单. 下面介绍一下菜单的创建过程: 1.在项目中添加引 ...