JavaScriptDOM学习第九章选取范围的介绍
虽然我们会讲解用程序创建范围对象,但是我们把精力主要集中在如何将用户的选取范围转换成为W3C范围或者微软的文档范围对象。
什么是范围
范围是指HTML文档中的任意一部分内容。一个范围的开始和结束点都可以是随意的,甚至是相同的(一个空范围)。最常见的范围就是用户选取的文本。当用户在页面上选取了一部分,你就可以他的选取部分转换为范围对象。然而,你也可以让程序自动选择范围。
让我们以下面的代码为例。假设用户选择了下面的文字:
<h4id="entry1196"><a
href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
class="external">CallforaBlogger"sCodeofConduct</a></h4>
<p>TimO"ReillycallsforaBloggerCodeofConduct.Hisproposalsare:</p>
<ol>
<li>Takeresponsibilitynotjustforyourownwords,butforthe
commentsyouallowonyourblog.</li>
<li>Labelyourtolerancelevelforabusivecomments.</li>
<li>Considereliminatinganonymouscomments.</li>
</ol>
你可以将用户选择转换为一个包含用户选择范围的文本的范围对象(后面讲)。根据范围对象,你能找到开始和结束的范围点。如果你愿意你可以删除它拷贝它或者用其他文本代替,甚至用HTML代码来代替。
这是范围对象最简单的例子了,因为他只包含文本。下面我们来看一个复杂的例子:
<h4id="entry1196"><a
href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
class="external">CallforaBlogger"sCodeofConduct</a></h4>
<p>TimO"ReillycallsforaBloggerCodeofConduct.Hisproposalsare:</p>
<ol>
<li>Takeresponsibilitynotjustforyourownwords,butforthe
commentsyouallowonyourblog.</li>
<li>Labelyourtolerancelevelforabusivecomments.</li>
<li>Considereliminatinganonymouscomments.</li>
</ol>
另外一个范围对象被创建了,而且还包含HTML。问题在于用户的选择范围跨越了几个元素。去掉其他的内容,就剩下:
callsforaBloggerCodeofConduct.Hisproposalsare:</p>
<ol>
<li>Takeresponsibilitynotjustforyourownwords,butforthe
commentsyouallowonyourblog.</li>
<li>Labelyourtoleran
这是一段不完整的HTML。幸好所有的浏览器都会转化一下:
<p>callsforaBloggerCodeofConduct.Hisproposalsare:</p>
<ol>
<li>Takeresponsibilitynotjustforyourownwords,butforthe
commentsyouallowonyourblog.</li>
<li>Labelyourtoleran</li></ol>
正如你所看到的,浏览器会添加最少的元素让这段HTML完整,如果你复制的话,那么这些添加的东西也会被复制。
浏览器兼容性一览
在我们继续之前,有必要看看浏览器的兼容性。主要问题在于这里有不下3个范围对象的类型,你必须都有所了解才行。
Explorer6/7
访问用户选区
要处理用户的选择就必须先访问到用户的选区。这会立马又一个代码分支:IE使用微软的方法,其他浏览器使用Mozilla的方法:
varuserSelection;
if(window.getSelection){
userSelection=window.getSelection();
}
elseif(document.selection){//shouldcomelast;Opera!
userSelection=document.selection.createRange();
}
在Mozilla,Safari,Opera里面现在userSelection是一个选择对象(selectionobject),在IE中是一个文本范围对象(textrangeobject)。这个区别在后面的代码中依然有效:IE的文本范围对象和W3C的范围对象以及Mozilla的选择对象有根本的不同,每一部分的代码都需要另一部分的补充。
要注意分支的顺序:MozillaSelection一定要在前。因为Opera两种都支持,如果你用window.getSelection()读取用户的选区,Opera就会创建一个选择对象,可是你用document.selection的时候他也会创建一个文本范围对象。
虽然Opera支持Mozilla和W3C模式很不错,但是支持IE确是有毛病,这样就不得不把window.getSelection放在前面检测。
userSelection的内容
现在userSelection既是一个Mozilla的选择对象又是IE的文本范围对象。这样他就可以使用所有的方法和属性了。
然后,Mozilla的选择对象userSelection里面保存的用户选择的文本(而不是HTML)。这样写:
就会产生:
callsforaBloggerCodeofConduct.Hisproposalsare:Takeresponsibilitynotjustforyourownwords,butforthecommentsyouallowonyourblog.Labelyourtoleran如果想在微软的文本范围对象中得到相同的内容你就要使用:
varselectedText=userSelection;if(userSelection.text) selectedText=userSelection.text;现在selectedText就包含了用户选择的文本。如果你觉得这样的信息足够的话,那么就开始准备后面的工作吧。
从选择对象创建范围对象
很多时候,你想处理的是代表用户选择范围的范围对象(rangeobject)。在微软模式中条件已经具备:userSelection就是一个文本范围。在兼容W3C的浏览器中userSelection依然只是一个选择对象,是时候创建一个与选择对象内容相同的范围对象了。
按照下面这样:
varrangeObject=getRangeObject(userSelection);
functiongetRangeObject(selectionObject){
if(selectionObject.getRangeAt)
returnselectionObject.getRangeAt(0);
else{//Safari!
varrange=document.createRange();
range.setStart(selectionObject.anchorNode,selectionObject.anchorOffset);
range.setEnd(selectionObject.focusNode,selectionObject.focusOffset);
returnrange;
}
}
理想情况下,我们通过选择对象的getRangeAt()来访问W3C范围对象。这个方法会在给定的位置返回一个范围对象:就像平常一样第一个范围对象的编号是0。(getRangeAt()已经设计好如果有多处选择的情况下怎么办。在那种情况下你的代码也很简单)
自从创建一个范围
不幸的是Safari1.3不支持getRangeAt()。因此我们需要创建一个跟用户选择一样的范围对象。这是一个很好的练习机会,可以让你知道如何创建自己的范围对象。
很明显的从创建一个对象开始:
varrange=document.createRange();
现在我们已经有了一个空对象。为了把他插入到文档里面去我们需要使用setStart()函数和setEnd()函数。
这两个方法需要两个参数:
1、在哪个DOM节点上开始或者结束的?
2、从哪个文本偏移上开始或者结束的?文本偏移就是指范围对象的第一个或者最后一个字符的位置。
让我们再来看一遍第二个例子:
href="http://radar.oreilly.com/archives/2007/03/call_for_a_blog_1.html"
class="external">CallforaBlogger"sCodeofConduct</a></h4>
<p>TimO"ReillycallsforaBloggerCodeofConduct.Hisproposalsare:</p>
<ol>
<li>Takeresponsibilitynotjustforyourownwords,butforthe
commentsyouallowonyourblog.</li>
<li>Labelyourtolerancelevelforabusivecomments.</li>
<li>Considereliminatinganonymouscomments.</li>
</ol>
范围从<p>节点开始,并且文字偏移量是13,因为第14个字符已经是包含在范围里面的了(和通常一样,编号从0开始的)。
范围从<li>结束,偏移量是17,因为第18个字符时范围内的最后一个字符了。
如何创建这个范围对象:
varstartPar=[thepnode];
varendLi=[thesecondlinode];
range.setStart(startPar,13);
range.setEnd(endLi,17);
(注意现在创建的范围对用户不可见,只在浏览器的内部)
现在我们已经创建了一个范围,我们也可以读出他的开始和结束点。startContainer和startOffset决定了范围的开始位置,同样的endContainer和endOffset决定了结束位置。
读取选区的开始和结束位置
不幸的是,你并不知道用户选择了页面哪个部分。所以你需要先读出用户选择的开始和结束的位置:这个必须在选择对象(selectionobject)里面完成,因为这时候还没有范围对象(rangeobject)。
我们刚刚看到每一个范围对象都有标明他开始和结束位置的四个属性。选择对象也有相似的。当然是另外的名字: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)
相关文章
- Java大数据学习01–大数据的本质及学习顺序介绍
- Python机器学习教程—前传:机器学习介绍(1)
- 常见多智能体强化学习仿真环境介绍【一】{推荐收藏,真的牛}
- 【Linux】Linux命令快速学习神器tldr、cheat介绍和使用
- MongoDB学习笔记之GridFS使用介绍
- mysql学习笔记 第八天详解数据库
- SpringMVC学习笔记三 整合jdbc和事务详解编程语言
- 函数MongoDB回调函数:学习它们的基础知识(mongodb回调)
- 学Linux vi 指令操作介绍学习Linux vi指令:简单快捷入门指南(linuxvi在哪)
- 学习Oracle的SQL语法,掌握精妙技巧(oracle的sql语法)
- 学习Linux环境下日语学习之路(linux日语)
- 入门指南:菜鸟学习Linux基础知识(菜鸟学linux)
- 学习MSSQL触发器:25步教程(mssql触发器教程)
- 学习C与Oracle的绝妙组合开篇介绍(c# oracle教程)
- B站上的MySQL学习资源发掘你的技能(b站mysql学习资源)
- PythonORM框架SQLAlchemy学习笔记之数据添加和事务回滚介绍