[html5] 学习笔记- 编辑API之Range对象（二）
本节继续介绍range对象的方法，包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment,insertNode,compareBoundaryPoints,collapse,detach方法。
1、cloneRange,cloneContents,extraContents方法
cloneRange：对当前的range对象复制，返回复制的对象
<body>
<script>
function cloneRange(){
var rangeObj = document.createRange();
rangeObj.selectNodeContents(document.getElementById("p"));
var rangeClone = rangeObj.cloneRange();
alert(rangeClone.toString());
}
</script>
<p id="p">这里是随便书写的内容</p>
<button onclick="cloneRange()">克隆</button>
</body>
cloneContents：用于克隆并追加Html代码
<body>
<script>
function cloneContent(){
var div = document.getElementById("div");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(div);
var docFrangeMent = rangeObj.cloneContents();
div.appendChild(docFrangeMent);
}
</script>
<div id="div">
你好吗？
<br/>
<button onclick="cloneContent()">克隆</button>
<br/>
</div>
</body>
extraContents：将range对象的内容剪切到另一个对象中
<body>
<script>
function moveContent(){
var srcDiv = document.getElementById("srcDiv");
var distDiv = document.getElementById("distDiv");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(srcDiv);
var docFragment = rangeObj.extractContents();
distDiv.appendChild(docFragment);
}
</script>
<div id="srcDiv" style="background-color:aquamarine;width: 300px;height: 50px">你好吗</div>
<div id="distDiv" style="background-color:bisque;width: 300px;height: 50px"></div>
<button onclick="moveContent()">移动元素</button>
</body>
2、insertNode,compareBoundaryPoints方法
insertNode：将节点插入到range对象中
<body>
<script>
function moveButton() {
var btn = document.getElementById("button");
var selection = document.getSelection();
if (selection.rangeCount>0) {
var range = selection.getRangeAt(0);
range.insertNode(btn);
}
}
</script>
<div onmouseup="moveButton()" style="background-color: bisque;width: 400px">
这里是我随便书写的一些文字这里是我随便书写的一些文字这里是我随便书写的一些文字这里是我随便书写的一些文字
</div>
<button id="button">按钮</button>
</body>
compareBoundaryPoints：用于比较两个range对象的起点或终点位置
<body>
<script>
function testPlace() {
var boldText = document.getElementById("boldTest");
var boldRange = document.createRange();
boldRange.selectNodeContents(boldText.firstChild);
var selection = document.getSelection();
if (selection.rangeCount>0) {
var selRange = selection.getRangeAt(0);
if (selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0) {
alert("选取的文字在粗体前面");
}else{
if (selRange.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0) {
alert("选取的文字在粗体后面");
}
}
}
}
</script>
这是一段文字，我也不<b id="boldTest">知道</b>写什么，随便吧
<br/>
<button onclick="testPlace()">位置比较</button>
</body>
3、collapse、detach方法
collapse：将range对象所代表区域的终点移动到起点处，或者反过来
<body>
<script>
var rangeObj = document.createRange();
function selectRangeContents(){
var div = document.getElementById("div");
rangeObj.selectNode(div);
}
function unselect(){
rangeObj.collapse(false);
}
function showRange(){
alert(rangeObj.toString());
}
</script>
<div id="div" style="background-color: bisque;width: 400px;height: 50px;">
元素中的内容
</div>
<button onclick="selectRangeContents()">选择内容</button>
<button onclick="unselect()">取消内容</button>
<button onclick="showRange()">显示内容</button>
</body>
detach:用于释放对象，释放之后，将不能再次访问该对象；通常应该释放掉不需要的range对象，以提高程序的性能。
[html5] 学习笔记- 编辑API之Range对象（二）的更多相关文章
- [html5] 学习笔记-编辑 API 之 Range 对象（一）
1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> & ...
- HTML5 页面编辑API之Range对象
在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对 ...
- HTML5编辑API之Range对象
Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = document.createRa ...
- HTML5 编辑 API 之 Range 对象（一）
一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE h ...
- HTML5 编辑 API 之 Range 对象（二）
1.Range.cloneContents()The Range.cloneContents() returns a DocumentFragment copying the objects of t ...
- python cookbook第三版学习笔记十一：类和对象(二)调用父类的方法
在子类中调用父类的方法,可以下面的A.spam(self)的方法. class A(object): def spam(self): print 'A.spam' class ...
- Java学习笔记之---API的应用
Java学习笔记之---API的应用 (一)Object类 java.lang.Object 类 Object 是类层次结构的根类.每个类都使用 Object 作为超类.所有对象(包括数组)都实现这个 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- 学习笔记：Javascript 变量 包装对象
学习笔记:Javascript 变量 包装对象 如下代码,可以输出字符的长度. var str = "Tony"; str.length; 这时再试试以下代码,返回是 undefi ...
随机推荐
- Hibernate---第一个helloworld程序 (XML版本, annotation版本)
Hibernate作为JPA的一种实现,jpa的注解已经是hibernate的核心,hibernate只提供了一些补充,而不是两套注解.hibernate对jpa的支持够足量,在使用hibernate ...
- php中__clone() shallow copy 只是浅复制
什么是浅复制呢? 简单一点,就是说复制一个对象的时候,如果对象$Obj的一个属性的类型是引用类型的,比如 $person这个属性,指向的是一个 叫做 $objPerson的一个引用, 那么复制$Obj ...
- Quick Cocos2dx Http通讯
服务端:Python 通讯协议:Http 参考文章: 1 用python实现一个基本的http server服务器 http://blog.sina.com.cn/s/blog_416e3063010 ...
- kafka 集群部署 多机多broker模式
kafka 集群部署 多机多broker模式 环境IP : 172.16.1.35 zookeeper kafka 172.16.1.36 zookeeper kafka 172.16 ...
- Mysql 常用引擎的特点及选择使用策略
Mysql 常用引擎的特点及选择使用策略 Mysql数据库常用存储引擎 Mysql数据库是一款开源的数据库,支持多种存储引擎的选择,比如目前最常用的存储引擎有:MyISAM,InnoDB,Memory ...
- displayport
去年买了一张ATI的显卡,但是很坑爹的是显卡后面没有VGA接口,除了一个HDMI,另外两个接口不认识,后来认识了DVI,用DVI连接显示器,剩下一个接口是什么一直没管,前两天电脑清灰,感兴趣了,去查了 ...
- RFID射频卡超市购物结算系统问题记录--写入卡片时，后台php无法操作数据库
后台管理人员要给每件商品贴上RF卡作为唯一标识,所以要先给对应的RFID卡中写入响应的信息,我这里为了便于模拟演示只写入商品编号,价格,名称这几个字段,然后要把已经写入的商品上传后台,由后台写入数据库 ...
- MySql5.6设置慢查询
---恢复内容开始--- 在my.cnf中 mysqld节点下 #开启慢查询 slow_query_log = ON #设置超时时间 slow_launch_time = 2 #记录日志 slow_q ...
- IOS开发－UI学习－UIFont，字体设置及批量创建控件
在IOS 中,使用[UIFont familyNames]这个方法获取72种系统字体. 使用[UIFont fontWithName:@"Zapfino" size:18]这个方法 ...
- C++类的存储（部分可用与c的结构体）
c++中最重要的就是类,那么给你一个类的对象,你知道它在内存中如何存储的吗?它占内存中多少个字节? 首先确定类的构成: 1,数据成员:可以是内置类型,类类型. 2,函数成员:虚函数,非虚函数 1)数据 ...