12.4 范围
作者：互联网
一、DOM 中的范围
使用 document.createRange() 方法创建范围
Range 类型的实例包含下列属性
| 属性 | 说明 |
|---|---|
| startContainer | 包含范围起点的节点（起点的父节点） |
| startOffset | 范围在 startContainer 中起点的偏移量，如果 startContainer 是文本节点、注释节点或 CDATA 节点，为起点之前跳过的字符数，否则，为范围中第一个子节点的索引 |
| endContainer | 包含范围终点的节点（终点的父节点） |
| endOffset | 范围在 startContainer 中终点的偏移量 |
| commonAncestorContainer | startContainer 与 endContainer 共同的祖先节点（在文档树种位置最深的那个） |
1.用 DOM 范围实现简单选择
range.selectNode()：选择整个节点，包括其子节点
range.selectNodeContents()：选择节点的子节点
<body>
<p id="p1"><b>Hello</b> world!</p>
</body>
为了更精细地控制将哪些节点包含在范围内，可以使用下列方法
| 方法 | 说明 |
|---|---|
| setStartBefore(refNode) | 范围起点在 refNode 之前，refNode 是范围的起点，startContainer 为 refNode.parentNode，startOffset 为 refNode 在其父节点中的索引值 |
| setStartAfter(refNode) | 范围起点在 refNode 之后，refNode 不在范围内，startContainer 为 refNode.parentNode，startOffset 为 refNode 在其父节点中的索引值 +1 |
| setEndBefore(refNode) | 范围终点在 refNode 之前，refNode 不在范围内，endContainer 为 refNode.parentNode，endOffset 为 refNode 在其父节点中的索引值 |
| setEndAfter(refNode) | 范围终点在 refNode 之后，refNode 是范围的终点，endContainer 为 refNode.parentNode，endOffset 为 refNode 在其父节点中的索引值 +1 |
2.用 DOM 范围实现复杂选择
使用 setStart() 和 setEnd() 方法，二者均接收两个参数：参照节点（start/endContainer ）和偏移量值（start/endOffset）
3.操作 DOM 范围中的内容
| 方法 | 说明 |
|---|---|
| range.deleteContents() | 删除范围中的节点 |
| range.extractContents() | 删除范围中的节点，同时返回该范围的文档片段 |
| range.cloneContents() | 创建范围的一个副本，返回该范围的文档片段，返回的是一个副本不是实际节点 |
4.插入 DOM 范围中的内容
| 方法 | 说明 |
|---|---|
| range.insertNode() | 在范围起点之前插入内容 |
| range.surroundContents() | 环绕范围插入内容 |
5.折叠 DOM 范围
| 方法 | 说明 |
|---|---|
| range.collapse() | 折叠范围，接收一个布尔参数，为 true 折叠到起点，false 折叠到终点 |
可以使用 range.collapsed 判断是否处于折叠状态，是为 true
6.比较 DOM 范围
使用 compareBoundaryPoints() 方法来比较范围，接收两个参数：表示比较方式的常量值和要比较的范围，其中第一个参数的取值如下
| 常量值 | 说明 |
|---|---|
| Range.START_TO_START（0） | 比较二者起点 |
| Range.START_TO_END（1） | 比较第一个范围的起点和第二个范围的终点 |
| Range.END_TO_END（2） | 比较二者终点 |
| Range.END_TO_START（3） | 比较第一个范围的终点和第二个范围的起点 |
返回的值如下
| 返回值 | 说明 |
|---|---|
| -1 | 第一个范围中的点在第二个范围中的点之前 |
| 0 | 两个点相等 |
| 1 | 第一个范围中的点在第二个范围中的点之后 |
7.复制 DOM 范围
var newRange = range.cloneRange();
8.清理 DOM 范围
range.detach(); //从文档中分离
range = null; //解除引用
二、IE8 及更早版本中的范围
下面介绍的方法仅在 IE 中支持
对应于 document.createRange()，IE 中有创建文本范围的方法 createTextRange()
1.用 IE 范围实现简单的选择
range.findText() 方法用于第一次出现的给定文本，并将范围环绕文本，若没有找到则返回 false，否则返回 true
var range = document.body.createTextRange();
var found = range.findText('Hello');
该方法还接收第二个参数，表示搜索的方向，负值表示向后搜索，正值反之
对应于 selectNode() 方法的是 moveToElementText()，该方法接收一个 DOM 元素，选择该元素的所有文本，包括 HTML 标签
range.moveToElementText(p1);
对应于 commonAncestorContainer 属性的是 parentElement() 方法
var ancestor = range.parentElement();
2.使用 IE 范围实现复杂的选择
IE 提供给了4个方法以特定的增量向四周移动范围
| 方法 | 说明 |
|---|---|
| range.move() | 折叠范围再移动 |
| range.moveStart() | 移动起点 |
| range.moveEnd() | 移动终点 |
| range.expand() | 将范围扩展到包含所有选中区域 |
上述方法均接收两个参数：移动单位和移动单位的数量，移动单位有
| 移动单位 | 说明 |
|---|---|
| ‘character’ | 逐个字符 |
| ‘word’ | 逐个单词 |
| ‘sentence’ | 逐个句子 |
| ‘textedit’ | 移动到起点或终点 |
3.操作 IE 范围中的内容
| 属性和方法 | 说明 |
|---|---|
| range.text | 获取范围中的文本 |
| range.htmlText | 获取范围中的 HTML 和文本 |
| range.pasteHTML() | 插入 HTML 代码 |
4.折叠 IE 范围
同样为 collapse 方法，只是没有 collapsed 属性判断是否折叠，而是使用 boundingWidth，为0则处于折叠状态
5.比较 IE 范围
与 compareBoundaryPoints() 对应的是 compareEndPoints()，第一个参数有所不同，取值分别为：
StartToStart、StartToEnd、EndToEnd、EndToStart
IE 中还有另外两个方法：isEqual() 和 inRange()，前者用于判断是否相等，后者用于判断是否包含（range2 是否包含在 range1 内）
6.复制 IE 范围
var newRange = range.duplicate();
糖小昔
发布了52 篇原创文章 · 获赞 0 · 访问量 694
私信
关注
标签：DOM,refNode,range,12.4,IE,节点,范围 来源： https://blog.csdn.net/weixin_44774877/article/details/104076141