Notes: DOM Range

通过DOM范围可以选择文档中的某个区域，而不需考虑节点的界限，例如文本高亮的处理就可以使用范围来实现。

1、Range的创建

使用document的createRange来创建一个范围，该方法返回一个Range实例，该实例有很多属性和方法，如下所示：

startContainer：包含范围起点的节点

startOffset：范围起点在startContainer中的偏移量，既节点索引

endContainer：包含范围终点的节点

endOffset：范围终点在endContainer的偏移量，节点索引+1

检测浏览器是否支持范围

document.implementation.hasFeature('Range','2.0')  OR

typeof document.createRange === 'function'

创建范围

var range = document.createRange();
//由于IE8及以下浏览器不支持DOM Range，但是支持文本范围(document.body.createTextRange)
var range = document.body.createTextRange();

2、Range的实例方法

假设有一个HTML文档如下所示

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

</head>

<body>

  <div class="outer" id="outer">

    <div class="inner" id="inner1">hello world!</div>

    <div class="inner" id="inner2"><span>你好吗</span></div>

  </div>

</body>

</html>

选择文档的一部分，可以使用selectNode或者selectNodeContents方法，如下所示

var range = document.createRange();

range.selectNode(inner1);

console.log(range.startOffset);//1  因为空格被当作一个文本节点

---------------------------------------------------

var range = document.createRange();

range.selectNodeContents(outer);

console.log(range.endOffset);//5

//IE8以下

var range = document.body.createTextRange();

range.findText("hello");

console.log(range.text);//hello

range.moveToElementText(inner1);

console.log(range.htmlText);

也可以使用setStartBefore、setStartAfter、setEndBefore、setEndAfter等方法来选择文档范围

var range = document.createRange();

range.setStartBefore(inner1);

range.setEndBefore(inner2);

console.log(range.endOffset);//3

还可以使用setStart和setEnd来选择，这两个函数均需要两个参数，一个参照节点，一个偏移量，对于setStart来说，参照节点便是startContainer，而setEnd的参照节点是endContainer

var range = document.createRange();

range.setStart(inner1,0);

range.setEnd(inner1,inner1.childNodes.length);

console.log(range.endOffset);//1

//IE8以下

range.moveStart("word", 2); //起点移动2 个单词

range.moveEnd("character", 1); //终点移动1 个字符

-----------------------------------------

"character"：逐个字符地移动。

"word"：逐个单词（一系列非空格字符）地移动。

"sentence"：逐个句子（一系列以句号、问号或叹号结尾的字符）地移动。

"textedit"：移动到当前范围选区的开始或结束位置。

操作选区中内容

1、从文档中删除选区的内容deleteContents和extractContents，他们的区别就是后者会返回删除的文档片段，如下所示

var range = document.createRange();

range.setStart(inner1.firstChild,0);

range.setEnd(inner1.firstChild,5);

//range.deleteContents();

var fragment = range.extractContents();

box.appendChild(fragment);

2、复制选区内容cloneContents，复制出来的只是范围中节点的副本，不是真实的节点

var range = document.createRange();

range.setStart(outer,0);

range.setEnd(outer,outer.childNodes.length);

var fragment = range.cloneContents();

box.appendChild(fragment);

3、向范围中插入内容insertNode或者surroundContents

var range = document.createRange();

range.selectNodeContents(outer);

var span = document.createElement('span');

span.innerText = "我知道了";

range.insertNode(span);//会在范围的开始处插入指定节点

------------------------------------------------------------------

var range = document.createRange();

range.setStart(inner1.firstChild,0);

range.setEnd(inner1.firstChild,5);

var span = document.createElement('span');

span.className = "red";

range.surroundContents(span);

//ie8以下

var range = document.body.createTextRange();

range.findText("Hello");

range.text = "Howdy";

-------------------------------------

range.pasteHTML("<em>Howdy</em>");//类似与range.surroundContents

4、复制Range和清理Range

复制range，使用cloneRange方法，该方法复制出来的是指定范围的副本；使用detach方法把范围从文档中分离，然后解除范围的引用

var range = document.createRange();

range.setStart(inner1.firstChild,0);

range.setEnd(inner1.firstChild,5);

var rangeBak = range.cloneRange();

var fragment = rangeBak.extractContents();

box.appendChild(fragment);

range.detach();

range = null;

Notes: DOM Range的更多相关文章

