JavaScript DOM 学习第九章 选取范围的介绍


Posted in Javascript onFebruary 19, 2010

虽然我们会讲解用程序创建范围对象,但是我们把精力主要集中在如何将用户的选取范围转换成为W3C 范围或者微软的文档范围对象。

 

什么是范围

范围是指HTML文档中的任意一部分内容。一个范围的开始和结束点都可以是随意的,甚至是相同的(一个空范围)。最常见的范围就是用户选取的文本。当用户在页面上选取了一部分,你就可以他的选取部分转换为范围对象。然而,你也可以让程序自动选择范围。

让我们以下面的代码为例。假设用户选择了下面的文字:

<h4 id="entry1196"><a
	href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
	class="external">Call for a Blogger's Code of Conduct</a></h4><p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p>
<ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your tolerance level for abusive comments.</li>
	<li>Consider eliminating anonymous comments.</li>
</ol>

你可以将用户选择转换为一个包含用户选择范围的文本的范围对象(后面讲)。根据范围对象,你能找到开始和结束的范围点。如果你愿意你可以删除它拷贝它或者用其他文本代替,甚至用HTML代码来代替。

这是范围对象最简单的例子了,因为他只包含文本。下面我们来看一个复杂的例子:

<h4 id="entry1196"><a
	href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
	class="external">Call for a Blogger's Code of Conduct</a></h4><p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p>
<ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your tolerance level for abusive comments.</li>
	<li>Consider eliminating anonymous comments.</li>
</ol>

另外一个范围对象被创建了,而且还包含HTML。问题在于用户的选择范围跨越了几个元素。去掉其他的内容,就剩下:

calls for a Blogger Code of Conduct. His proposals are:</p><ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your toleran

这是一段不完整的HTML。幸好所有的浏览器都会转化一下:

<p>calls for a Blogger Code of Conduct. His proposals are:</p><ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your toleran</li></ol>

正如你所看到的,浏览器会添加最少的元素让这段HTML完整,如果你复制的话,那么这些添加的东西也会被复制。

 

浏览器兼容性一览

在我们继续之前,有必要看看浏览器的兼容性。主要问题在于这里有不下3个范围对象的类型,你必须都有所了解才行。

Module Explorer 6/7 Firefox 2 Safari 1.3 Opera 9
W3C Range no yes yes yes
Mozilla Selection no yes incomplete yes
Microsoft Text Range yes no no incomplete

 

 

访问用户选区

要处理用户的选择就必须先访问到用户的选区。这会立马又一个代码分支:IE使用微软的方法,其他浏览器使用Mozilla的方法:

var userSelection; 
if (window.getSelection) { 
    userSelection = window.getSelection(); 
} 
else if (document.selection) { // should come last; Opera! 
    userSelection = document.selection.createRange(); 
}

在Mozilla,Safari,Opera里面现在userSelection是一个选择对象(selection object),在IE中是一个文本范围对象(text range object)。这个区别在后面的代码中依然有效:IE的文本范围对象和W3C的范围对象以及Mozilla的选择对象有根本的不同,每一部分的代码都需要另一部分的补充。

要注意分支的顺序:Mozilla Selection一定要在前。因为Opera两种都支持,如果你用window.getSelection()读取用户的选区,Opera就会创建一个选择对象,可是你用document.selection的时候他也会创建一个文本范围对象。

虽然Opera支持Mozilla和W3C模式很不错,但是支持IE确是有毛病,这样就不得不把window.getSelection放在前面检测。

userSelection的内容
现在userSelection既是一个Mozilla的选择对象又是IE的文本范围对象。这样他就可以使用所有的方法和属性了。

然后,Mozilla的选择对象userSelection里面保存的用户选择的文本(而不是HTML)。这样写:

alert(userSelection)

就会产生:

calls for a Blogger Code of Conduct. His proposals are: Take responsibilitynot just for your own words, but for the comments you allow on your blog.Label your toleran如果想在微软的文本范围对象中得到相同的内容你就要使用:

var selectedText = userSelection;if (userSelection.text)    selectedText = userSelection.text;现在selectedText就包含了用户选择的文本。如果你觉得这样的信息足够的话,那么就开始准备后面的工作吧。

从选择对象创建范围对象
很多时候,你想处理的是代表用户选择范围的范围对象(range object)。在微软模式中条件已经具备:userSelection就是一个文本范围。在兼容W3C的浏览器中userSelection依然只是一个选择对象,是时候创建一个与选择对象内容相同的范围对象了。

按照下面这样:

var rangeObject = getRangeObject(userSelection); 
function getRangeObject(selectionObject) { 
    if (selectionObject.getRangeAt) 
        return selectionObject.getRangeAt(0); 
    else { // Safari! 
        var range = document.createRange(); 
        range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset); 
        range.setEnd(selectionObject.focusNode,selectionObject.focusOffset); 
        return range; 
    } 
}

理想情况下,我们通过选择对象的getRangeAt()来访问W3C范围对象。这个方法会在给定的位置返回一个范围对象:就像平常一样第一个范围对象的编号是0。(getRangeAt()已经设计好如果有多处选择的情况下怎么办。在那种情况下你的代码也很简单)

自从创建一个范围

不幸的是Safari1.3不支持getRangeAt()。因此我们需要创建一个跟用户选择一样的范围对象。这是一个很好的练习机会,可以让你知道如何创建自己的范围对象。

很明显的从创建一个对象开始:

var range = document.createRange();

现在我们已经有了一个空对象。为了把他插入到文档里面去我们需要使用setStart()函数和setEnd()函数。

这两个方法需要两个参数:

