html5 编辑API之Range对象 1：

Range对象代表页面上的一段连续的区域：

Selection对象和Range对象

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><script>functionrangeTest(){varhtml;showRangeDiv=document.getElementById("showRange");selection=document.getSelection();if(selection.rangeCount>0){html="选取"+selection.rangeCount+"段内容<br/>";for(vari=0;i<selection.rangeCount;i++){varrange=selection.getRangeAt(i);html+="第"+(i+1)+"段内容"+range+"<br/>";}showRangeDiv.innerHTML=html;}}</script>Selection对象和Range对象的使用(选取网页上的文字，并显示)<inputtype="button"value="click"onclick="rangeTest()"><divid="showRange"></div></body></html>


SelectionNode，range对象的起点指定为某个节点的起点，range对象的终点指定为该节点的终点，使range对象包含该节点；

SelectionNodeContents , range对象的起点指定为某个节点中所有内容的起点；range对象的终点指定为该节点中所有内容的终点；

deleteContents方法 ：将range对象包含的内容删除

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><script>functiondeleteRangeContent(onlyContent){vardiv=document.getElementById("div");varrangeObj=document.createRange();if(onlyContent){//删除节点的内容rangeObj.selectNodeContents(div);//选中的是节点中的内容rangeObj.deleteContents();}else{//删除整个节点rangeObj.selectNode(div);//选中的是整个节点rangeObj.deleteContents();}}</script><divid="div">元素中的内容</div><buttononclick="deleteRangeContent(true)">删除内容</button><buttononclick="deleteRangeContent(false)">删除元素</button></body></html>


setStart, 指定range对象的起点

setEnd， 。。。。。终点。

等方法：

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><script>functiondeleteChar(){vardiv=document.getElementById("myDiv");vartextNode=div.firstChild;varrangeObj=document.createRange();rangeObj.setStart(textNode,1);rangeObj.setEnd(textNode,4);rangeObj.deleteContents();}</script><divid="myDiv">用来删除的文字</div><buttononclick="deleteChar()">删除文字</button></body></html>


其他方法：

<!DOCTYPEhtml><html><headlang="en"><metacharset="UTF-8"><title></title></head><body><script>functiondeleteRow(){vartable=document.getElementById("myTable");if(table.rows.length>0){varrow=table.rows[0];varrangeObj=document.createRange();rangeObj.setStartBefore(row);rangeObj.setEndAfter(row);rangeObj.deleteContents();}}</script><tableid="myTable"border='1'cellpadding="0"><tr><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td></tr><tr><td>内容</td><td>内容</td></tr></table><buttononclick="deleteRow()">删除第一行</button></body></html>