HTML5--Range对象概念
2018-11-22 本文已影响0人
废废_siri
Range对象
一个Range对象代表页面上一段连续的区域。通过Range对象，可以获取或修改页面上的任何区域。
<html>
<head>
<meta charset="UTF-8">
<title>
range demo
</title>
<meta charset="UTF-8"></head>
</head>
<body>
<h3>Range与Selection对象的应用</h3>
<input type="submit" value="click me!" onclick="rangeTest()">
<div id="showRange"></div>
<script>
function rangeTest(){
var html;//定义一个html变量来承载div中的内容
showRange = document.getElementById("showRange");
Selection = document.getSelection();//获取selection对象
if(Selection.rangeCount>0){
//判断选取了selection选择了几块区域，firefox浏览器按ctrl键可选择2块区域；safari和chrome只能选择1块区域
html="您选择了"+Selection.rangeCount+"块区域的内容<br/>";
for(var i=0;i<Selection.rangeCount;i++)
{
var range = Selection.getRangeAt(i); //获取range对象
html+="第"+(i+1)+"段内容为："+range;
}
}
showRange.innerHTML = html;
}
</script>
</body>
</html>
Range方法之selectNode、selectNodeContents、deleteContents方法
选取一块区域
<html>
<head>
<meta charset="UTF-8">
<title>
selectNode、selectNodeContents、deleteContents demo
</title>
</head>
<body>
<div id="div" style="background-color: aqua;width: 200px;height: 200px;">删除内容或者元素</div>
<button onclick="deleteContents(true)">删除内容</button>
<button onclick="deleteContents(false)">删除元素</button>
<script>
function deleteContents(onlyContent){
var div = document.getElementById('div');
var rangeObj = document.createRange(); //创建range对象
if(onlyContent){
rangeObj.selectNodeContents(div); //选择div元素中的内容。selectNodeContents的选择是从元素中内容的开始到内容的结束
rangeObj.deleteContents(); //删除div中的内容
}else{
rangeObj.selectNode(div); //选择div元素。selectNode的选择是从元素的开始到元素的结束。注：这里选择的是整个元素及里面的内容
rangeObj.deleteContents(); //删除div元素及其内容
}
}
</script>
</body>
</html>
Range方法之setStart、setEnd方法
setStart表示某个节点的range对象的起点位置，
setEnd表示某个节点的range对象的终点位置
<html>
<head>
<meta charset="UTF-8">
<title>
setStart、setEnd demo
</title>
</head>
<body>
<div id="myDiv" style="color:brown;">
这是待删除的内容
</div>
<button onclick="deleteChar()">click me</button>
<script>
function deleteChar() {
var div = document.getElementById("myDiv");
var textNode = div.firstChild; //div.firstChild:返回div的文档的首个子节点
var rangeObj = document.createRange();
rangeObj.setStart(textNode, 1); //div的文档的首个子节点的第一个字段为起点
rangeObj.setEnd(textNode, 4); //div的文档的首个子节点的第四个字段为终点
rangeObj.deleteContents(); //删除选中的内容
}
</script>
</body>
</html>
Range方法之setStartBefore、setEndAfter、setStartAfter、setEndBefore
setStartBefore:表示用于将某个节点的起点位置设置为range对象的起点位置。
setStartAfter:表示用于将某个节点的终点位置设置为range对象的起点位置。
setEndBefore:表示用于将某个节点的起点位置设置为range对象的终点位置。
setEndAfter:表示用于将某个节点的终点位置设置为range对象的终点位置。
<html>
<head>
<meta charset="UTF-8">
<title>
setStartBefore、setEndAfter demo
</title>
</head>
<body>
<table id='myTable' border="1px" cellspacing='0' cellpadding='0'>
<thead>
<td>第一列</td>
<td>第二列</td>
</thead>
<tbody>
<td>1</td>
<td>2</td>
</tbody>
</table>
<button onclick="deleteRow()">click me</button>
<script>
function deleteRow(){
var table = document.getElementById("myTable");
if(table.rows.length>0){ //判断表格的行数是否大于0
row = table.rows[0]; //获取表格的第一行
var rangeObj = document.createRange();
rangeObj.setStartBefore(row);
rangeObj.setEndAfter(row);
rangeObj.deleteContents();
}
}
</script>
</body>
</html>
