HTML5 編輯 API 之 Range 對象
Range對象基本概念
Range對象基本概率
一個Range對象代表頁面上一段連續區域。
通過Range對象，可以獲取或修改網頁上的任何區域。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>range對象</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="點擊我" onclick="rangeTest()" />
<div id="showRange"></div>
</body>
</html>Range方法之SelectNode方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>range selectNode方法</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" style="background-color: #e0a0b0;width: 300px;height: 50px;">
元素中的內容
</div>
<button onclick="deleteRangeContent(true)">刪除內容</button>
<button onclick="deleteRangeContent(false)">刪除元素</button>
</body>
</html>
選擇刪除內容這會刪除掉“元素中的內容”這幾個字
選擇刪除元素就會刪除掉整個紅色的地板和文字。
setStart、setEnd方法
通過setStart和setEnd來確定Range對象的內容。再將其進行刪除等操作。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>range setStart、setEnd</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" style="color: red;">
這段字是用來刪除的
</div>
<button onclick="deleteChar()">刪除文字</button>
</body>
</html>
點擊“刪除文字”之後，“這段字”就會被刪除掉。
setStartBefore、setEndAfter等方法
setStartBefore（row）Range對象在row之前開始，
setEndAfter（row）Range對象在row之後結束。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>setStartBefore\setEndAfter</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" cellspacing="0" cellpadding="0">
<tr>
<td>內容1</td>
<td>內容2</td>
</tr>
<tr>
<td>內容3</td>
<td>內容4</td>
</tr>
</table>
<button onclick="deleteRow()">刪除第一行</button>
</body>
</html>
點擊“刪除第一行”之後，第一行的內容1和內容2 被刪除掉。
cloneRange、cloneContents、extractContents方法
cloneRange方法
通過cloneRange（）方法，把原有的p標籤中的內容Range對象克隆過來，並通過alert（）把克隆對象顯示出來。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cloneRange</title>
</head>
<body>
<script>
function cloneRange(){
var rangeObj = document.createRange();
rangeObj.selectNodeContents(document.getElementById("p"));
var rangeClone = rangeObj.cloneRange();
alert(rangeClone.toString());
}
</script>
<p id="p">這是測試內容</p>
<button onclick="cloneRange()">克隆</button>
</body>
</html>
cloneContents方法介紹
var docFrangMent = rangeObj.cloneContents()將原Range對象的所有內容拷貝出來，再通過div.appendChild(docFrangMent);將拷貝的內容添加到div模塊中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>cloneContents</title>
</head>
<body>
<script>
function cloneContent(){
var div = document.getElementById("div");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(div);
var docFrangMent = rangeObj.cloneContents();
div.appendChild(docFrangMent);
}
</script>
<div id="div">
你好麼？
<br />
<button onclick="cloneContent()">克隆</button>
<br />
</div>
</body>
</html>
點擊“克隆”之後，會將div中的內容複製一份。並且div中的內容得到了改變。
extractContents方法
通過var docFragment = rangeObj.extractContents() 實現內容的剪切。通過distDiv.appendChild(docFragment)實現內容的粘貼。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>extractContents方法</title>
</head>
<body>
<script>
function moveContent(){
var srcDiv = document.getElementById("srcDiv");
var distDiv = document.getElementById("distDiv");
var rangeObj = document.createRange();
rangeObj.selectNodeContents(srcDiv); //range代表srcDiv的內容
var docFragment = rangeObj.extractContents(); //range像是指針對象，會修改原變量
distDiv.appendChild(docFragment);
}
</script>
<div id="srcDiv" style="background-color: aqua;width: 300px;height: 50px;">測試內容</div>
<div id="distDiv" style="background-color:bbisque;width: 300px;height: 50px;"></div>
<button onclick="moveContent()">移動元素</button>
</body>
</html>
點擊“移動元素”之後，“測試內容”四個字從藍底模塊移動到了白底模塊。
insertNode方法、compareBoundaryPoints方法
insertNode方法
通過點擊，隨意移動按鈕
var range = selection.getRangeAt(0)找到位置？
range.insertNode(btn)插入按鍵
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>insertNode</title>
</head>
<body>
<script>
function moveButton(){
var btn = document.getElementById("button");
var selection = document.getSelection();
// get到的這個selection指的是什麼，鼠標選擇到的內容？
if(selection.rangeCount>0){
// 選擇內容不爲空
var range = selection.getRangeAt(0); //傳0 是什麼意思？
range.insertNode(btn); //指定插入內容爲btn
}
}
</script>
<div onmouseup="moveButton()" style="width: 400px;background-color: bisque;">
這是測試的內容，只是測試而已。
</div>
<!--onmouseup 事件會在鼠標鬆開時發生-->
<button id="button">按鈕</button>
</body>
</html>
點哪兒，按鍵就會移動到哪兒。
compareBoundaryPoints方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>compareBoundaryPoints</title>
</head>
<body>
<script>
function testPlace(){
var boldText = document.getElementById("boldText");
var boldRange = document.createRange();
boldRange.selectNodeContents(boldText.firstChild);
// 這個range對象代表的是boldText.的firstChild
var selection = document.getSelection();
if(selection.getRangeCount>0){
var selRange = selection.getRangeAt(0); //第一個選擇對象
if(selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0){
alert("選取的文字在粗體前面");
}else if(selRang.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0){
alert("選取的文字在粗體後面");
}
}
}
</script>
這是一段文字，一段用來<b id="boldText">測試</b>的文字。
<br />
<button onclick="testPlace() ">位置比較 </button>
</body>
</html>
collapse、detach方法
rangeObj.collapse(false)顯示取消選中的內容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>collapse</title>
</head>
<body>
<script>
var rangeObj = document.createRange();
function selectRangContents(){
var div = document.getElementById("div");
rangeObj.selectNode(div);
}
function nuselect(){
rangeObj.collapse(false);
}
function showRange(){
alert(rangeObj.toString());
}
</script>
<div id="div" style="background-color:bisque;width: 300px;height: 50px;">元素的內容</div>
<button onclick="selectRangContents()">選擇元素</button>
<button onclick="nuselect()">取消元素</button>
<button onclick="showRange()">顯示range內容</button>
</body>
</html>
點擊“選擇元素”-“顯示range內容”則顯示如上。
點擊“選擇元素”-“取消選擇”-“顯示range內容”則顯示如下。
本博客內容到此結束，歡迎交流討論！