DOM2中的Range

最新推荐文章于 2020-11-04 17:00:15 发布

胡斐小鱼

最新推荐文章于 2020-11-04 17:00:15 发布

阅读量347

点赞数

分类专栏： JavaScript 文章标签： DOM2 Range

本文链接：https://blog.csdn.net/u013137242/article/details/81049292

版权

JavaScript 专栏收录该内容

32 篇文章 0 订阅

订阅专栏

DOM2 级在 Document 类型中定义了 createRange()方法。在兼容 DOM 的浏览器中，这个方法属于 document 对象。使用 hasFeature()或者直接检测该方法，都可以确定浏览器是否支持范围。

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

如果浏览器支持范围，那么就可以使用 createRange()来创建 DOM 范围，如下所示：

var range = document.createRange();

与节点类似，新创建的范围也直接与创建它的文档关联在一起，不能用于其他文档。创建了范围之后，接下来就可以使用它在后台选择文档中的特定部分。而创建范围并设置了其位置之后，还可以针对范围的内容执行很多种操作，从而实现对底层 DOM 树的更精细的控制。

每个范围由一个 Range 类型的实例表示，这个实例拥有很多属性和方法。下列属性提供了当前范围在文档中的位置信息。

startContainer：包含范围起点的节点（即选区中第一个节点的父节点）。
startOffset：范围在 startContainer 中起点的偏移量。如果 startContainer 是文本节点、注释节点或 CDATA 节点，那么 startOffset 就是范围起点之前跳过的字符数量。否则，startOffset 就是范围中第一个子节点的索引。
endContainer：包含范围终点的节点（即选区中最后一个节点的父节点）。
endOffset：范围在 endContainer 中终点的偏移量（与 startOffset 遵循相同的取值规则）。
commonAncestorContainer：startContainer 和 endContainer 共同的祖先节点在文档树中位置最深的那个。

在把范围放到文档中特定的位置时，这些属性都会被赋值。

简单的DOM范围选择

最简的方式就是使用 selectNode()或selectNodeContents()。
两个方法都接受DOM节点作为参数，但是区别在于：selectNode()方法选择整个节点，包括其子节点；而 selectNodeContents()方法则只选择节点的
子节点。

复杂的DOM范围选择

复杂的范围选择，可能跨DOM节点，而且范围的开始位置也许只是在某个节点的中间位置。这时候需要用到的方法就是setStart() 和 setEnd() 。

操作 DOM 范围中的内容

deleteContents() ：删除选区内容；
extractContents() ：与 deleteContents()方法相似，extractContents()也会从文档中移除范围选区。但这两个方法的区别在于，extractContents()会返回范围的文档片段。利用这个返回的值，可以将范围的内容插入到文档中的其他地方。
cloneContents()：克隆选区，并不会删除原有选区；

插入DOM范围中的内容

利用范围，可以删除或复制内容，还可以像前面介绍的那样操作范围中的内容。使用 insertNode() 方法可以向范围选区的开始处插入一个节点。

除了向范围内部插入内容之外，还可以环绕范围插入内容，此时就要使用 surroundContents() 方法。这个方法接受一个参数，即环绕范围内容的节点。在环绕范围插入内容时，后台会执行下列步骤：

提取出范围中的内容（类似执行 extractContent()）；
将给定节点插入到文档中原来范围所在的位置上；
将文档片段的内容添加到给定节点中。

折叠DOM范围

所谓 折叠范围，就是指范围中未选择文档的任何部分（范围开始位置和结束位置重合）。可以用文本框来描述折叠范围的过程。假设文本框中有一行文本，你用鼠标选择了其中一个完整的单词。然后，你单击鼠标左键，选区消失，而光标则落在了其中两个字母之间。

使用 collapse()方法来折叠范围，这个方法接受一个参数，一个布尔值，表示要折叠到范围的哪一端。参数 true 表示折叠到范围的起点，参数 false 表示折叠到范围的终点。要确定范围已经折叠完毕，可以检查 collapsed 属性。

比较DOM范围

在有多个范围的情况下，可以使用 compareBoundaryPoints()方法来确定这些范围是否有公共的边界（起点或终点）。这个方法接受两个参数：表示比较方式的常量值和要比较的范围。表示比较方式的常量值如下所示：

Range.START_TO_START(0)：比较第一个范围和第二个范围的起点；
Range.START_TO_END(1)：比较第一个范围的起点和第二个范围的终点；
Range.END_TO_END(2)：比较第一个范围和第二个范围的终点；
Range.END_TO_START(3)：比较第一个范围的终点和第一个范围的起点。

compareBoundaryPoints()方法可能的返回值如下：如果第一个范围中的点位于第二个范围中的点之前，返回-1；如果两个点相等，返回 0；如果第一个范围中的点位于第二个范围中的点之后，返回 1。

复制 DOM 范围

可以使用 cloneRange()方法复制范围。这个方法会创建调用它的范围的一个副本。

var newRange = range.cloneRange();

新创建的范围与原来的范围包含相同的属性，而修改它的端点不会影响原来的范围。

清理 DOM 范围

