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

  

Javascript高级编程学习笔记(56)—— DOM2和DOM3(8)低版本IE范围的更多相关文章

  1. Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化

    DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...

  2. Javascript高级编程学习笔记(1)—— JS简介

    此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...

  3. Javascript高级编程学习笔记(3)—— JS中的数据类型(1)

    前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...

  4. Javascript高级编程学习笔记(63)—— 事件(7)鼠标及滚轮事件

    鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...

  5. Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序

    事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...

  6. Javascript高级编程学习笔记(43)—— 动态脚本

    动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...

  7. Javascript高级编程学习笔记(8)—— 变量

    日常更新~~ 变量 所有的编程语言中,变量都是赋予语言灵活性的根本所在. 那么JS中的变量又有那些与众不同的地方呢.? 按照ECMA-262的定义,JS的变量和其他编程语言的变量有很大的区别 其松散类 ...

  8. Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历

    遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...

  9. Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择

    范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...

随机推荐

  1. Git上传代码的步骤

    1.git status 列出来所有修改的文件2.git add 所有的文件列表,或者git add -A,添加所有文件到Add列表 3.git reset --hard 取最新的git标签 4.gi ...

  2. Scrapy Spider MiddleWare 设置

    # -*- coding: utf-8 -*- # Define here the models for your spider middleware # # See documentation in ...

  3. A Model of Saliency-Based Visual Attention for Rapid Scene Analysis

    A Model of Saliency-Based Visual Attention for Rapid Scene Analysis 题目:A Model of Saliency-Based Vis ...

  4. mactype配置

    配合 Firefox 小小设置(改了好多配置,似乎主要是修改了渲染的核心?是叫这个么?把那个Siera?删掉了,就好了)后,效果极佳,我在原有配置的基础上,加大了字重,显示更粗,更明显. 这里是原配置 ...

  5. Numpy 矩阵库(Matrix)

    Numpy 中包含了一个矩阵库 numpy.matlib, 该模块中的函数返回的是一个矩阵, 而不是 ndarray 对象. 一个 m * n de 矩阵是一个 有 m 行(row) n 列(colu ...

  6. 如何将一个excel表格的数据匹配到另一个表中

    我们在操作excel表的时,有时需要将一个excel表中的数据匹配到另一个表中,那么就需要用到VLOOKUP函数,VLOOKUP函数是Excel中的一个纵向查找函数,VLOOKUP是按列查找,最终返回 ...

  7. oracle数据导出以及导入

    导出 1.服务器上mkdir创建一个真实目录/home/oracle/dump 2.sqlplus /nolog 3.conn /as sysdba; 4.SQL> create directo ...

  8. oracle primary key & foreign key

    主键:一个表中只有一个主键约束,但是一个主键约束可以由数据表中的多个列组成:primary key alter table TName add constraints pk_name PRIMARY ...

  9. P2146 [NOI2015]软件包管理器

    题目链接:https://www.luogu.org/problemnew/show/P2146 题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安 ...

  10. Open quote is expected for attribute "{1}" associated with an element type "column".

    这个的错误的意思很简单:就是自己的配置文件是否缺少""号