DOM范围

最新推荐文章于 2022-11-22 22:26:48 发布

kalinara

最新推荐文章于 2022-11-22 22:26:48 发布

阅读量260

点赞数

分类专栏： JavaScript 文章标签： dom javascript 范围

本文链接：https://blog.csdn.net/kalinara/article/details/74542960

版权

JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

DOM LEVEL2 Traversal and Range 模块定义了range接口，通过范围选择文档中的一个区域，不必考虑节点的界限。

【创建】：

var range = document.createRange();

IE8及更早版本不支持Range，但支持文本范围TextRange(支持元素有body、button、input、textarea)
【IE创建】
        Document.body.createTextRange();

【方法】：
1.精确控制范围包含哪些节点：

range.setStartBefore(节点) 范围起点在节点前
range.setStartAfter(节点) 范围起点在节点后
range.setEndBefore(节点) 范围终点在节点前
range.setEndAfter(节点) 范围终点在节点后

2.简单选取文档中的一部分：

range.selectNode(节点)   --包含节点及其子节点
{其中，startContainer、endContainer为节点的父节点，startOffset为节点在父节点中的位置，
endOffset = startOffset+1}

range.selectNodeContents(节点) --包含其子节点
{其中，startContainer、endContainer为节点，startOffset始终为0，endOffset 为节点的子节点个数}

【IE方法】选择元素的所有文本，包括html标签（类似range.selectNode(节点)方法）
        range.moveToElementText(节点)
        range.htmlText  //取得范围的所有内容（包括html标签）
        找到给定文本
        range.findText(文本)  //找到第一次出现的文本
        range.findText(文本，数值)//数值为正：从当前位置向后找另一个文本；
                            //数值为负：从当前位置向前找另一个文本
        range.text    //返回范围中的文本
        range.text = 文本   //设置范围中的文本
        range.pasteHtml(文本) //设置范围中的文本

3.复杂选择文档中的部分&选择节点的一部分

选择文档中的部分：
setStart(startContainer, startOffset)
setEnd(endContainer,endOffset)
选择节点的一部分：
setStart(节点，起始偏移量)
setEnd(节点，终止偏移量)

【IE方法】
    move(移动单位，数量) 折叠当前范围（让起点和终点相同）
    moveStart(移动单位，数量)  移动范围的起点
    moveEnd(移动单位，数量) 移动范围的终点
    expand(移动单位，数量) 将范围规范化，将部分选择的文本扩展到全部选中
    （移动单位）：
        “character”：按字符移动
        “word”：按单词移动（非空格）
        “sentence”：按句子移动
        “textedit”：移动到当前范围的开始或结束位置

4.移除范围内容

range.deleteContents()  从文档中删除范围选区，保留原有DOM结构
range.extraContents()  从文档中移除范围选取并返回范围的文档片段

5.清理范围（恢复原文档）

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

6.复制范围内容

range.cloneContents() 把范围内容赋给文档片段对象(DocumentFragment)

7.复制范围：

range.cloneRange() 创建范围的副本(新的range对象)，修改新范围不会影响原来的范围

【IE方法】
    range.duplicate()  创建范围的副本(新的range对象)，修改新范围不会影响原来的范围

8.在范围选区中插入内容：

range.insertNode(节点)  在范围内部，将节点插在范围选区前面
range.surroundContents(节点) 环绕范围选区，将节点插在范围选区前面

9.折叠范围

range.collapse(true)  折叠到范围的开始位置
range.collapse(false) 折叠到范围的结束位置
检测范围是否处于折叠状态，可确定范围中的两个节点是否紧密相邻
range.collapsed //true表示折叠状态

【IE方法】
    range.boundingWidth // 0表示折叠状态

10.比较范围（确定范围是否有公共的边界（起点/终点））

range1.compareBoundaryPoints(比较方式，range2)
    返回值：
        -1：范围1边界在范围2前
        0：范围1边界与范围2一样
        1：范围1边界在范围2后
    比较方式：
        Range.START_TO_START  比较范围1和范围2的起点
        Range.START_TO_END 比较范围1的起点和范围2的终点
        Range.END_TO_END 比较范围1和范围2的终点
        Range.END_TO_START 比较范围1的终点和范围2的起点

【IE方法】
    range1.compareEndPoints(比较方式，range2)
    返回值：
        -1：范围1边界在范围2前
        0：范围1边界与范围2一样
        1：范围1边界在范围2后
    比较方式:
        StartToStart 比较范围1和范围2的起点
        StartToEnd 比较范围1的起点和范围2的终点
        EndToStart 比较范围1和范围2的终点
        EndToEnd 比较范围1的终点和范围2的起点
    ~判断两个范围是否相等
        range1.isEqual(range2)
    ~判断两个范围是否有包含关系
        range1.isRange(range2)