您的位置：首页 > Web前端 > HTML5

html5 编辑API之range对象（一）

2016-11-13 10:19 387 查看

一：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键时选取了一个或者多个区域时候，该参数值代表用
f81c
户选取区域的数量。

当用户取消区域的选取时，该属性值为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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航