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

HTML5——Range对象（1）

2016-05-04 09:41 302 查看




1、Range对象

（1）selectNode、SelectNodeContents、deleteContents方法

setStart、setEND、setStartBefore、setStartAfter、setEndBefore、setENDAfter方法

（2）基本概念：一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>range对象</title>
<script src="util.js"></script>
</head>
<body>
Selection对象与Rage对象的使用
<input type="button" value="点击我" onclick="rangeTest()">
<div id="showRange"></div>
</body>
</html>

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;
}
}


（3）selectNodeContents(div):

选取div中内容，以内容的开头和结尾为起点和终点的区域。

selectNode(div):

选取div这个节点，以div标签的开始标签为起点，终止标签为终点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>range2</title>
<script src="util.js"></script>
</head>
<body>
<div id="div" style="background-color:#e0a0b0;width:300px;height:50px">
元素中的内容
</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>
</body>
</html>

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();
}
}


（4）setStart与setEnd

setStart指定range对象中某一点为起点，

setEnd指定range对象中某一点为终点。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>range3</title>
<script src="util.js"></script>
</head>
<body>
<div id="myDiv" style="color:red">这段文字是用来删除的</div>
<button onclick="deleteChar()">删除文字</button>
</body>
</html>

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();
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航