源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

JS Range HTML文档/文字内容选中、库及应用介绍

  • 时间:2022-11-04 04:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:JS Range HTML文档/文字内容选中、库及应用介绍
[b]一、前面的些话[/b] 本文的内容基本上是基于“区域范围对象(Range objects)”这个概念来说的。这个玩意,可以让你选择HTML文档的任意部分,并可以拿这些选择的信息做你想做的事情。其中,最常见的Range是用户用鼠标选择的内容(user selection)。 本文有不少篇幅就是讲如何将用户的这种选择转换为W3C Range或Microsoft Text Range对象。 [b]二、什么是Range? [/b]所谓"Range",是指HTML文档中任意一段内容。一个Range的起始点和结束点位置任意,甚至起始点和结束点可以是一样的(也就是空Range)。最常见的Range是用户文本选择范围(user text selection)。当用户选择了页面上的某一段文字后,你就可以把这个选择转为Range。当然,你也可以直接用程序定义Range。 例如下面这个模样的例子:
2011-04-12 
负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出,因福岛核电站使用的燃料较切尔诺贝利核电站多,且有反应堆使用了含有高毒性的钚的燃料,因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。
上面选中状态的那些文字就可以转换成[code]Range对象[/code](下面会详细讲述)。通过[code]Range对象[/code]你可以找到[code]Range[/code]的起始点和结束点,如果你实在有心,还可以删除或是复制这些内容,或是用其他文字替换,甚至是简单的HTML。 上面的例子可以说是最简单的[code]Range对象[/code]的例子,因为其只包含了文字。而实际上,[code]Range对象[/code]也是可以包含HTML代码内容的,例如下面这个示例:
<time>2011-04-12</time> 
<p>据日本广播协会电视台12日报道,日本经济产业省原子能安全保安院决定将福岛第一核电站核泄漏事故等级提高至7级。这使日本核泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p> 
<p>负责调查切尔诺贝利核事故对人与环境造成影响的俄科学家亚布罗科夫博士指出,因福岛核电站使用的燃料较切尔诺贝利核电站多,且有反应堆使用了含有高毒性的钚的燃料,因此"福岛核电站事故可能会比切尔诺贝利带来更严重的后果"。</p>
同样的,[code]Range对象[/code]被创建,且包含HTML,现在的问题是选择的内容正好跨过了楚河和汉界(跨标签),如果就单纯的论选择的内容的话,应该如下:
泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p> 
<p>负责调查切尔诺贝
显然,上面的HTML属于1级残废,基本无效。然而幸运的是,所有的浏览器都会自动调整HTML片段使其有效,就像变成下面这样:
<p>泄漏事故等级与苏联切尔诺贝利核电站核泄漏事故等级相同。</p> 
<p>负责调查切尔诺贝</p>
可以看到,浏览器自动补全了一定数目的HTML来让[code]Range[/code]有效。如果你复制或是移动[code]Range[/code],你所复制或移动的HTML内容一定是有效的。 [h2]三、浏览器的兼容性[/h2] 在真正操刀JavaScript之前我们需要大致知道[code]Range对象[/code]的浏览器兼容性情况。实际上,问题是比较麻烦的,因为至少有3种[code]类似Range对象[/code],且你有必要全部理解。先展示详细的兼容性情况表: [b]支持:[/b][img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] 不支持:[img]http://files.jb51.net/file_images/article/201105/error.gif[/img] 部分支持:[img]http://files.jb51.net/file_images/article/201105/part.gif[/img]
1. W3C Range
[b]W3C Range[/b]
  Explorer 6/7 Firefox 2 Safari 1.3 Opera 9
