发现实际项目中经常需要判断一个节点是否是另一个节点的子节点,google了一下以及在做富文本的时候顺便看了下mozilla的api文档,发现个compareDocumentPosition方法,可用来比较两个节点位置。ie则有更好用的方法contains,只要传入的节点是其子孙节点就返回true。 more

compareDocumentPosition的返回值的说明如下(来自杂之学):

/*
* compareDocumentPosition: 属于 DOM Level 3 Core
* referrer: http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition
* value: 返回值(返回 otherNode 与 node 相比较的结果):
* DOCUMENT_POSITION_DISCONNECTED = 0x01;
* DOCUMENT_POSITION_PRECEDING = 0x02; // 前面
* DOCUMENT_POSITION_FOLLOWING = 0x04; // 后面
* DOCUMENT_POSITION_CONTAINS = 0x08; // 包含
* DOCUMENT_POSITION_CONTAINED_BY = 0x10; // 被包含
* 可能值(组合值):
* 00000000: 同一节点 (0x00|0)
* 00000001: 不在同一文档中 (0x01|1)
* 00010100: otherNode 为 node 的后代节点 (0x14|20)
* 00001010: otherNode 为 node 的祖先节点 (0x0A|10)
* 00000100: otherNode 在 node 后面 (0x04|4)
* 00000010: otherNode 在 node 前面 (0x02|2)
*/
因此封装了下面一个方法用在了webqq的富文本和自定义的mouseenter和mouseleave事件
/**
 * 判断一个节点是否是某个父节点的子节点,
 * 默认不包含parent === child的情况
 * @param {HTMLElement} parent
 * @param {HTMLElement} child
 * @param {Boolean} containSelf 指示是否可包含parent等于child的情况
 * @return {Boolean} 包含则返回true
 */
var contains = function(parent, child, containSelf){
    if(!containSelf && parent === child){
        return false;
    }
    if(parent.compareDocumentPosition){//w3c
        var res = parent.compareDocumentPosition(child);
        if(res === 20){
            return true;
        }
    }else{
        if(parent.contains(child)){//ie
            return true;
        }
    }
    return false;
};

参考:

Comments
Write a Comment
  • frank reply

    不错哦,请求转载:<a href='http://bbs.ajaxjs.com/forum.php?mod=viewthread&amp;tid=3764&amp;page=1&amp;extra=#pid10557' rel='nofollow noopener'>http://bbs.ajaxjs.com/forum...</a>

Tags

css3   魅力CSS   nodejs   loading   CSS   疯狂的菊花   html5   animation   compiler   编译脚本   png   WordPress   智能   旅行   优化   模板   历史记录   跨域   manifest   frame   canvas   动画   js   离线应用   codelet   transform   抽取   java   兼容问题   发布脚本   富文本   那一年在他乡   htaccess   iframe   帧动画   加载速度   intelligent   跨浏览器   DNS解析   插件   checkbox   单边   step-start   vary   复选框   自动更新   转换   文本溢出   盒子阴影   menu   blob   西安   滑动背景   box-shadow   内存占用   键盘事件   python   auto   text overflow   background   所见所得   android   rotate   字节数   合并   文本框   slide   字符串连接符   协议   伪类   兄弟选择符   网格   节点位置比较   空白   斜线拼接   自定义命令   溢出   clock   素描   无法更新   分隔符   字符编码   body   下载文件   精灵图   step   nodej   ubuntu   apache   css3选择器   创建文件   多级菜单   编辑状态   ajax   阴影   垂直   chrome   管道   时钟   firefox   背景   文件上传   createobjecturl   游记   下载   放射渐变   版本号   宽高   照片   localStorage   渐变背景   图片   图片拼接   属性值检测   自动生成   计算   返回键   oauth   合图   reset   调用   cavnas   漏洞   按钮   margin   线性渐变   xsrf   被黑   tab   checked   修复   border   消失   step-end   sprite   common-upload   菜单   兄弟选择器   字符串   svn   九寨沟   缩进   css遮罩   svg   添加系统服务   gzip   插入代码   动态   加速   模拟