基本概念
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>