标签：html
html5 编辑API之Range对象 1：
Range对象代表页面上的一段连续的区域：
Selection对象和Range对象
<!DOCTYPE html>
<html>
<head lang="en">
<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="click" onclick="rangeTest()">
<div id="showRange"></div>
</body>
</html>SelectionNode，range对象的起点指定为某个节点的起点，range对象的终点指定为该节点的终点，使range对象包含该节点；
SelectionNodeContents , range对象的起点指定为某个节点中所有内容的起点；range对象的终点指定为该节点中所有内容的终点；
deleteContents方法 ：将range对象包含的内容删除
<!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: aqua; width: 300px; height: 50px">
元素中的内容
</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>
</body>
</html>setStart, 指定range对象的起点
setEnd， 。。。。。终点。
等方法：
<!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: crimson">
用来删除的文字
</div>
<button onclick="deleteChar()">删除文字</button>
</body>
</html>其他方法：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<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‘ cellpadding="0">
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
<tr>
<td>内容</td>
<td>内容</td>
</tr>
</table>
<button onclick="deleteRow()">删除第一行</button>
</body>
</html>本文出自 “thystar” 博客，请务必保留此出处http://4440271.blog.51cto.com/4430271/1684074
标签：html
原文地址：http://4440271.blog.51cto.com/4430271/1684074