cloneContents() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/part.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
cloneRange() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
collapse() tbd tbd tbd tbd
collapsed [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
commonAncestorContainer [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
compareBoundaryPoints() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
comparePoint() – Mozilla 扩展 [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
createContextualFragment() – Mozilla 扩展 [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
deleteContents() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
detach() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
endContainer [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
endOffset [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/part.gif[/img]
extractContents() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
insertNode() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
isPointInRange() – Mozilla 扩展 [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
selectNode() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
selectNodeContents() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
setEnd() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
setEndAfter() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
setEndBefore() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
setStart() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
setStartAfter() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
setStartBefore() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
startContainer [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
startOffset [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/part.gif[/img]
surroundContents() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
[b]说明:[/b] [code]cloneContents()[/code]的用法类似[code]docFrag = rangeObject.cloneContents()[/code],[code]Range对象[/code]内容被克隆同时被添加到文档片段上,并返回自身。但是在Safari下有个问题,即如果选择范围是空,将会返回[code]null[/code]而不是空的文档片段。可以通过类似[code]docFrag = rangeObject.cloneContents() || document.createDocumentFragment()[/code]这样的代码修复。 [code]deleteContents()[/code]处,[code]Range[/code]内容会被永久删除,无返回值。 [code]endContainer[/code]指用户选择内容结尾处的容器节点。通常是文本节点。 [code]extractContents()[/code]用法[code]docFrag = rangeObject.extractContents()[/code]。从DOM树上剪切[code]Range对象[/code]并返回文档片段。该片段可以粘贴到页面上。 [code]startContainer[/code]指用户选择内容起始处的容器节点。通常是文本节点。 [code]startOffset[/code]在Opera浏览器下,在选择内容为空的时候返回[code]0[/code]。
2. Mozilla Selection
[b]Mozilla Selection[/b]
  Explorer 6/7 Firefox 2 Safari 1.3 Opera 9
addRange() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
anchorNode [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
anchorOffset [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/part.gif[/img]
collapse() tbd tbd tbd tbd
collapseToEnd() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
collapseToStart() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
containsNode() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
deleteFromDocument() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
extend() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
focusNode [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
focusOffset [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/part.gif[/img]
getRangeAt() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
isCollapsed [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
rangeCount [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
removeAllRanges() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
removeRange() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
selectAllChildren() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
selectionLanguageChange() [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
[b]说明:[/b] [code]anchorNode[/code]用法为[code]userSelection.anchorNode[/code]。指用户选择内容起始处的容器节点。通常是文本节点。 [code]anchorNode[/code]在Opera浏览器下,在选择内容为空的时候返回[code]0[/code]。 [code]focusNode[/code]用法为[code]userSelection.focusNode[/code]。指用户选择内容结尾处的容器节点。通常是文本节点。 [code]focusOffset[/code]在Opera浏览器下,在选择内容为空的时候返回[code]0[/code]。 [code]getRangeAt()[/code]用法为[code][/code]rangeObject = userSelection.getRangeAt(0),作用是将[code]Mozilla Selection[/code]转换为[code]W3C Range[/code]。
3. Microsoft TextRange
[b]Microsoft TextRange[/b]
  Explorer 6/7 Firefox 2 Safari 1.3 Opera 9
boundingHeight [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
boundingLeft [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
boundingTop [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
boundingWidth [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
collapse() tbd tbd tbd tbd
compareEndPoints() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
duplicate() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
expand() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
findText() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
htmlText [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
move() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
moveEnd() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
moveStart() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
moveToElementText() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
moveToPoint() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
offsetLeft [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
offsetTop [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
parentElement() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
pasteHTML() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
scrollIntoView() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img]
select() [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
text [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
[b]说明:[/b] [code]htmlText[/code]用法为[code]htmlString = userSelection.htmlText[/code]。返回字符串,为[code]TextRange[/code]的HTML内容,相当于[code]innerHTML[/code]。只读。 [code]pasteHTML()[/code],当粘贴HTML到一个文本节点时,该文本节点自动分隔。 [code]text[/code]用法为[code]string = userSelection.text[/code]。返回字符串,为[code]TextRange[/code]的文本内容,相当于[code]innerText[/code]。可读/写。
4. 总的兼容性
[b]总的兼容性[/b]
  Explorer 6/7 Firefox 2 Safari 1.3 Opera 9
W3C Range [url=http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html]详述[/url] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
Mozilla Selection [url=http://developer.mozilla.org/en/docs/DOM:range]详述[/url] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/part.gif[/img] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img]
Microsoft Text Range [url=http://msdn2.microsoft.com/en-us/library/ms535872.aspx]详述[/url] [img]http://files.jb51.net/file_images/article/201105/ok.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/error.gif[/img] [img]http://files.jb51.net/file_images/article/201105/part.gif[/img]
[b]说明:[/b] [list] [*][code]W3C Range对象[/code]是唯一官方指定。基本上其是将[code]Range[/code]作为包含DOM的文档片段。 [/*][*][code]Mozilla Selection对象[/code]显得有些多余,其存在是为了向后兼容Netscape 4。其类似于[code]W3C Range对象[/code],也是基于DOM树的。 [/*][*][code]Microsoft Text Range对象[/code]跟上面两个就是郭德纲和玄彬的区别了,因为其是基于字符串的。事实上,[code]Text Range[/code]包含的字符串是很难一下子跳变成DOM节点的。 [/*][/list] 总的来说,[code]Mozilla Selection对象[/code]就是个打酱油的命,仅有的闪光点能够直接将用户选择任何内容变成完全[code]Range对象[/code]以及一些额外的方法或是属性可以向后兼容Netscape 4。但是不幸的是除了IE浏览器外的其他浏览器都支持此[code]Selection对象[/code]。 [h2]四、获得用户选择内容[/h2] 婆婆妈妈的解释就免了,直接看相关代码:
[url=http://www.quirksmode.org/dom/range_intro.html]Introduction to Range[/url] [*][url=http://www.quirksmode.org/dom/w3c_range.html]W3C DOM Compatibility – Range[/url] [/*][*][url=http://code.google.com/p/rangy/]rangy – A cross-browser JavaScript range and selection library [/url] [/*][*][url=http://css-tricks.com/reveal-a-background-image-upon-text-selection/]Reveal a Background Image upon Text Selection[/url] [/*][/list] 原创文章,转载请注明来自张鑫旭-鑫空间-鑫生活
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部