比较DOM范围

在有多个范围的情况下，可以使用compareBoundaryPoints()方法来确认这些范围是否有公共的边界，接收两个参数：表示比较方式的常量值和要比较的范围

常量如下

Range.START_TO_START(0):比较第一个范围和第二个范围的起点；
Range.START_TO_END(1):比较第一个范围的起点和第二个范围的终点；
Range.END_TO_END(2):比较第一个范围和第二个范围的终点；
Range.END_TO_START(3):比较第一个范围的终点和第二个范围的起点；

compareBoundaryPoints()方法返回值可能：第一个范围的点位于第二个范围的点之前，返回-1；两个点相同，返回0；第一个范围的点位于第二个范围的点之后，返回1。

alert(range1.compareBoundaryPoints(Range.START_TO_START,range2));　　//某个返回值

复制DOM范围(创建范围的一个副本)

var newRange=range.cloneRange();

清理DOM范围

使用完范围之后，最好调用detach()方法，从文档中分离出该范围，然后解除对范围的引用

range.detach();　　//从文档中分离

range=null;　　//解除引用

IE8及更早版本中的范围

IE9支持DOM范围，但IE8及之前版本不支持DOM范围，早期的IE支持一种类似的概念：文本范围（text range）。文本范围是IE专有的特性，其他浏览器都不支持

文本范围处理的主要是文本（不一定是DOM节点），通过<body>、<button>、<input>和<textarea>等元素，调用createTextRange()方法来创建文本范围

var range=document.body.createTextRange();　　//通过其他元素创建的范围只能在相应元素中使用

用IE范围实现简单的选择

选择页面中某一区域的最简单的方式，就是使用范围的findText()方法，该方法会找到第一次出现的给定文本，并将范围移过来环绕改文本，找到返回true，未找到返回false

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

var range=document.body.createTextRange();

var found=range.findText("Hello");　　//选择“Hello”

执行第二行代码以后，文本“Hello”就被包含在范围之内了，这时可以检查范围的text属性或findText()的返回值

alert(found);　　//true

alert(range.text)　　//"Hello"

还可以为findText()传入另一个参数，一个表示继续搜索方向的数值，负值表示从当前位置向后搜索，正值表示从当前位置向前搜索

var foundAgain=range.findText("Hello",1);　　//查找文档中前2个“Hello”

IE中与DOM中的selectNode()方法最接近的方法是moveToElementText()，改方法接收一个DOM元素，并选择该元素的所有文本，包括HTML标签

var range=document.body.createTextRange();

var p1=document.getElementById("p1");

range.moveToElementText(p1);

在文本范围包含HTML的情况下，可以使用htmlText属性取得范围的全部内容，包括HTML和文本：

alert(range.htmlText);

有个parentElement()方法与DOM的commonAncestorContainer属性类似

var ancestor=range.parentElement();　　//这样得到的父元素始终都可以反映文本选区的父节点

使用IE范围实现复杂的选择

IE提供了4个方法：move()、moveStart()、moveEnd()和expand()，这些方法都接收2个参数：移动单位和移动单位的数量。移动单元是下列一种字符串值：

"character"：逐个字符移动
"word"：逐个单词（一系列非空字符）移动

"sentence"：逐个句子（一系列以句号、问号或叹号结尾的字符）移动

"textedit"：移动到当前范围选区的开始或结束位置

moveStart()、moveEnd()分别移动范围的起点和终点：

range.moveStart("word",2);　　//起点移动2个单词

expand()方法可以将范围扩展，例如当前选择的是一个单词中间的两个字符，调用expand("word")将选中整个单词，将其包含在范围中

move()方法则会首先折叠当前范围（起点和终点相等），然后再将范围移动指定的单位数量

range.move("character",5);　　//移动5个字符

调用move()之后，范围的起点和终点相同，必须再使用moveStart()、moveEnd()创建新的选区

操作IE范围中的内容

在IE操作范围的内容可以使用text属性或pasteHTML()方法（替换原来范围的内容）

range.text="world";　　//设置属性范围中的内容文本，HTML标签不变

range.pasteHTML("<em>world</em>");　　//这个方法可以插入HTML标签

折叠IE范围

IE为范围提供collapse()方法与相应的DOM方法用法一样；传入true把范围折叠到起点，传入false把范围折叠到终点，却没有相应的collapsed属性让我们知道范围是否已经折叠完毕，必须使用boundingWidth属性，返回该范围的宽度（以像素为单位），boundingWidth属性等于0，表示已经折叠

var isCollapsed=(range.boundingWidth==0);

此外还有boundingHeight、boundingLeft、boundingTop等属性，它们并不像boundingWidth属性那么有用

比较IE范围

IE中compareEndPoints方法与DOM范围中compareBoundaryPoints()方法类似，它接收两个参数： 要比较的类型和要比较的范围。比较类型的取值范围是下列几个字符串值：“StartToStart”、“StartToEnd”“EndToEnd”和“EndToStart”，IE中compareEndPoints方法与DOM范围中compareBoundaryPoints()方法返回的值相同，即如果第一个范围的边界位于第二个范围的边界前面，返回-1；相同，返回0；后面，返回1。

