Javascript高级编程学习笔记（56）—— DOM2和DOM3（8）低版本IE范围

时间：2022-01-01 23:14:32

虽然IE9支持了DOM范围，但是IE8及更早版本并不支持DOM范围

所以IE8以下的更早版本的IE提出了与之类似的概念以供大家使用

也就是 文本范围

var range = document.body.createTextRange();

文本范围是IE专有的特性，了解就好

范围的简单选择

实现范围选择的最简单方式就是使用范围的 findText（）方法

该方法会找到第一次出现的给定文本，并将范围环绕该文本

若没有找到文本则返回 false，找到则返回 true

同样以下方的HTML代码为例：

<p id = "p1"><b>hello</b>world!</p>

若我们希望用范围选中 hello

则可以使用以下代码

var range = document.createTextRange();

var found = range.findText("hello");

findeText() 还可以接收第二个参数，用以表示从当前位置向后（1）或向前搜索（-1）

若我们希望选中文档中的第二个 hello

则可以用以下代码：

var range = document.createTextRange();

var found = range.findText("hello");

var foundAgain = range.findText("hello"，1);

而IE中与 selectNode（）最接近的方法应该是 moveToElementText（）

该方法传入一个元素，会选中该元素作为范围内容，包括元素的HTML标签

需要注意的是，IE的范围没有任何属性可以随着范围选区的变化而动态更新

不过通过IE的 parentElement（）方法可以取得与commonAncestorContainer属性类似的值

范围的复杂选择

IE中选中复杂范围的方法是：以特定增量向四周移动、拓展范围

提供了以下方法：

  • move（）：折叠范围后再进行移动（调用后需使用moveStart和moveEnd重新选中范围）
  • moveStart（）：移动范围起点
  • moveEnd（）：移动范围终点
  • expand（）：用以将范围规范化，即原本选中了部分单词，调用expand则会将整个单词包含在内

以上方法都接收两个参数：

  1. 移动单位
    1. “character”：逐个字符地移动
    2. “word”：逐个单词地移动
    3. “sentence”：逐个句子地移动
    4. “textedit”：移动到选区的开始或结束位置
  2. 移动的数量

操作范围内容

要操作范围中的内容，可以通过范围的text属性，或者 pasteHTML（）方法

text属性只能修改文本内容，如果需要插入HTML代码则需要使用 pasteHTML（）方法

该方法会将范围中的内容替换为传入的HTML代码，所以在使用时需要小心，因为这些方法并不会像标准DOM中的那样让文档始终保持良好的结构

折叠范围

折叠范围IE也提供了 collapse（）方法

传入true将范围折叠到范围起点，传入false折叠到范围终点

但是IE没有collapse属性让我们判断范围是否已经折叠

所以IE使用 boundingWidth 属性表示范围宽度，若该值为0则表示范围已经折叠

比较范围

IE中的compareEndPoints（）方法与DOM范围的compareBoundaryPoints（）方法类似

同样接收两个参数：要比较的类型，要比较的范围

比较类型的取值为：

  • “StartToStart”
  • “StartToEnd”
  • "EndToEnd"
  • "EndToStart"

这些值的含义与上一篇文章中DOM的取值一致

返回值的规则也与DOM规范一致

此外，IE还提供了 isEqual（）方法用于判断两个范围是否相等

inRange（）判断一个范围是否包含在另一个范围之中

复制范围

使用 duplicate（）方法创建一个原范围的副本

如下所示：

var newRange = range.duplicate();

　　

相关文章