《JS高程（3）》DOM扩展-专有扩展-第11章笔记(21)

最新推荐文章于 2025-11-29 13:42:57 发布

原创最新推荐文章于 2025-11-29 13:42:57 发布 · 329 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #api

向DOM中添加专有扩展，以弥补功能上的不足。

文档模式

IE8引入了一个新的概念叫“文档模式”，页面的文档模式决定了可以使用什么功能，文档模式决定了你可以使用哪个级别的CSS，可以在JavaScript中可以使用哪些API，以及如何对待文档类型，到了IE9，总共有4中文档模式。

children属性

children属性时HTMLCollection的实例，只包含元素中同样还是元素的子节点，除此之外，children属性与childNodes没有什么区别

var childCount = element.children.length;
var childCount = element.children[0];

contains()方法

用于确认某个节点是不是另一个节点的后代。
祖先节点调用contain()方法，也就是搜索开始的节点，接受一个参数，既要检测的后代节点。
如果被检测的节点是后代节点，该方法返回true，否则返回false：

alert(document.documentElement.contains(document.body));//true

测试<body>元素是不是<html>元素的后代，在格式正确的HTML页面中，以上代码返回true。支持contains()方法的浏览器有IE、Firefox9+、Safari、Opera和Chrome.
使用DOMLevel3 compareDocumentPosition()也能够确定节点间的关系。

掩码	节点关系
1	无关(给定的节点不在当前文档中)
2	居前(给定的节点DOM树中位于参考节点之前)
4	居后(给定的节点DOM树中位于参考节点之后)
8	包含(给定的节点是参考节点的祖先)
16	被包含(给定的节点是参考节点的后代)

为模仿contains(）方法，应该关注的是掩码16。可以对compareDocumentPostion()的结果执行按位与，已确定参考节点（调用compareDocumentPosition()方法的当前节点）是否包含给定的节点（传入的节点）。

var result = document.documentElement.compareDocumentPosition(document.body);
alert(!!(result & 16));

//第一个参数是参考节点，第二个参数是要检查的节点
function contains(refNode, otherNode){
//检测refNode中是否存在contains()方法(能力检测)
    if(typeof reNode.contains == "function" && 
    //检测当前浏览器所用的webkit版本号，版本号>=522则继续执行
(!client.engine.webkit || client.engine.webkit >= 522)){
    return refNode.contains (otherNode);
    //检测refNode中是否存在compareDocumentPosition ()方法(能力检测)
    }else if(typeof refNode.compareDocumentPosition =="function"){
    return !! (refNode.compareDocumentPosition(otherNode) & 16);
    }else{
        var node =otherNode.parentNods;
        do{
            if(node === refNode){
                return true;
            }else{
                node = node.parentNode;
            }
        }while (node !== null);
        return false;
    }
}