1、在哪个DOM节点上开始或者结束的?

2、从哪个文本偏移上开始或者结束的?文本偏移就是指范围对象的第一个或者最后一个字符的位置。

让我们再来看一遍第二个例子:

href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
	class="external">Call for a Blogger's Code of Conduct</a></h4><p>Tim O'Reilly calls for a Blogger Code of Conduct. His proposals are:</p>
<ol>
	<li>Take responsibility not just for your own words, but for the
		comments you allow on your blog.</li>
	<li>Label your tolerance level for abusive comments.</li>
	<li>Consider eliminating anonymous comments.</li>
</ol>

范围从<p>节点开始,并且文字偏移量是13,因为第14个字符已经是包含在范围里面的了(和通常一样,编号从0开始的)。

范围从<li>结束,偏移量是17,因为第18个字符时范围内的最后一个字符了。

如何创建这个范围对象:

var startPar = [the p node]; 
var endLi = [the second li node]; 
range.setStart(startPar,13); 
range.setEnd(endLi,17);

(注意现在创建的范围对用户不可见,只在浏览器的内部)

现在我们已经创建了一个范围,我们也可以读出他的开始和结束点。startContainer和startOffset决定了范围的开始位置,同样的endContainer和endOffset决定了结束位置。

读取选区的开始和结束位置
不幸的是,你并不知道用户选择了页面哪个部分。所以你需要先读出用户选择的开始和结束的位置:这个必须在选择对象(selection object)里面完成,因为这时候还没有范围对象(range object)。

我们刚刚看到每一个范围对象都有标明他开始和结束位置的四个属性。选择对象也有相似的。当然是另外的名字:anchorNode/anchorOffset代表开始位置,focusNode/focusOffset代表结束位置。

所以读出了选择对象的开始和结束位置之后我们就能创建范围对象了:

range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset); 
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);

待续
现在我们有了范围对象和微软的文本范围对象。以后我们会讲解如何使用它们,并且解决不兼容的问题。

翻译地址:http://www.quirksmode.org/dom/range_intro.html

转载请保留以下信息
作者:北玉(tw:@rehawk)

Javascript 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
JavaScript中继承的一些示例方法与属性参考
Aug 07 Javascript
javascript 冒泡排序 正序和倒序实现代码
Dec 14 Javascript
capacityFixed 基于jquery的类似于新浪微博新消息提示的定位框
May 24 Javascript
jQuery的slideToggle方法实例
May 07 Javascript
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
Javascript中八种遍历方法的执行速度深度对比
Apr 25 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
JavaScript实现多张图片放大镜效果示例【不限定图片尺寸,rem单位】
May 14 Javascript
js 获取扫码枪输入数据的方法
Jun 10 Javascript
javascript实现倒计时关闭广告
Feb 09 Javascript
JavaScript DOM学习第八章 表单错误提示
Feb 19 #Javascript
JavaScript DOM 学习第七章 表单的扩展
Feb 19 #Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 #Javascript
JavaScript DOM 学习第五章 表单简介
Feb 19 #Javascript
JavaScript DOM学习第四章 getElementByTagNames
Feb 19 #Javascript
JavaScript DOM 学习第三章 内容表格
Feb 19 #Javascript
JavaScript DOM 学习第二章 编辑文本
Feb 19 #Javascript
You might like
简单谈谈php浮点数精确运算
2016/03/10 PHP
PHP动态地创建属性和方法, 对象的复制, 对象的比较,加载指定的文件,自动加载类文件,命名空间
2016/05/06 PHP
php使用parse_str实现查询字符串解析到变量中的方法
2017/02/17 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
2012/02/07 Javascript
Jquery带搜索框的下拉菜单
2013/05/06 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
自己动手写的javascript前端等待控件
2015/10/30 Javascript
JavaScript 模块的循环加载实现方法
2015/12/13 Javascript
详解Javascript ES6中的箭头函数(Arrow Functions)
2016/08/24 Javascript
原生JS控制多个滚动条同步跟随滚动效果
2017/12/22 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
使用JavaScript保存文本文件到本地的两种方法
2019/01/22 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
[00:33]DOTA2上海特级锦标赛 CDEC战队宣传片
2016/03/04 DOTA
用Python一键搭建Http服务器的方法
2018/06/01 Python
Python3实现将本地JSON大数据文件写入MySQL数据库的方法
2018/06/13 Python
详解python单元测试框架unittest
2018/07/02 Python
centos6.8安装python3.7无法import _ssl的解决方法
2018/09/17 Python
对python读写文件去重、RE、set的使用详解
2018/12/11 Python
OpenCV模板匹配matchTemplate的实现
2019/10/18 Python
Django models文件模型变更错误解决
2020/05/11 Python
python爬虫要用到的库总结
2020/07/28 Python
浅析Python 责任链设计模式
2020/09/11 Python
利用python绘制正态分布曲线
2021/01/04 Python
CSS3 二级导航菜单的制作的示例
2018/04/02 HTML / CSS
莫斯科大型旅游休闲商品超市:Camping.ru
2020/09/16 全球购物
局域网定义和特性
2016/01/23 面试题
留学自荐信的技巧
2013/10/17 职场文书
公司庆典邀请函范文
2014/01/13 职场文书
大学生实习证明范文(5篇)
2014/09/18 职场文书
2015年世界环境日活动方案
2015/05/05 职场文书
刑事案件上诉状
2015/05/23 职场文书
大学生学生会工作总结2015
2015/05/26 职场文书
Redis基于Bitmap实现用户签到功能
2021/06/20 Redis
解析Redis Cluster原理
2021/06/21 Redis