28-JavaScript高级程序设计-DOM2&3范围

最新推荐文章于 2020-07-19 16:32:43 发布

青鸟明丹心

最新推荐文章于 2020-07-19 16:32:43 发布

阅读量209

点赞数

CC 4.0 BY-SA版权

分类专栏：阅读笔记文章标签： javascript js

本文链接：https://blog.youkuaiyun.com/dandan666dandan/article/details/96134295

阅读笔记专栏收录该内容

55 篇文章

订阅专栏

本文介绍了 DOM2 级遍历和范围模块中的“范围”接口，详细讲解了如何利用 Range 对象进行文档区域的选择、操作和比较，涵盖了创建、选择、折叠范围等关键方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

四、范围

“DOM2 级遍历和范围”模块定义了“范围”(range)接口。通过范围可以选择文档中的一个区域，而不必考虑节点的界限(选择在后台完成，对用户是不可见的)。

1. DOM中的范围

创建 DOM 范围：document.createRange()
每个范围由一个 Range 类型的实例表示，这个实例拥有很多属性和方法：
startContainer：包含范围起点的节点(即选区中第一个节点的父节点)。
startOffset：范围在 startContainer 中起点的偏移量。如果 startContainer 是文本节点、注释节点或 CDATA 节点，那么 startOffset 就是范围起点之前跳过的字符数量。否则，startOffset 就是范围中第一个子节点的索引。
endContainer：包含范围终点的节点(即选区中最后一个节点的父节点)。
endOffset：范围在 endContainer 中终点的偏移量(与 startOffset 遵循相同的取值规则)。
commonAncestorContainer：startContainer 和 endContainer 共同的祖先节点在文档树中位置最深的那个。

（1）用 DOM 范围实现简单选择

selectNode(DOM节点)：选择整个节点，包括其子节点，使用节点信息填充范围
selectNodeContents(DOM节点)：只选择节点的子节点，使用节点信息填充范围
setStartBefore(refNode)：将范围的起点设置在 refNode 之前（refNode 是范围选区中的第一个子节点）
setStartAfter(refNode)：将范围的起点设置在 refNode 之后（refNode 不在范围，下一个同辈节点是范围选区中的第一个子节点）
setEndBefore(refNode)：将范围的终点设置在 refNode 之前（refNode 不在范围，上一个同辈节点是范围选区中的最后一个子节点）
setEndAfter(refNode)：将范围的终点设置在 refNode 之后（refNode 是范围选区中的最后一个子节点）

（2）用 DOM 范围实现复杂选择

setStart(参照节点，偏移量值)：设置范围起点，参照节点会变成 startContainer，偏移量值会变成 startOffset
setEnd(参照节点，偏移量值)：设置范围终点，参照节点会变成 endContainer，偏移量值会变成 endOffset

（3）操作 DOM 范围中的内容

在创建范围时，内部会为这个范围创建一个文档片段，范围所属的全部节点都被添加到了这个文档片段中。
范围选区在修改底层 DOM 结构时能够保证格式良好，比如自动补全开标签和闭标签。

deleteContents()：从文档中删除范围所包含的内容
extractContents()：从文档中移除范围选区，返回范围的文档片段
cloneContents()：创建范围对象的一个副本

（4）插入 DOM 范围中的内容

insertNode(节点)：向范围选区的开始处插入一个节点
surroundContents(节点)：环绕范围插入内容
range.insertNode(span);
range.surroundContents(span);
环绕范围插入内容，后台执行3个步骤：
(1) 提取出范围中的内容(类似执行 extractContent());
(2) 将给定节点插入到文档中原来范围所在的位置上;
(3) 将文档片段的内容添加到给定节点中。

（5）折叠 DOM 范围

折叠范围：指范围中未选择文档的任何部分。
折叠范围时，其位置会落在文档中的两个部分之间，可能是范围选区的开始位置，也可能是结束位置。

collapse(布尔值)：折叠范围，true表示折叠到范围的起点，false表示折叠到范围的终点
collapsed 属性：确定范围是否已经折叠完毕
range.collapse(true); //折叠到起点
alert(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。
range1.compareBoundaryPoints(Range.START_TO_START, range2)

（7）复制 DOM 范围

cloneRange()：复制范围。会创建调用它的范围的一个副本。
var newRange = range.cloneRange();

（8）清理 DOM 范围

detach()：从创建范围的文档中分离出该范围
range.detach(); //从文档中分离
range = null; //解除引用
在使用范围的最后，推荐执行这两个步骤。

2. IE8 及更早版本中的范围

文本范围(text range)：E8 及早期版本支持一种类似 DOM 范围的概念（IE专有特性）
创建文本范围：createTextRange()
调用元素：<body>、<button>、<input> 和 <textarea> 等几个元素
var range = document.body.createTextRange();

（1）用 IE 范围实现简单的选择

findText(文本，搜索方向数值)：找到第一次出现的给定文本，并将范围移过来以环绕该文本
如果没有找到文本，返回 false；否则返回 true。
text 属性：返回范围中包含的文本 range.text

moveToElementText(DOM元素)：选择该元素的所有文本，包括 HTML 标签。类似 DOM 中的 selectNode()。
htmlText 属性：取得范围的全部内容，包括 HTML 和文本

parentElement()：与 DOM 的 commonAncestorContainer 属性类似，得到的父元素始终都可以反映文本选区的父节点。

（2）使用 IE 范围实现复杂的选择

move()：首先会折叠当前范围(让起点和终点相等)，然后再将范围移动指定的单位数量
（move调用后范围的起点和终点相同，需要再调其他方法创建新选区）
moveStart()：移动范围的起点
moveEnd()：移动范围的终点
expand()：将范围规范化，将任何部分选择的文本全部选中。

这四个方法都有两个参数：移动单位和移动单位的数量。
移动单位（一种字符串值）：
“character”：逐个字符地移动。
“word”：逐个单词(一系列非空格字符)地移动。
“sentence”：逐个句子(一系列以句号、问号或叹号结尾的字符)地移动。
“textedit”：移动到当前范围选区的开始或结束位置。

（3）操作 IE 范围中的内容

text 属性：取得或者设置范围中的内容文本
pasteHTML()：向范围中插入 HTML 代码
在设置 text 属性的情况下，HTML 标签保持不变。
在范围中包含 HTML 代码时，不应该使用 pasteHTML()，很可能导致格式不正确的 HTML。

（4）折叠 IE 范围

collapse()：折叠范围
传入 true 把范围折叠到起点，传入 false 把范围折叠到终点
没有 collapsed 属性来判断范围是否已经折叠完毕 ==>
boundingWidth 属性：返回范围的宽度(以像素为单位)。等于 0 说明范围已经折叠。
boundingHeight、boundingLeft、boundingTop，也可以提供一些有关范围位置的信息。

（5）比较 IE 范围

compareEndPoints()：与 DOM 范围的 compareBoundaryPoints() 方法类似。
两个参数：比较的类型和要比较的范围。
比较类型的取值：“StartToStart”、“StartToEnd”、“EndToEnd”、“EndToStart”。
返回值：如果第一个范围的边界位于第二个范围的边界前面，返回-1；如果二者边界相同，返回 0；如果第一个范围的边界位于第二个范围的边界后面，返回 1。
range1.compareEndPoints("StartToStart", range2)

isEqual()：确定两个范围是否相等
inRange()：确定一个范围是否包含另一个范围
range1.isEqual(range2)