基本概念
Range对象代表页面上的一段连续的区域。通过Range对象，可以获取或修改网页上的任何区域。
Selection与Range对象的使用
<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="点击" onclick="rangeTest()">
<div id="showRange"></div>
</body>selectNodeContents和selectNode
<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: blueviolet;width: 300px;height: 50px">
这里是div元素的内容
</div>
<button onclick="deleteRangeContent(true)">删除内容</button>
<button onclick="deleteRangeContent(false)">删除元素</button>
</body>