[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 ...
随机推荐
- SVN参考命令
SVN 命令参考(svn command reference) 用法: svn <subcommand> [options] [args]Subversion 命令行客户端,版本 1.6. ...
- [Unity Shader]ShaderForge制作Shader
什么是ShaderForge ShaderForge的目标是推动统一的视觉质量提升到了新的高度, 给你自由的材质创建在一个视觉和直观的方式——不需要代码! ShaderForge的特性 •实时着色器预 ...
- InnoDB的行溢出数据,Char的行结构存储
行溢出数据 InnoDB存储引擎可以将一条记录中的某些数据存储在真正的数据页面之外,即作为行溢出数据.一般认为BLOB.LOB这类的大对象列类型的存储会把数据存放在数据页面之外.但是,这个理解有点偏差 ...
- 25、手把手教你Extjs5（二十五）Extjs5常用组件--form的基本用法
Extjs Form是一个比较常用的控件,主要用来显示和编辑数据的,今天这篇文章将介绍Extjs Form控件的详细用法,包括创建Form.添加子项.加载和更新数据.验证等. Form和Form Ba ...
- NSDate常用代码范例
NSDate常用代码范例 NSDate类用于保存时间值,同时提供了一些方法来处理一些基于秒级别时差(Time Interval)运算和日期之间的早晚比较等. 1. 创建或初始化可用以下方法 用于创建N ...
- Memcached源码分析之memcached.c
memcached.c 由于代码太多,在此省略了部分代码,例如UPD连接,二进制协议,某些错误输出和调试输出等,建议从main函数开始看起. #include "memcached.h&qu ...
- Java链表的一些操作：
[还有一些其他的算法提]http://blog.csdn.net/WalkingInTheWind/article/category/906980 [转]http://blog.csdn.net/lu ...
- hdu 1005解题报告
这道题目n的取值范围很大,1 <= n <= 100,000,000.因此肯定是需要优化才能AC. 首先我考虑到时是有没有通项公式,研究了一下,没发现什么东西,突然看到两个1时就想到会不会 ...
- 利用 Grunt （几乎）无痛地做前端开发 (一)之单元测试
前言 如果你想开发一个js应用,甭管多简单,都要先创建整个宇宙 来看看我们的Javascript小宇宙: 确定如何根据需求.功能划分模块,如何将代码分成多个文件开发,合成一个发布 保证上一条的同时,使 ...
- plupload 异步上传插件使用心得
plupload 可以不依赖jquery,并且提供了 html5,flash,silverlight,html4 多种上传模式,使用起来比较简单,上一篇博客中介绍了其主要参数哈函数 一.简化用法 &l ...