JavaScript DOM 학습 9장 선택 범위 소개_기본 지식

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

 

什么是范围

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

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

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

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

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

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

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

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

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

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

正如你所看到的，浏览器会添加最少的元素让这段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는 Microsoft의 방법을 사용하고 다른 브라우저는 Mozilla의 방법을 사용합니다.

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

var userSelection;
if (window.getSelection) {
userSelection = window.getSelection()
}
else if (document.selection) { / /는 마지막에 와야 합니다.
userSelection = document.selection.createRange();
}

Mozilla, Safari 및 Opera에서는 이제 선택 개체입니다. , 이는 IE의 텍스트 범위 개체입니다. 이러한 구별은 코드 후반부에 적용됩니다. IE의 텍스트 범위 개체는 W3C의 범위 개체 및 Mozilla의 선택 개체와 근본적으로 다르며 코드의 각 부분은 서로 보완되어야 합니다.

분기 순서에 주의하세요. Mozilla 선택이 먼저 와야 합니다. Opera는 두 가지를 모두 지원하기 때문에 window.getSelection()을 사용하여 사용자 선택을 읽는 경우 Opera는 선택 개체를 생성하지만 document.selection을 사용하면 텍스트 범위 개체도 생성합니다.

Opera는 Mozilla 및 W3C 모드를 매우 잘 지원하지만 IE에 대한 지원에는 실제로 결함이 있으므로 감지를 위해 window.getSelection을 먼저 배치해야 합니다.

userSelection의 콘텐츠
이제 userSelection은 Mozilla 선택 개체이자 IE 텍스트 범위 개체입니다. 이런 식으로 그는 모든 메서드와 속성을 사용할 수 있습니다.

그런 다음 Mozilla의 선택 개체 userSelection은 사용자가 선택한 텍스트(HTML 대신)를 저장합니다. 다음과 같이 작성하세요:

코드 복사 코드는 다음과 같습니다.

alert(userSelection)

은 다음을 작성합니다.

Blogger 행동 강령을 요구합니다. 그의 제안은 다음과 같습니다. 자신의 말뿐만 아니라 블로그에 허용한 댓글에도 책임을 져야 합니다. 원하는 경우 허용 범위를 표시하세요. Microsoft 텍스트 범위 개체에서 동일한 내용을 얻으려면 다음을 사용해야 합니다.

var selectedText = userSelection;if (userSelection.text) selectedText = userSelection.text; 이제 selectedText에는 사용자가 선택한 텍스트가 포함됩니다. . 이 정보가 충분하다고 생각되면 다음 작업 준비를 시작하십시오.

선택 개체에서 범위 개체 만들기
다루고 싶은 것은 사용자의 선택 범위를 나타내는 범위 개체입니다. Microsoft 모드에서는 조건이 이미 충족되었습니다. 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); }
}

理想情况下，我们通过选择对象的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"<br>	class="external">Call for a Blogger's Code of Conduct</a></h4><br><br><p>Tim O'Reilly <span style="BACKGROUND-COLOR: #3366ff"><span style="COLOR: #000000">calls for a Blogger Code of Conduct. His proposals are:</p><br><br><ol><br>	<li>Take responsibility not just for your own words, but for the<br>		comments you allow on your blog.</li><br>	<li>Label </span></span>your tolerance level for abusive comments.</li><br>	<li>Consider eliminating anonymous comments.</li><br></ol>

范围从

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

范围从

结束，偏移量是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)