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级遍历和范围”模块定义了“范围”接口 通过该接口开发人员可以选择文档中的一个区域,而不必考虑元素的界限 在常规操作不能有效地修改文档时,使用范围往往可以 ...
随机推荐
- node.js 从入门到。。。
本人安装环境为 mac ,所以只记录了 mac 下的操作步骤 1.安装 node node的国内下载地址:http://nodejs.cn/download/ 安装之后,在终端输入指令 node -v ...
- AD16 PCB重新定义板型时没有Redefine Board Shape
1.高版本的AD都没有“Redefine Board Shape” 2.在Keep-Out-Layer层,做好了板子的外形,把外形都选中后,然后快捷键D-S-D即可.
- 9.Redis高可用-哨兵
9.Redis高可用-哨兵9.1 基本概念9.1.1 主从复制的问题9.1.2 高可用9.1.3 Redis Sentinel的高可用性9.2 安装和部署9.2.1 部署拓扑结构9.2.2 部署Red ...
- docker-2 tomcat
启动容器命令 docker run -d -p 8080:8080 -v /root/tomcat/webapps:/usr/local/tomcat/webapps -v /root/tomcat/ ...
- function 函数
function:函数体内部的语句在执行时,一旦执行到return时,函数就执行完毕,并将结果返回.因此,函数内部通过条件判断和循环可以实现非常复杂的逻辑. 如果没有return语句,函数执行完毕后也 ...
- Flip String to Monotone Increasing LT926
A string of '0's and '1's is monotone increasing if it consists of some number of '0's (possibly 0), ...
- 七、PyQT5控件——QSlider,QSpinBox
一.Qslider QSlider是一个滑动条,可以设置成水平或垂直放置.最常用的方法允许用户在某一范围内互动该滑块,并将滑块的位置转换成一个整数值(int类型),这种方式可以在某一个范围内平顺的变动 ...
- Winform .NET 利用NPOI导出大数据量的Excel
前言:公司让做一个导出数据到Excel的小工具,要求是用户前端输入sql语句,点击导出按钮之后,将数据导出到Excel,界面如图所示:文件下端显示导出的进度 遇到的问题: 1.使用NPOI进行Exce ...
- vue使用中遇到的,以及vue1.0到vue2.0新手踩的坑
最近再写一个vue的项目,视频中用的是vue1.0,但是现在vue已经2.0,所以踩了很多坑,先记录下来.理解有误再来修改. 路由问题 之前的路由是写在app.vue里边,而2.0的路由直接有个rou ...
- 《Miracle_House》团队项目系统设计改进
一.团队项目系统设计改进: 1.分析项目系统设计说明书初稿的不足,特别是软件系统结构模型建模不完善内容: 对于原文档中,设计图中存在的错误以及文字描述不准确的地方进行了修改. 2. 团队项目Githu ...