使用compareDocumentPosition比较两个元素在文档中的位置
PS:尊重原创,转载请注明来自http://www.cnblogs.com/Raoh/p/js_compareDocumentPosition_between_two_node.html
使用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比较两个元素在文档中的位置的更多相关文章
- jquery获取元素在文档中的位置信息以及滚动条位置(转)
jquery获取元素在文档中的位置信息以及滚动条位置 http://blog.csdn.net/qq_34095777/article/details/78750886 原文链接 原创 201 ...
- html中如何获取元素在文档中的位置
html中如何获取元素在文档中的位置 一.总结 一句话总结: $("#elem").offset().top $("#elem").offset().left ...
- Java解析word,获取文档中图片位置
前言(背景介绍): Apache POI是Apache基金会下一个开源的项目,用来处理office系列的文档,能够创建和解析word.excel.ppt格式的文档. 其中对word文档的处理有两个技术 ...
- java POI往word文档中指定位置插入表格
1.Service demo import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.a ...
- jquery 追加元素/jquery文档处理,插入、修改、移动、删除指定的DOM元素.
jquery 追加元素 $("#content").append("..."); // 添加到元素内部最后面 $("#content").p ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- Effective Java 第三版——56. 为所有已公开的API元素编写文档注释
Tips 书中的源代码地址:https://github.com/jbloch/effective-java-3e-source-code 注意,书中的有些代码里方法是基于Java 9 API中的,所 ...
- CSS-position 属性&元素脱离文档流引发父级边框塌陷问题
CSS-position 属性 CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动(float)和绝对定位(position). 除非专门指定,否则所有框都在普通流中定位.也就是说,普通流中 ...
- float的元素脱离文档流,但不完全脱离,只是提升了半层;
float的元素脱离文档流,但不完全脱离,只是提升了半层:
随机推荐
- wireshark tcp 协议分析 z
虽然知道wireshark是抓包神器,只会大概大概用一下,还用一下下tcpdump,略懂一点BPF过滤器,也知道一点怎么用 wirkshark过滤相关的报文,但是对于详细的字段的含义,如何查看TCP的 ...
- windows远程连接linux桌面---使用tightvnc或者tigervnc
一.安装tightvnc: tightvnc的安装在安装包中有详细的说明(README文件) 首先你要确保linux已经安装jpeg和zlib库, 2.编译 执行如下两个命令: [root@local ...
- 学习笔记 - 深究Bitmap压缩避免OOM的核心inSampleSize的最佳取值
/** * 测试代码,通过在SDCard根目录放置几种不同大小的图片, 来自动测试压缩方式是否有效同时看是否会内存不够. * * @since * By:AsionTang * At:2014年3月2 ...
- 使用libzplay库封装一个音频类
装载请说明原地址,谢谢~~ 前两天我已经封装好一个duilib中使用的webkit内核的浏览器控件和一个基于vlc的用于播放视频的视频控件,这两个控件可以分别用在放酷狗播放器的乐库功能和MV ...
- Clang Language Extensions
Xcode 本文是自<Clang Language Extensions> 中选取部分与 Objective-C 相关的内容翻译,由于作者水平有限,如存在理解错误或翻译不到位的地方,还请指 ...
- 在ubuntu下配置android开发环境
http://developer.android.com/sdk/installing/index.html 基本上上面官网的链接可以解决所有问题,但是具体在安装过程中还是有一些坑. 说说具体流程 1 ...
- 百家搜索:在网站中添加Google、百度等搜索引擎
来源:http://www.ido321.com/1143.html 看到一些网站上添加了各种搜索引擎.如Google.百度.360.有道等,就有点好奇,这个怎么实现?研究了一各个搜索引擎怎么传送关键 ...
- 我用dedecms有感
---恢复内容开始--- 最近接了一个私单,简单的学校网站,注意,我一看上去是感觉很快,仿站,对方说这个东西你三天就能搞定啦,我也这么想的 (没经验啊) 接下来,我想都没想就用dedecms去做,之前 ...
- C++读取、旋转和保存bmp图像文件编程实现
以前也遇到过bmp文件的读写.这篇博客很好,写的其他内容也值得学习. 参考:http://blog.csdn.net/xiajun07061225/article/details/6633938 学 ...
- delphi回调函数
文章来源: http://anony3721.blog.163.com/blog/static/5119742010866050589/ 一.主单元 unit UnMain; interface us ...