Javascript高级编程学习笔记(56)—— DOM2和DOM3(8)低版本IE范围
虽然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则会将整个单词包含在内
以上方法都接收两个参数:
- 移动单位
- “character”:逐个字符地移动
- “word”:逐个单词地移动
- “sentence”:逐个句子地移动
- “textedit”:移动到选区的开始或结束位置
- 移动的数量
操作范围内容
要操作范围中的内容,可以通过范围的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范围的更多相关文章
- Javascript高级编程学习笔记(49)—— DOM2和DOM3(1)DOM变化
DOM变化 我们知道DOM有许多的版本,其中DOM0和DOM2这两个级别以对事件的纳入标准而为人所知 但是呢,这里不讲事件,在后面会有专门和事件有关的部分作为详细讲解 这里就只讲一下DOM2和DOM3 ...
- Javascript高级编程学习笔记(1)—— JS简介
此系列文章,用于记录所学,如有错误欢迎指出. Javascript组成 1.核心(ECMAScript) 2.文档对象模型(DOM) 3.浏览器对象模型(BOM) 1.核心(ECMAScript) E ...
- Javascript高级编程学习笔记(3)—— JS中的数据类型(1)
前一段时间由于事情比较多,所以笔记耽搁了一段时间,从这一篇开始我会尽快写完这个系列. 文章中有什么不足之处,还望各位大佬指出. JS中的数据类型 上一篇中我写了有关JS引入的Script标签相关的东西 ...
- Javascript高级编程学习笔记(63)—— 事件(7)鼠标及滚轮事件
鼠标与滚轮事件 鼠标事件是web开发中最常用的一类事件,毕竟鼠标是最主要的定位设备 DOM3级事件中定义了9个鼠标事件: click:在用户单击主鼠标按钮(一般为鼠标左键)或者按下回车时触发,这一点对 ...
- Javascript高级编程学习笔记(58)—— 事件(2)事件处理程序
事件处理程序 事件处理程序即响应某个事件的函数 事件处理程序以 “on” 开头 如“onclick”,“onload” HTML事件处理程序 某个元素支持的每种事件都可以使用一个与响应的事件处理程序同 ...
- Javascript高级编程学习笔记(43)—— 动态脚本
动态脚本 大多数情况下,DOM操作都很简洁明了 因为DOM主要就是用来操作页面中的可视节点的 但有些时候我们又希望可以动态的来进行DOM操作 其中的一部分也就是今天我们的内容动态脚本 动态脚本是什么意 ...
- Javascript高级编程学习笔记(8)—— 变量
日常更新~~ 变量 所有的编程语言中,变量都是赋予语言灵活性的根本所在. 那么JS中的变量又有那些与众不同的地方呢.? 按照ECMA-262的定义,JS的变量和其他编程语言的变量有很大的区别 其松散类 ...
- Javascript高级编程学习笔记(53)—— DOM2和DOM3(5)遍历
遍历 “DOM2级遍历和范围” 定义了两个用于辅助完成顺序遍历的DOM结构类型 NodeIterator 和 TreeWalk 上述两种类型可以基于给定起点的DOM结构执行深度优先的遍历操作 对于检测 ...
- Javascript高级编程学习笔记(54)—— DOM2和DOM3(6)范围选择
范围 为了让开发人员更加方便地控制页面“DOM2级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...
随机推荐
- Git上传代码的步骤
1.git status 列出来所有修改的文件2.git add 所有的文件列表,或者git add -A,添加所有文件到Add列表 3.git reset --hard 取最新的git标签 4.gi ...
- Scrapy Spider MiddleWare 设置
# -*- coding: utf-8 -*- # Define here the models for your spider middleware # # See documentation in ...
- 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 ...
- mactype配置
配合 Firefox 小小设置(改了好多配置,似乎主要是修改了渲染的核心?是叫这个么?把那个Siera?删掉了,就好了)后,效果极佳,我在原有配置的基础上,加大了字重,显示更粗,更明显. 这里是原配置 ...
- Numpy 矩阵库(Matrix)
Numpy 中包含了一个矩阵库 numpy.matlib, 该模块中的函数返回的是一个矩阵, 而不是 ndarray 对象. 一个 m * n de 矩阵是一个 有 m 行(row) n 列(colu ...
- 如何将一个excel表格的数据匹配到另一个表中
我们在操作excel表的时,有时需要将一个excel表中的数据匹配到另一个表中,那么就需要用到VLOOKUP函数,VLOOKUP函数是Excel中的一个纵向查找函数,VLOOKUP是按列查找,最终返回 ...
- oracle数据导出以及导入
导出 1.服务器上mkdir创建一个真实目录/home/oracle/dump 2.sqlplus /nolog 3.conn /as sysdba; 4.SQL> create directo ...
- oracle primary key & foreign key
主键:一个表中只有一个主键约束,但是一个主键约束可以由数据表中的多个列组成:primary key alter table TName add constraints pk_name PRIMARY ...
- P2146 [NOI2015]软件包管理器
题目链接:https://www.luogu.org/problemnew/show/P2146 题目描述 Linux用户和OSX用户一定对软件包管理器不会陌生.通过软件包管理器,你可以通过一行命令安 ...
- Open quote is expected for attribute "{1}" associated with an element type "column".
这个的错误的意思很简单:就是自己的配置文件是否缺少""号