XML DOM - Range 对象
Range对象 Range对象表示文档的连续范围区域,如用户在浏览器窗口中用鼠标拖动选中的区域. dom标准Range对象在IE中使用TextRange对象 range对象常用的建立方法在开发中 ...
JS 之DOM range对象
DOM范围 DOM中的range对象是DOM2中新定义的接口.通过这个对象可以选择文档中的某个区域,而不必考虑节点的界限. 创建范围 document.createRange()创建一个范围,这个范围 ...
Notes:DOM的事件模拟
首先使用document对象的createEvent方法创建一个事件对象,然后初始化该事件对象,接着使用支持事件DOM节点的dispatchEvent方法触发事件. DOM2级事件和DOM3级事件有些 ...
十几张表的join(千万级/百万级表) 7hours-->5mins
================START============================== 来了一个mail说是job跑得很慢,调查下原因先来看下sql: SELECT h.order_ ...
百度UEditor基本使用
1 首先奉上链接其http://ueditor.baidu.com/website/index.html 更多更详细内容在其官方api上,本文只是一个归类总结性文章. 2 下载链接http://ued ...
可编辑的DIV -编辑器
找了好多,没几个好用的,都或多或少有问题目前这个最好用.. 不过有一个奇葩的问题,就是要放在"<a></a>"标签里面, js或者jQuery获取 $ ...
Ckeditor 的加载顺序
我们的只用在文件里面引用一个CKEditor的js文件--CKEditor目录下的ckeditor.js文件, 该文件会完成后续的所有的CKEidtor依赖的js文件的加载. 所依赖的js文件加载顺序 ...
API返回错误信息的最佳实践
使用HTTP Status区分不同消息返回最基础的三个状态200 OK, 400 Client Error, 500 Server Error 这些应该是够的, 如果客户端可以处理更细的划分, 可以 ...
UEditor API 文档
来源:http://www.e4dai.com/ueditor-api/#ue.editor http://www.e4dai.com/ueditor-api/ UE.Editor 依赖 editor ...

随机推荐

Redis_redis分布式锁-SETNX
因业务需要使用了redis的SETNX来实现分布式锁. 描述:Redis有一系列的命令,特点是以NX结尾,NX是Not eXists的缩写,如SETNX命令就应该理解为:SET if Not eXis ...
QGis、Qt对话框上的OK、Open、Cancel、Help等英文翻译
成功编译qgis,启动程序发现对话框上的OK.Open.Cancel.Help等依然是英文字段,然后查找源码看这些字段是否都添加到了语言翻译包中: 最后发现这些按钮都是qt的QTGui4库中的QDia ...
设计模式（十二）：bridge模式
刚开始看到这个模式并不是很理解,之后在网上看到别人的博客,才大致抓住了脉络. 何谓抽象和实现分离:就是将一个实际的物件跟它的所具有的功能分离.<大话设计模式>中有对手机品牌和具体的手机应用 ...
ActionMapping
在Struts中,ActionServlet只是任务的分派者,它依请求分配任务给其它的对象来执行,而分配的依据是请求的URI以及struts-config.xml的<action-mapping ...
Call to undefined function Think\mb_strlen()
在php.ini 中开启php_mbstring.dll 模块后重启 apache
hadoop2.2编程：MRUnit测试
引用地址:http://www.cnblogs.com/lucius/p/3442381.html examples: Overview This document explains how to w ...
.NET面试题系列[9] - IEnumerable
.NET面试题系列目录什么是IEnumerable? IEnumerable及IEnumerable的泛型版本IEnumerable<T>是一个接口,它只含有一个方法GetEnumera ...
优秀网站看前端 —— 小米Note介绍页面
刚开始经营博客的时候,我写过不少“扒皮”系列的文章,主要介绍一些知名站点上有趣的交互效果,然后试着实现它们.后来开始把注意力挪到一些新颖的前端技术上,“扒皮”系列便因此封笔多时.今天打算重开“扒皮”的 ...
RxJava 备注
RxJava是一个采用观察者模式的异步框架,本文给出几个基本的使用例子. 1.配置依赖: compile 'io.reactivex:rxjava:1.0.14' compile 'io.reacti ...
关于printf错用格式化字符串导致double和long double输出错误的小随笔
[题外话] 以前用HUSTOJ给学校搭建Online Judge,所有的评测都是在Linux下进行的.后来为了好往学校服务器上部署,所以大家重新做了一套Online Judge,Web和Judge都是 ...

Notes: DOM Range

Notes: DOM Range的更多相关文章

随机推荐

热门专题