Range对象基本用法
效果图如下（在谷歌浏览器下的展示）
代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function test()
{
var html="";
var showRange=document.getElementById("test");
selection=document.getSelection();
if (selection.rangeCount <= 0) {
} else {
for (var i = 0; i < selection.rangeCount; i++) {
var range = selection.getRangeAt(i);
html+="您选取的内容为["+range+"]</br>";
}
showRange.innerHTML=html;
}
}
</script>
<p>为中国奥运健儿加油</p>
<input type="button" onclick="test()" value="点击"/>
<div id="test"></div>
</body>
</html>
在火狐浏览器下的展示
为什么会出现这种情况呢，因为火狐浏览器下可以针对不连续的内容多选.
Range对象之SelectNode和selectNodeContents方法
效果图如下
代码内容如下:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function deleteRangeContent(statusContent)
{
var div=document.getElementById("range");
var rangeObject=document.createRange();
if(statusContent)
{
rangeObject.(div);
rangeObject.deleteContents();
}
else
{
rangeObject.selectNode(div);
rangeObject.deleteContents();
}
}
</script>
<div style="width:300px;height: 30px;background-color: #ec7dff" id="range">查看效果</div>
<input type="button" onclick="deleteRangeContent(true)" value="删除div内部内容"/>
<input type="button" onclick="deleteRangeContent(false)" value="删除div及内部内容"/>
</body>
</html>
selectNodeContents是选定div里边的内容，selectNode是选定div包括里边的内容.
Range对象之setStart和setEnd方法
效果图如下
代码内容如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
function deleteFromEnd()
{
var textNode=document.getElementById("test").firstChild;
var rangeObject=document.createRange();
rangeObject.setStart(textNode,1);
rangeObject.setEnd(textNode,4);
rangeObject.deleteContents();
}
</script>
<div id="test">中国奥运军团是所向披靡的战无不胜的</div>
<button onclick="deleteFromEnd()">删除</button>
</body>
</html>
我们误以为是会删除”中国奥运”四个字，但是实际上删除的只有“国奥运”.
Range对象之setStartBefore和setEndAfter方法
效果图如下
代码如下
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
table,tr,td
{
border:1px solid;
}
</style>
</head>
<body>
<script>
function deleteContent()
{
var tableElement=document.getElementById("tb");
if(tableElement.rows.length>0)
{
var range=document.createRange();
var row=tableElement.rows[0];
range.setStartBefore(row);
range.setEndAfter(row);
range.deleteContents();
}
}
</script>
<table id="tb" style="border:1px solid;">
<tr>
<td>第一行第一列</td>
<td>第一行第二列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
</tr>
</table>
<button onclick="deleteContent()">删除table行</button>
</body>
</html>
该实例中定义了table的开始位置和结束位置来删除.