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();