开发学院网页设计 JavaScript JavaScript DOM学习第九章：选取范围的介绍阅读

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

　2010-03-30 00:00:00　来源：WEB开发网　　　

核心提示： 很明显的从创建一个对象开始：varrange=document.createRange();现在我们已经有了一个空对象，为了把他插入到文档里面去我们需要使用setStart()函数和setEnd()函数，JavaScript DOM学习第九章：选取范围的介绍(5)，这两个方法需要两个参数：1、在

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

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个字符时范围内的最后一个字符了。

如何创建这个范围对象：

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

（注意现在创建的范围对用户不可见，只在浏览器的内部）

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

读取选区的开始和结束位置

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

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

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

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

待续