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 相关文章推荐
检测jQuery.js是否已加载的判断代码
May 20 Javascript
jQuery load方法用法集锦
Dec 06 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
jQuery中 attr() 方法使用小结
May 03 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
js实现华丽的九九乘法表效果
Mar 29 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
Vue2.0基于vue-cli+webpack同级组件之间的通信教程(推荐)
Sep 14 Javascript
完美解决axios在ie下的兼容性问题
Mar 05 Javascript
在vue使用clipboard.js进行一键复制文本的实现示例
Jan 15 Javascript
微信小程序拼接图片链接无底洞深入探究
Sep 03 Javascript
Vue+Openlayers自定义轨迹动画
Sep 24 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代码
2008/04/09 PHP
PHP的反射类ReflectionClass、ReflectionMethod使用实例
2014/08/05 PHP
Javascript SHA-1:Secure Hash Algorithm
2006/12/20 Javascript
在Ajax中使用Flash实现跨域数据读取的实现方法
2010/12/02 Javascript
浅析js中2个等号与3个等号的区别
2013/08/06 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
轻量级的原生js日历插件calendar.js使用指南
2015/04/28 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
jQuery实现的简洁下拉菜单导航效果代码
2015/08/26 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
JS实现简易刻度时钟示例代码
2017/03/11 Javascript
Bootstrap Table从零开始
2017/06/30 Javascript
nodejs项目windows下开机自启动的方法
2017/11/22 NodeJs
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
关闭Vue计算属性自带的缓存功能方法
2018/03/02 Javascript
JavaScript中call和apply方法的区别实例分析
2018/08/03 Javascript
在vue项目中优雅的使用SVG的方法实例详解
2018/12/03 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
vue+axios实现post文件下载
2019/09/25 Javascript
JS实现放烟花效果
2020/03/10 Javascript
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
python opencv设置摄像头分辨率以及各个参数的方法
2018/04/02 Python
Python面向对象之反射/自省机制实例分析
2018/08/24 Python
django框架用户权限中的session缓存到redis中的方法
2019/08/06 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
python实现将json多行数据传入到mysql中使用
2019/12/31 Python
python“静态”变量、实例变量与本地变量的声明示例
2020/11/13 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
工厂会计员职责
2014/02/06 职场文书
奥巴马的演讲稿
2014/05/15 职场文书
大雁塔导游词
2015/02/04 职场文书
中班教师个人总结
2015/02/05 职场文书
销区经理年终述职报告模板
2019/11/28 职场文书
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Ruby序列化和持久化存储 Marshal和Pstore介绍
2022/04/18 Ruby
Docker安装MySql8并远程访问的实现
2022/07/07 Servers