在使用完范围之后，最好是调用 detach()方法，以便从创建范围的文档中分离出该范围。调用 detach()之后，就可以放心地解除对范围的引用，从而让垃圾回收机制回收其内存了。来看下面的例子。

range.detach();//从文档中分离
range = null;  //解除引用

在使用范围的最后再执行这两个步骤是我们推荐的方式。一旦分离范围，就不能再恢复使用了。

上述几个点的demo code

<!DOCTYPE html>
<html>

<body>
    <p id="p1">
        <strong>This is a line bolded text.</strong>
        <br />And this is a plain text.
        <br>
        <span>Hello world. bu hahaha~~~</span>
    </p>
    <script>
        const p1 = document.getElementById('p1'),
            strong = document.getElementsByTagName('strong')[0],
            span = document.getElementsByTagName('span')[0];

        const range1 = document.createRange(),
            range2 = document.createRange();

        // 简单范围选择： 选择一个节点
        range1.selectNode(strong);
        console.log(`startContainer : ${range1.startContainer.nodeName}, startOffset: ${range1.startOffset} 
        \n endContainer : ${range1.endContainer.nodeName}, endOffset: ${range1.endOffset}`);

        // 复杂范围选择： setStart() 和 setEnd() 方法
        range2.setStart(p1, 1);
        range2.setEnd(span.childNodes[0], 4);
        console.log(`\nstartContainer : ${range2.startContainer.nodeName}, startOffset: ${range2.startOffset} 
        \n endContainer : ${range2.endContainer.nodeName}, endOffset: ${range2.endOffset}`);

        // 操作 范围 中的 DOM
        let newp = document.createElement('p');
        newp.innerHTML = 'This line will be removed in <strong>3</strong> seconds.';
        document.body.appendChild(newp);
        let newpcopy = document.createElement('p');
        newpcopy.innerHTML = ('extractContents will be remove in <strong>3</strong> seconds.')
        document.body.appendChild(newpcopy);

        range1.selectNode(newp); range2.selectNode(newpcopy);
        let clonenewp = range1.cloneContents();
        console.log(clonenewp);
        setTimeout(() => {
            range1.deleteContents();
            newpcopy = range2.extractContents();
            console.log(newpcopy);
        }, 3000);


        // 插入DOM范围中的内容
        const range3 = document.createRange();
        range3.selectNode(p1);
        const txt = document.createTextNode('I am inserted by insertNode()');
        range3.insertNode(txt);
        // 环绕范围插入内容：surroundContents
        range3.selectNode(txt); // 选择刚才创建的文本节点
        const surSpan = document.createElement('span');
        surSpan.style.color = 'red';
        range3.surroundContents(surSpan);

        // 折叠DOM范围
        console.log(range3.collapsed); // false
        range3.collapse();
        console.log(range3.collapsed); // true;
        // DOM 范围开始位置和结束位置重合
        console.log(range3.startContainer === range3.endContainer, range3.startOffset === range3.endOffset);

        // 比较DOM 范围
        const range4 = document.createRange();
        range4.selectNode(p1.firstChild);
        range3.setStart(p1.firstChild, 4); range3.setEnd(p1.childNodes[1].firstChild, 0);
        range2.setStart(p1, 0); range2.setEnd(p1.firstChild, 0);
        range1.setStart(p1.firstChild, 0); range1.setEnd(p1.childNodes[3], 0);

        // Range.START_TO_START(0)：比较第一个范围和第二个范围的起点； 
        // Range.START_TO_END(1)：比较第一个范围的起点和第二个范围的终点； 
        // Range.END_TO_END(2)：比较第一个范围和第二个范围的终点； 
        // Range.END_TO_START(3)：比较第一个范围的终点和第一个范围的起点。
        console.log(range4.compareBoundaryPoints(Range.START_TO_START, range1)); // - 1
        console.log(range4.compareBoundaryPoints(Range.START_TO_END, range2)); // 1 
        console.log(range4.compareBoundaryPoints(Range.END_TO_START, range3)); // -1


        // 复制 DOM 范围
        const range5 = range4.cloneRange();
        console.log(range4.compareBoundaryPoints(Range.START_TO_START, range5)); // 0
        console.log(range4.compareBoundaryPoints(Range.END_TO_END, range5)); // 0


        // 清理DOM范围
        range5.detach();
        range4.detach();
        range3.detach();
        console.log(range5.startContainer); // 觉着应该是null， 但是实际并没有释放
        range3 = null; range4 = null; range5 = null; // 释放对象引用


    </script>
</body>

</html>

IE8 中到范围

虽然 IE9 支持 DOM 范围，但 IE8 及之前版本不支持 DOM 范围。不过，IE8 及早期版本支持一种类似的概念，即文本范围（text range）。文本范围是 IE 专有的特性，其他浏览器都不支持。顾名思义，文本范围处理的主要是文本（不一定是 DOM 节点）。通过<body>、<button>、<input>和<textarea> 等这几个元素，可以调用 createTextRange()方法来创建文本范围。以下是一个例子：

var range = document.body.createTextRange();

像这样通过 document 创建的范围可以在页面中的任何地方使用（通过其他元素创建的范围则只能在相应的元素中使用）。与 DOM 范围类似，使用 IE 文本范围的方式也有很多种。