alert(range1.compareEndPoints("StartToStart",range2));　　//返回一个数值

isEqual()用于确定两个范围是否相等：range1.isEqual(range2);

inRange()用于确定一个范围是否包含另一个范围range1.inRange(range2);　　//range1是否包含range2

复制IE范围

duplicate()方法创建原来范围的副本

var newRange=range.duplicate();

--------------------------本章终--------------------------

JavaScript高级程序设计38.pdf的更多相关文章

  1. JavaScript高级程序设计61.pdf

    JSON对象 早期的JSON解析器就是使用JavaScript的eval()函数,ECMAScript5对解析JSON的行为做出了规定,定义了全局对象JSON. JSON对象有2个方法:stringi ...

  2. JavaScript高级程序设计60.pdf

    错误处理 try-catch语句 try{ //可能会导致错误的代码 }catch(error){ //在错误发生时如何处理 } error是一个包含着错误信息的对象,它有一个message属性,保存 ...

  3. JavaScript高级程序设计58.pdf

    15章 使用Canvas绘图 略 16章 HTML5脚本编程 HTML5规范了新的HTML标记和JavaScript API,以便简化创建动态Web界面的工作 跨文档消息传递 简称XDM,指来自不同域 ...

  4. JavaScript高级程序设计57.pdf

    表单序列化 首先了解一下浏览器如何将数据发送给服务器 对表单字段的名称和值进行URL编码,使用和号(&)分隔 不发送禁用的表单字段 只发送勾选的复选框和单选按钮 不发送type为“reset” ...

  5. JavaScript高级程序设计55.pdf

    输入模式 HTML5为文本字段新增了pattern属性,这个属性的值是一个正则表达式,用于匹配文本框中的值 例如,只想在允许在文本字段中输入数值 <input type="text&q ...

  6. JavaScript高级程序设计54.pdf

    过滤输入 对于一些浏览器,可以使用正则表达式里的text()测试用户按下的按键,Firefox和safari(3.1版本之前)会对向上向下.退格键和删除键触发keypress事件,在Firefox中, ...

  7. JavaScript高级程序设计53.pdf

    共有的表单字段方法 每个表单字段都有两个方法:focus()和blur(),其中focus()用于将浏览器焦点设置到表单字段,激活表单字段.可以侦听页面的load事件 EventUtil.addHan ...

  8. JavaScript高级程序设计52.pdf

    表单脚本 表单的基础知识 在HTML中,表单是由<form>元素表示的,在Javascript对应的是HTMLFormElement类型,它继承自HTMLElement,因此具有与其他HT ...

  9. JavaScript高级程序设计50.pdf

    hashchange事件 HTML5新增了hashchange事件,以便在URL的参数列表(及URL中“#”号后面的所有字符串)发生变化时通知开发人员,之所以新增这个事件,是因为在Ajax应用中,开发 ...

随机推荐

  1. Microsoft Windows Installer 工具 Msiexec.exe 的命令行选项

    摘自:http://support.microsoft.com/kb/314881/zh-cn 概要 本文列出了 Windows Installer 工具 Msiexec.exe 的命令行选项.Msi ...

  2. 对称密码-分组密码-AES

    AES产生背景: DES的安全性和应用前景受到挑战,因此需要设计一个高保密性能的.算法公开的.全球免费使用的分组密码算法,用于保护敏感信息,并希望以此新算法取代DES算法,称为新一代数据加密标准,取名 ...

  3. Entity Framework 的小实例：在项目中添加一个实体类，并做插入操作

    Entity Framework 的小实例:在项目中添加一个实体类,并做插入操作 1>. 创建一个控制台程序2>. 添加一个 ADO.NET实体数据模型,选择对应的数据库与表(Studen ...

  4. C语言的可变参数

    可变参数给编程带来了很大的方便,在享受它带来的方便的同时,很有必要了解一下其实现方式,在了解编程语言的同时,也可以扩展编程的思路. 可变参数需要用到3个宏函数和一个类型,他们都定义在<stdar ...

  5. ezSQL 数据库操作类

    http://justinvincent.com 官网,一切尽在里面的下载帮助文件中,妙哉也!! ez_sql_core.php <?php /************************* ...

  6. php 简单的验证码

    注意事项: 验证的隐藏域的位置一定要在调用JS前.. 如: <input type="text" name="yzm" value="" ...

  7. 快速理解webStroage

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. JDK重要包和Java学习方法论

    以下内容摘自:万能的林萧说:一篇文章教会你,如何做到简历中要求的“要有扎实的Java基础”    第一级别:精读源码 该级别包含的包如下: java.io java.lang java.util 第二 ...

  9. Windows加密视频播放器使用教程

    1.   下载文件 http://pan.baidu.com/s/1c2aESQs 2.    操作流程 温馨提示 播放时,请务必保证播放设备联网(原因:用户名权限验证需要网络,播放后10秒即可关闭网 ...

  10. AS3.0的动态类和密封类

    动态类:生成的实例可以在运行时动态添加属性和方法.类名前有dynamic就是动态类 密封类:生成的实例不可以在运行时动态添加属性和方法