HTML5编辑API之Range对象
1.range对象基本概念
一个range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。
range对象方法
selectNode
将range对象的起点指定为某个节点的起点，将range对象额重点指定为该节点的终点。
使range对象所代表的区域中包含该节点。该节点并不将该节点设置为高亮选取状态。
selectNodeContens
将range对象的起点指定为某个对象的所有内容的起点，将range对象的终点指定为该节点内容的终点。使range对象所包含的区域中包含该节点的所有内容。
deleteContents
用于将range对象所包含的内容从页面当中删除。
<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="width: 300px;height: 50px;">
元素中的内容
</div>
<!--删除的是内容-->
<button onclick="deleteRangeContent(true);">删除内容</button>
<!--删除的是整个元素-->
<button onclick="deleteRangeContent(false);">删除元素</button>
</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>
<h2>selection对象与range对象的使用</h2>
<input type="button" value="点击我" onclick="rangeTest()">
<div id="showRange"></div>
<!--在谷歌浏览器中，只能选取一段内容，在火狐浏览器中，可以选取多段内容-->
谷歌浏览器测试
火狐浏览器测试
range对象的方法
setStart
用于将某个节点中的某处位置指定为range对象所代表区域的起点位置
setEnd
用于将某个节点中的某处位置指定为range对象所代表区域的结束位置
<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>
setStartBefore
用于将某个节点的起点位置设定为range对象所代表区域的起点位置
setStartAfter
用于将某个节点的终点位置设定为range对象所代表区域的起点位置
setEndBefore
用于将某个节点的起点位置设为当前range对象所代表区域的终点位置
setEndAfter
用于将某个节点的终点位置设置为当前range对象所代表区域的终点位置
<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>
range对象的方法（二）
cloneRange()
用于当前range对象的复制，该方法返回当前range的对象
<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>
cloneContents()
用于在页面上追加一段代码，并且把rang对象里的代码追加带range对象之后
<body>
<script>
function cloneContent(){
var div=document.getElementById("div");
var rangeObj=document.createRange();
rangeObj.selectNodeContents(div);
var docFranMent=rangeObj.cloneContents();
div.appendChild(docFranMent);
}
</script>
<div id="div">
你好吗？
<br/>
<button onclick="cloneContent()">克隆</button>
<br/>
</div>
</body>
extractContents()
英文意思：选取，获取，提取的意思
range对象所代表区域中的html代码克隆到documnetFrankment对象中
<body>
<script>
function moveContent(){
var srcDiv=document.getElementById("srcDiv");
var distDiv=document.getElementById("distDiv");
var rangeObj=document.createRange();
//获取第一个div中的内容
rangeObj.selectNodeContents(srcDiv);
//提取出rangeObj里面的内容
var docFragment=rangeObj.extractContents();
distDiv.appendChild(docFragment);
}
</script>
<div id="srcDiv" style="color: #fff;width: 300px;height: 50px;">你好吗</div>
<div id="distDiv" style="color: #fff;width: 300px;height: 50px;"></div>
<button onclick="moveContent()">移动元素</button>
</body>
insertNode()
用于指定节点插入到某range对象所代表的区域当中，插入位置为range对象所代表的起点位置，
如果该点已经存在了页面当中，那该节点被移动到range对象所代表的起点处。
<body>
<script>
function moveButton(){
var btn=document.getElementById("button");
var selection=document.getSelection();
if(selection.rangeCount>0){
var range=selection.getRangeAt(0);
range.insertNode(btn);
}
}
</script>
<div onmouseup="moveButton()" style="width: 400px;">
测试测试测试测试测试测试测试测试测试测试测试测试测试
</div>
<button id="button">按钮</button>
</body>
compareBoundaryPoints()
英文意思：比较的边界点
用于比较两个range对象的起点位置或终点位置，比较的结果是一个在谁前面，一个在谁后面
<body>
<script>
function testPlace(){
var boldText=document.getElementById("boldTest");
var boldRange=document.createRange();
boldRange.selectNodeContents(boldText.firstChild);
var selection=document.getSelection();
if(selection.rangeCount>0){
var selRange=selection.getRangeAt(0);
if(selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0){
alert("选取的文字在粗体前面");
}else{
if(selRange.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0){
alert("选择的文字在粗体后面");
}
}
}
}
</script>
这是一段文字，我也不<b id="boldTest">知道</b>要写什么，随便吧。
<br/>
<button onclick="testPlace()">位置比较</button>
</body>
collapse()
英文意思：崩溃，倒塌，折叠，垮台
用于range对象所代表的区域的终点移动到该区域的起点处，或将range所代表区域的起点移动到该区域的终点处。
<body>
<script>
var rangeObj=document.createRange();
function selectRangeConents(){
var div=document.getElementById("div");
rangeObj.selectNode(div);
}
function unselect(){
rangeObj.collapse(false);
}
function showRange(){
alert(rangeObj.toString());
}
</script>
<div id="div" style="width: 300px;height: 50px;">元素</div>
<button onclick="selectRangeConents()">选择元素</button>
<button onclick="unselect()">取消元素</button>
<button onclick="showRange()">显示Range内容</button>
</body>
detach()
英文意思：拆开分开，派遣的意思
用于浏览器中释放range对象，释放之后将不能再次访问range对象，否则将出现脚本错误
通常在不要的时候我们要释放没有必要使用的range对象，提高应用程序在运行时候的性能。
rangeObj.detach();
