[html5] 学习笔记-编辑 API 之 Range 对象(一)
1、Range对象的基本概念
一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> function rangeTest(){ var html; showRangeDiv = document.getElementById("showRange"); selection = document.getSelection(); if(selection.rangeCount>0){ html = "你选取了>"+selection.rangeCount+"<内容<br>"; for (var i = 0; i < selection.rangeCount; i++) { var range = selection.getRangeAt(i); html+="第"+(i+1)+"段内容为:"+range+"<br>"; } showRangeDiv.innerHTML = html; } } </script> Selection对象与Range对象的使用 <input type="button" value="点击我" onclick="rangeTest()"></input> <div id="showRange"></div> </body> </html>
2、Range对象的SelectNode方法,SelectNodeContents方法,deleteContents方法
SelectNode方法用于将Range对象的起点,指定为某个节点的起点,将Range的终点,指定为该节点的终点,使Range对象的区域包含该节点。
SelectNodeContents方法用于将Range对象的起点,指定为某个节点所有内容的起点,将Range对象的终点,指定为某个节点所有内容的终点,使Range对象的区域包含该节点的所有内容。
deleteContents方法,用于将Range对象所包含的内容,从页面中进行删除。
<body> <script> function deleteRangeContent(onlyContent){ var div = document.getElementById("div"); var rangeObj = document.createRange(); if(onlyContent){ rangeObj.selectNodeContents(div); rangeObj.deleteContents(); }else{ rangeObj.selectNode(div); rangeObj.deleteContents(); } } </script> <div id="div" style="background-color:#e0a0b0;width=300px;height=50px"> 元素中的内容 </div> <button onclick="deleteRangeContent(true)">删除内容</button> <button onclick="deleteRangeContent(false)">删除元素</button> </body>
3、Range对象有很多用来操作页面内容的方法,有setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter方法
setStart用来将某个节点的某个位置,设置为Range对象的起点位置
setEnd用来将某个节点的某个位置,设置为Range对象的结束位置
<body> <script> function deleteChar(){ var div = document.getElementById("myDiv"); var textNode = div.firstChild; var rangeObj = document.createRange(); rangeObj.setStart(textNode,1); rangeObj.setEnd(textNode,4); rangeObj.deleteContents(); } </script> <div id="myDiv" style="color:red">这段文字是用来删除的</div> <button onclick="deleteChar()">删除文字</button> </body>
setStartBefore用于将某个节点的起点位置,设置为Range对象所代表区域的起点位置
setStartAfter用于将某个节点的终点位置,设置为Range对象所代表区域的起点位置
setEndBefore用于将某个节点的起点位置,设置为Range对象所代表区域的终点位置
setEndAfter用于将某个节点的终点位置,设置为Range对象所代表区域的终点位置
<body> <script> function deleteRow(){ var table = document.getElementById("myTable"); if (table.rows.length>0) { var row = table.rows[0]; var rangeObj = document.createRange(); rangeObj.setStartBefore(row); rangeObj.setEndAfter(row); rangeObj.deleteContents(); }; } </script> <table id="myTable" border="1" cellspacing="0" cellpadding="0"> <tr> <td>内容1</td> <td>内容2</td> </tr> <tr> <td>内容3</td> <td>内容4</td> </tr> </table> <button onclick="deleteRow()">删除第一行</button> </body>
[html5] 学习笔记-编辑 API 之 Range 对象(一)的更多相关文章
- [html5] 学习笔记- 编辑API之Range对象(二)
本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment ...
- 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 ...
- 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 ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Tasks and Back stack 详解
原文地址:http://developer.android.com/guide/components/tasks-and-back-stack.html 一个应用往往包含很多activities.每个 ...
- 17.4.3 使用MulticastSocket实现多点广播(3)
上面程序中init()方法里的第一行粗体字代码先创建了一个MulticastSocket对象,由于需要使用该对象接收数据报,所以为该Socket对象设置使用固定端口:第二行粗体字代码将该Socket对 ...
- Linux内核源代码目录树结构
Linux内核源代码目录树结构. arch:包含和硬件体系结构相关的代码,每种平台占一个相应的目录.和32位PC相关的代码存放在i386目录下,其中比较重要的包括kernel(内核核心部分).mm(内 ...
- [Unity Asset]AssetBundle系列——游戏资源打包
转载:http://www.cnblogs.com/sifenkesi/p/3557231.html 将本地资源打包,然后放到资源服务器上供游戏客户端下载或更新.服务器上包含以下资源列表:(1)游戏内 ...
- 5、手把手教你Extjs5(五)使用图标字体来美化按钮)
sencha 的例子中,有使用图标字体来美化按钮的例子,这个用起来又方便风格又统一,例如下图: 上面图标字体的使用方法也很简单,只要下载Font Awesome的css和图标文件,放到项目里就可以了. ...
- matlab取模与取余
mod函数采用floor,rem函数采用fix函数.那么什么是floor和fix? fix(x):截尾取整.如: >> fix([3.4 , -3.4]) ans = 3 -3 floor ...
- UVa 11129 - An antiarithmetic permutation
题目大意:给一个正整数n,构造一个0...n-1的排列,使得这个排列的任何一个长度大于2的子序列都不为等差数列. 把序列按照奇偶位置分成两个序列,这样在两个序列间就不会形成等差数列了,然后再对这两个序 ...
- 英文版Ubuntu安装配置搜狗拼音输入法
下载搜狗输入法 1 进入搜狗输入法官网,进入上面导航兰的 "输入法Linux版" 2 根据你安装的ubuntu是32位还是64位下载 END ubuntu安装搜狗输入法 1 进 ...
- html5、css3及响应式设计入门
一.响应式设计的定义 将三种已有的开发技巧(弹性网格布局.弹性图片.媒体和媒体查询)整合起来,命名为响应式网页设计.真正的响应式设计方法不仅仅只是根据视口大小改变网页布局.相反,它是要从整体上颠覆我们 ...
- nmon在线安装及使用
安装 mkdir /usr/local/nmon cd /usr/local/nmon wget http://sourceforge.net/projects/nmon/files/nmon_lin ...