html5 编辑API之range对象(一)
来源:互联网 发布:楚河汉街美食攻略 知乎 编辑:程序博客网 时间:2024/06/05 10:05
一:Range对象的概念
Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下:
var range = document.createRange();
在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象;
var selection = document.getSelection(); 或者
var selection = window.getSelection();
每一个 selection对象都有一个或者多个Range对象,每一个range对象代表用户鼠标所选取范围内的一段连续区域,在firefox中,可以通过 ctrl键可以选取多个连续的区域,因此在firefox中一个selection对象有多个range对象,在其他浏览器中,用户只能选取一段连续的区 域,因此只有一个range对象。可以通过selection对象的getRangeAt方法来获取selection对象的某个Range对象,如下:
var range = document.getSelection().getRangeAt(index);
getRangeAt方法有一个参数index,代表该Range对象的序列号;我们可以通过Selection对象的rangeCount参数的值判断用户是否选取了内容;
- 当用户没有按下鼠标时候,该参数的值为0.
- 当用户按下鼠标的时候,该参数值为1.
- 当用户使用鼠标同时按住ctrl键时选取了一个或者多个区域时候,该参数值代表用户选取区域的数量。
- 当用户取消区域的选取时,该属性值为1,代表页面上存在一个空的Range对象;
示例:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <script> function rangeTest(){ var html; var showRangeDiv = document.getElementById("showRange"); var selection = document.getSelection(); if(selection.rangeCount > 0) { html = "你选取了<" + selection.rangeCount + ">段内容"; 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="ok" onclick="rangeTest()"> <div id="showRange"></div></body></html>
二:Range对象的属性和方法
属性如下:
collapsed(boolean): 用于判断Range对象所代表的区域的开始点与结束点是否处于相同的位置,如果相同该属性值返回true;
commonAncestorContainer(node): 用于返回Range对象所代表的区域位于什么节点之中,该属性值为包含了该区域的最低层节点(一个节点可能是一个元素,也可能是一段完整文字)的节点。
endContainer(node): 用于返回Range对象所代表的区域的终点位于什么节点之中,该属性值为包含了该区域终点的最底层节点。
endOffset(整数值类型):用于返回Range对象所代表的区域的终点与包含该终点的节点的起点之间的距离。
startContainer(node): 用于返回Range对象所代表的区域的起点位于什么节点之中,该属性值为包含了该区域起点的最底层节点。
startOffset(整数值类型):用于返回Range对象所代表的区域的起点与包含该起点的节点的起点之间的距离。
下面还有很多方法,方法的含义比较难理解,我这边也是看到书上这么写的,顺便自己做了demo试了下,理解下其含义。以后需要使用到的可以看一下即可;
selectNode方法:Range对象的selectNode方法用于将Range对象的起点指定为某个节点的起点,将Range对象的终点指定为该节点的终点,使Range对象所代表的区域中包含该节点。使用方法如下:
rangeObj.selectNode(node);
上面的rangeObj代表一个Range对象,该方法使用一个参数,代表页面中的一个节点。
selectNodeContents方法:用于将Range对象的起点指定为某个节点中的所有内容的起点,将Range对象的终点指定为该节点所有内容的终点,使Range对象所代表的区域中包含该节点的所有内容。使用方法如下:
rangeObj.selectNodeContents(node);
含义如上所示;
deleteContents方法:用于将Range对象中所包含的内容从页面中删除,使用方法如下所示:
rangeObj.deleteContents();
示例:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><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:cornflowerblue;width:300px;height:100px;"> 元素中的内容 </div> <button onclick="deleteRangeContent(true)">删除内容</button> <button onclick="deleteRangeContent(false)">删除元素</button></body></html>
setStart方法 用于将某个节点中的某处位置指定为Range对象所代表区域的起点位置,使用方法如下:
rangeObj.setStart(node,curIndex);
rangeObj代表一个Range对象,该setStart方法使用2个参数,第一个参数node代表一个节点,第二个参数是一个数字,当第一个参数 node所代表的节点是一个内容为一段文字的文字节点时,该参数值用于指定将第几个文字的结束位置作为Range对象所代表的区域的起点位置;当第一个参 数node所代表的节点中包括其他子节点时,该参数值用于将第几个子节点的结束位置指定为Range对象所代表的区域的起点位置;
setEnd方法 用于将某个节点中的某处位置指定Range对象所代表区域的结束位置。使用方法如下所示:
rangeObj.setEnd(node,curIndex);
该方法中的2个参数的含义如setStart方法中参数的含义相同;只不过一个是起点位置,另一个是结束位置;
示例:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><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></html>
setStartBefore方法:用于将某个节点的起点位置指定为Range对象所代表区域的起点位置。
setStartAfter方法: 用于将某个节点的终点位置指定为Range对象所代表区域的起点位置。
setEndBefore方法: 用于将某个节点的起点位置指定为Range对象所代表区域的终点位置。
setEndAfter方法: 用于将某个节点的终点位置指定为Range对象所代表区域的终点位置。
使用方法如下所示:
rangeObj.setStartBefore(node);
rangeObj.setStartAfter(node);
rangeObj.setEndBefore(node);
rangeObj.setEndAfter(node);
示例:<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <script> function deleteFirstRow(){ var myTable = document.getElementById("myTable"); if(myTable.rows.length > 0){ var row = myTable.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>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> <button onclick="deleteFirstRow()">删除第一行</button></body></html>
- HTML5 编辑 API 之 Range 对象(一)
- html5 编辑API之range对象(一)
- HTML5 页面编辑API之Range对象
- HTML5 编辑 API 之 Range 对象
- html5 编辑API之range对象(二)
- HTML5学习笔记8-编辑API之Range对象(一)
- HTML5 页面编辑API之Range对象二
- HTML5学习笔记9-编辑API之Range对象(二)
- WEB前端之HTML5[6]~HTML5编辑API之Range对象
- h5编辑API之Range对象
- h5编辑API-Range对象
- HTML5之Range对象
- html5之Range对象详解
- HTML5之File API(一)
- HTML5之File API(一)
- HTML5——Range对象(1)
- HTML5——Range对象(2)
- html5 Selection,Range对象
- Type Encodings-runtime
- Intent
- 区块链开发(五)git、truffle安装
- UVA 1108 Mining Your Own Business(双联通分量)
- 【Java笔试题】顺时针打印矩阵
- html5 编辑API之range对象(一)
- 推荐系统面临的问题
- 通过java反射让JVM自动的创建动态代理类
- springmvc自定义类型转换器【字符串--->POJO类】
- 第三次这玩意会动了有没有
- 专题 计算几何学 凸包 hdu1392Surround the Trees
- 翻译《有关编程、重构及其他的终极问题?》——2.比0大的并不意味着就只是1
- 几种弹出对话框方式
- Fragment