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

本文链接：https://blog.youkuaiyun.com/ymc_webpack/article/details/56489148

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>