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

本文介绍了 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)

(6)复制 IE 范围

duplicate():复制文本范围,结果会创建原范围的一个副本
var newRange = range.duplicate();


上一篇:27-JavaScript高级程序设计-DOM2&3遍历
下一篇:29-JavaScript高级程序设计-事件流&事件处理程序

全书整理版:《Javascript高级程序设计》第3版(总结版)


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值