JS魔法堂:判断节点位置关系
一、前言
在polyfill querySelectorAll 和写弹出窗时都需要判断两个节点间的位置关系,通过jQuery我们可以轻松搞定,但原生JS呢?下面我将整理各种判断方法,以供日后查阅。
二、祖孙关系
html
<div id="ancestor">
<div id="parent">
<div id="son">son</div>
</div>
</div>
<div id="other">other</div>
common.js
var ancestor = document.getElementById('ancestor');
var parent = document.getElementById('parent');
var son = document.getElementById('son');
var other = document.getElementById('other');
方法一:通过Selection对象
/** 定义判断祖孙关系函数
* @param {HTMLElement} parentNode
* @param {HTMLElement} sonNode
*/
var has = function(parentNode, sonNode){
if (parentNode === sonNode) return true;
var selection = window.getSelection();
selection.selectAllChildren(parentNode);
var ret = selection.containsNode(sonNode, false);
return ret;
};
// 调用
console.log(has(ancestor, son)); // 显示true
console.log(has(ancestor, other)); // 显示false
缺点:仅仅FF支持,其他浏览器一律无效
1. 执行 selection.selectAllChildren(parentNode)
时,parentNode的内容会被高亮,并且原来高亮的部分将被取消;
2. chrome下, selection.containsNode()恒返回false
;
3. IE9~11下的Selection类型对象没有containsNode方法;
4. IE5.5~8下没有Selection类型;
关于IE下的[object Selection]和[object MSSelection]类型(详细可浏览《JS魔法堂:细说Selection和MSSelection类型》) 1. IE11仅有[object Selection]类型 获取方式: document.getSelection() 或 window.getSelection() 2. IE9~10有[object MSSelection]和[object Selection]两种类型 获取[object MSSelection]: document.selection 获取[object Selection]: document.getSelection() 和 window.getSelection() 3. IE5.5~IE8仅有[object MSSelection]类型 获取方式: document.selection
注意:document.selection是IE的特有属性。
方法二:通过Range对象
var has = function(parentNode, sonNode){
if (parentNode === sonNode) return true;
var r1 = document.createRange(), r2 = document.createRange();
r1.selectNode(parentNode);
r2.selectNode(sonNode);
var startRet = r1.compareBoundaryPoints(Range.START_TO_START, r2);
var endRet = r1.compareBOundaryPoints(Range.END_TO_END, r2);
var ret = startRet === -1 && endRet === 1;
return ret;
};
缺点:不兼容IE5.5~8(IE9+、FF和Chrome均支持)
1. IE5.5~8没有 document.createRange()
方法
关于[object Range]、[object TextRange]和[object ControlRange]类型 首先明确的是[object Range]是符合W3C标准的,而[object TextRange]和[object ControlRange]是IE独有的。 (详细可浏览《JS魔法堂:细说Range、TextRange和ControlRange类型》) 1. 通过document.createRange()创建[object Range]对象 2. 通过window.getSelection().getRangeAt({unsigned int32} index)获取[object Range]对象 3. 通过document.selection.createRange()或document.selection.createRangeCollection()方法获取[object TextRange]对象,并且无法像Range对象内容通过selectNode方法直接绑定到DOM片段中。
方法三:通过contains方法
var has = function(parentNode, sonNode){
return parentNode.contains(sonNode);
};
console.log(has(ancestor, ancestor));// 返回true
console.log(has(ancestor, son));// 返回true
console.log(has(ancestor, other));// 返回false
优点:简单直接
缺点:兼容性问题
支持——chrome、 firefox9+、 ie5+、 opera9.64+(估计从9.0+)、safari5.1.7+
不支持——FF
方法四:通过compareDocumentPosition方法
var has = function(parentNode, sonNode){
if (parentNode === sonNode) return true;
var rawRet = parentNode.compareDocumentPosition(sonNode);
var ret = !!(rawRet & 16);
return ret;
};
compareDocumentPosition可以算是W3C标准中比较两节点位置关系的一大利器,不仅可以判断祖孙关系,还可以判断其他关系哦
var ret = A.compareDocumentPosition(B); 返回值ret的意思如下: Bits Number Meaning 000000 0 元素一致 000001 1 节点在不同的文档(或者一个在文档之外) 000010 2 节点 B 在节点 A 之前 000100 4 节点 A 在节点 B 之前 001000 8 节点 B 包含节点 A 010000 16 节点 A 包含节点 B 100000 32 浏览器的私有使用
方法五:递归遍历
var has = function(parentNode, sonNode){
if (parentNode === sonNode) return true;
var p = sonNode.parentNode;
if (!p.ownerDocument){
return false;
}
else if (p !== parentNode){
return has(parentNode, p);
}
else{
return true;
}
}
优点:所有浏览器均通用
缺点:当节点层级深时,效率较低。
综合方案一,来自司徒正美(http://m.cnblogs.com/57731/1583523.html?full=1):
//2013.1.24 by 司徒正美
function contains(parentEl, el, container) {
// 第一个节点是否包含第二个节点
//contains 方法支持情况:chrome+ firefox9+ ie5+, opera9.64+(估计从9.0+),safari5.1.7+
if (parentEl == el) {
return true;
}
if (!el || !el.nodeType || el.nodeType != 1) {
return false;
}
if (parentEl.contains ) {
return parentEl.contains(el);
}
if ( parentEl.compareDocumentPosition ) {
return !!(parentEl.compareDocumentPosition(el) & 16);
}
var prEl = el.parentNode;
while(prEl && prEl != container) {
if (prEl == parentEl)
return true;
prEl = prEl.parentNode;
}
return false;
}
综合方案二,来自Sizzle(https://github.com/jquery/sizzle/blob/master/src/sizzle.js#L688)
注意:Sizzle的contains版本是contains(ancestor,ancestor)返回false的。
// Element contains another
// Purposefully does not implement inclusive descendent
// As in, an element does not contain itself
contains = hasCompare || rnative.test( docElem.contains ) ?
function( a, b ) {
var adown = a.nodeType === 9 ? a.documentElement : a,
bup = b && b.parentNode;
return a === bup || !!( bup && bup.nodeType === 1 && (
adown.contains ?
adown.contains( bup ) :
a.compareDocumentPosition && a.compareDocumentPosition( bup ) & 16
));
} :
function( a, b ) {
if ( b ) {
while ( (b = b.parentNode) ) {
if ( b === a ) {
return true;
}
}
}
return false;
};
综合方案三,我那又长又臭的版本^_^
var rNative = /[^{]+{s*[native code]s*}/;
var docEl = document.documentElement;
var contains = rNative.test(docEl.contains) && function(ancestor, descendant){
if (ancestor === descendant) return true;
ancestor = ancestor.nodeType === 9 ? ancestor.documentElement : ancestor;
return ancestor.contains(descendant);
} ||
rNative.test(docEl.compareDocumentPosition) &&
function(ancestor, descendant){
if (ancestor === descendant) return true;
ancestor = ancestor.documentElement || ancestor;
return !!(ancestor.compareDocumentPosition(descendant) & 16);
} ||
rNative.test(document.createRange) &&
function(ancestor, descendant){
if (ancestor === descendant) return true;
var r1 = document.createRange(), r2 = document.createRange();
r1.selectNode(ancestor.documentElement || ancestor);
r2.selectNode(descendant.documentElement || descendant);
三、总结
尊重原创,转载请注明
- 数据库安全·保护表字段
- 【实践】伪造名人的脸—做一个小示例了解生成式对抗网络
- Spring 常见问题与解决方法
- 如何通过css控制内容显示顺序 第二行的内容优先显示
- 杨廷琨 - 用SQL解析神奇的扑克牌魔术
- Spring boot with Spring security
- Spring RestFul and RestTemplate
- Spring boot with Velocity template
- Oracle 11g R2 RAC 高可用连接特性 – SCAN 详解
- Spring boot · 链接池配置
- Linux下命令行图片格式转换
- 用SQL解一道有趣的数学题:Gauss和Poincare
- OpenSSL 转换证书格式
- 电子邮件服务器DKIM配置
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Python numpy矩阵处理运算工具用法汇总
- Django后端分离 使用element-ui文件上传方式
- PHP fprintf()函数用法讲解
- django template实现定义临时变量,自定义赋值、自增实例
- PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
- PHP写API输出的时用echo的原因详解
- thinkphp5使用无限极分类
- 手写dubbo框架7-SPI(dubbo和jdk的区别)
- Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
- YII框架学习笔记之命名空间、操作响应与视图操作示例
- python实现批量命名照片
- 手写dubbo框架8-SPI 自适应扩展机制
- thinkphp5框架扩展redis类方法示例
- 详解php中生成标准uuid(guid)的方法
- 基于Python爬取fofa网页端数据过程解析