使用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的元素脱离文档流,但不完全脱离,只是提升了半层:
随机推荐
- Android 中屏幕点击事件的实现
在Android中如何用代码触发按钮点击事件?我想要触发代码执行按钮点击.实现对于单击按钮事件的模拟,触发单击按钮进入另一个界面. 就是声明一下什么moonlightcheese被声明了:在andro ...
- MFC图形图像
一.CDC类 CDC类简介 CDC类是一个设备上下文类. CDC类提供了用来处理显示器或打印机等设备上下文的成员函数,还有处理与窗口客户区关联的显示上下文的成员函数.使用CDC的成员函数可以进行所有的 ...
- mahout 安装
1. 下载mahout-distribution-0.5.tar.gz 并解压: 2.配置环境变量: /etc/profile export MAHOUT_HOME=/home/mahout/ exp ...
- Mac vim iterm2配色方案
转自:http://www.vpsee.com/2013/09/use-the-solarized-color-theme-on-mac-os-x-terminal/ 相信长期浸泡在终端和代码的小伙伴 ...
- mysql统计一张表中条目个数的方法
统计一张表中条目的个通常的SQL语句是: select count(*) from tableName; #or ) from tableName; #or 统计一个列项,如ID select cou ...
- 关于C++ vector的拷贝
定义了vector变量,在使用时直接用了等号赋值,后来发现有问题,就查了一下vector怎么赋值? 说明:vector是一个构造对象,不能直接使用=符号进行复制,必须迭代每个元素来复制.或者重载=操作 ...
- hive常见问题解决干货大全
本人,苦心多时,历经磨难和心血,与大家共同攻克问题难关! 问题一: FAILED: Execution Error, return code 1 from org.apache.hadoop.hive ...
- C#应用Newtonsoft.Json操作json
Newtonsoft.Json是一个开源的C#操作json的项目,应用起来非常简单.其github地址; 下面的代码演示了如何应用Newtonsoft.Json序列号和反序列化. using Newt ...
- 最新CentOS6.x下redis安装
1:软件环境: 系统版本:CentOS release 6.5 redis版本:redis-cli 3.0.5 安装目录:"/usr/local/redis" 下载软件:" ...
- OAuth 2.0介绍学习
OAuth2.0是OAuth协议的下一版本,但不向后兼容OAuth 1.0即完全废止了OAuth1.0. OAuth 2.0关注客户端开发者的简易性.要么通过组织在资源拥有者和HTTP服务商之间的被批 ...