溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
html5 編輯API之Range對象 1：
Range對象代表頁面上的一段連續(xù)的區(qū)域：
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 + "段內(nèi)容<br/>";
for(var i=0; i<selection.rangeCount; i++){
var range = selection.getRangeAt(i);
html += "第" + (i+1) + "段內(nèi)容" + range + "<br/>";
}
showRangeDiv.innerHTML = html;
}
}
</script>
Selection對象和Range對象的使用(選取網(wǎng)頁上的文字，并顯示)
<input type="button" value="click" onclick="rangeTest()">
<div id="showRange"></div>
</body>
</html>SelectionNode，range對象的起點指定為某個節(jié)點的起點，range對象的終點指定為該節(jié)點的終點，使range對象包含該節(jié)點；
SelectionNodeContents , range對象的起點指定為某個節(jié)點中所有內(nèi)容的起點；range對象的終點指定為該節(jié)點中所有內(nèi)容的終點；
deleteContents方法 ：將range對象包含的內(nèi)容刪除
<!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){
//刪除節(jié)點的內(nèi)容
rangeObj.selectNodeContents(div);//選中的是節(jié)點中的內(nèi)容
rangeObj.deleteContents();
}else{
//刪除整個節(jié)點
rangeObj.selectNode(div);//選中的是整個節(jié)點
rangeObj.deleteContents();
}
}
</script>
<div id="div" >
元素中的內(nèi)容
</div>
<button onclick="deleteRangeContent(true)">刪除內(nèi)容</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" >
用來刪除的文字
</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>內(nèi)容</td>
<td>內(nèi)容</td>
</tr>
<tr>
<td>內(nèi)容</td>
<td>內(nèi)容</td>
</tr>
<tr>
<td>內(nèi)容</td>
<td>內(nèi)容</td>
</tr>
</table>
<button onclick="deleteRow()">刪除第一行</button>
</body>
</html>免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
