《JS高程(3)》DOM2和DOM3-范围range-第12章笔记(25)

implementation 属性可返回处理该文档的 DOMImplementation 对象。

DomImplementation 对象可执行与文档对象模型的任何实例无关的任何操作。

DomImplementation 接口是一个占位符,存放不专属任何特定 Document 对象,而对 DOM 实现来说是“全局性”的方法。可以通过任何 Document 对象的 implementation 属性获得对 DomImplementation 对象的引用。

方法 描述
createDocument(): 创建一个新 Document 对象和指定的根元素。
createDocumentType(): 创建空的 DocumentType 节点。
hasFeature(): 检查 DOM implementation 是否可执行指定的特性和版本。

DOM2在Document中定义了createRange()方法。
检测方法:

var supportsRange = document.implementation
.hasFeature("Range", "2.0");
var alsoSupportsRange = (typeof document.createRange == "function")

创建方式:

var range = document.createRange();
属性/方法 描述
startContainer: 包含范围起点的节点(集选区中第一个节点的父节点)。
startOffset: 范围在startContainer中起点的偏移量。如果startContainer是文本节点、注释节点或CDATA节点,那么startOffset就是范围起点之前跳过的字符数量。否则startOffset就是范围内第一个子节点的索引。
endContainer: 包含范围终点的节点(集选区中最后一个节点的父节点)。
endOffset: 范围在endContainer中起点的偏移量。(与startOffset规则相同)。
selectNode(): 接收一个参数(DOM节点),以该节点中的信息来填充范围包括其自身。
selectNodeContents(): 接收一个参数(DOM节点),以该节点中的信息来填充范围不包括其自身。
setStart(): 接收两个参数:参照点(startContainer)和偏移量值(startOffset)。
setEnd(): 接收两个参数:参照点(endContainer)和偏移量值(endOffset)。
deleteContents(): 从文档中删除范围所包含的内容。
extractContents(): 从文档中删除范围所包含的内容,并返回范围的文档片段。
cloneContents(): 创建范围对象的副本吗,不对原始DOM进行任何修改。
insertNode(): 像范围选区的开始处插入一个节点。
surroundContents(): 环绕节点内容,只接受一个参数即环绕节点。不能夸抱歉使用。
collapse(): 用于折叠范围,接受一个参数-布尔值,表示要折叠到范围的那一端。true表示起点,false表示终点。
compareBoundaryPoints(): 确定范围是否有公共边界(起点或终点)。范围1在范围2之前返回“-1”,相等返回“0”,范围1在范围2之后返回“1”
cloneRange(): 复制范围,创建调用范围的副本。
detach(): 清理DOM范围。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div >
    <p id="p1"><b>Hello</b> world!</p>
</div>
    <script>
        var p1 = document.getElementById('p1'),
            helloNode = p1.firstChild.firstChild;
            range = document.createRange();
        range.selectNode(helloNode);
        var span = document.createElement("span");
        span.style.background = "yellow";
        range.surroundContents(span);
        range.detach(); //从文档中分离
        range = null;  //解除引用
    </script>
</body>
</html>

IE9支持,IE8以下版本不支持DOM范围。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章