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