[html5] 学习笔记-编辑 API 之 Range 对象
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了[html5] 学习笔记-编辑 API 之 Range 对象相关的知识，希望对你有一定的参考价值。
1、Range对象的基本概念
一个Range对象代表页面上的一段连续区域，通过Range对象，可以获取或修改网页上的任何区域。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 function rangeTest(){ 10 var html; 11 showRangeDiv = document.getElementById("showRange"); 12 selection = document.getSelection(); 13 if(selection.rangeCount>0){ 14 html = "你选取了>"+selection.rangeCount+"<内容<br>"; 15 for (var i = 0; i < selection.rangeCount; i++) { 16 var range = selection.getRangeAt(i); 17 html+="第"+(i+1)+"段内容为:"+range+"<br>"; 18 } 19 showRangeDiv.innerHTML = html; 20 } 21 } 22 </script> 23 Selection对象与Range对象的使用 24 <input type="button" value="点击我" onclick="rangeTest()"></input> 25 <div id="showRange"></div> 26 </body> 27 </html>
2、Range对象的SelectNode方法，SelectNodeContents方法，deleteContents方法
SelectNode方法用于将Range对象的起点，指定为某个节点的起点，将Range的终点，指定为该节点的终点，使Range对象的区域包含该节点。
SelectNodeContents方法用于将Range对象的起点，指定为某个节点所有内容的起点，将Range对象的终点，指定为某个节点所有内容的终点，使Range对象的区域包含该节点的所有内容。
deleteContents方法，用于将Range对象所包含的内容，从页面中进行删除。
1 <body> 2 <script> 3 function deleteRangeContent(onlyContent){ 4 var div = document.getElementById("div"); 5 var rangeObj = document.createRange(); 6 if(onlyContent){ 7 rangeObj.selectNodeContents(div); 8 rangeObj.deleteContents(); 9 }else{ 10 rangeObj.selectNode(div); 11 rangeObj.deleteContents(); 12 } 13 } 14 </script> 15 <div id="div" style="background-color:#e0a0b0;width=300px;height=50px"> 16 元素中的内容 17 </div> 18 <button onclick="deleteRangeContent(true)">删除内容</button> 19 <button onclick="deleteRangeContent(false)">删除元素</button> 20 </body>
3、Range对象有很多用来操作页面内容的方法，有setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter方法
setStart用来将某个节点的某个位置，设置为Range对象的起点位置
setEnd用来将某个节点的某个位置，设置为Range对象的结束位置
1 <body> 2 <script> 3 function deleteChar(){ 4 var div = document.getElementById("myDiv"); 5 var textNode = div.firstChild; 6 var rangeObj = document.createRange(); 7 rangeObj.setStart(textNode,1); 8 rangeObj.setEnd(textNode,4); 9 rangeObj.deleteContents(); 10 } 11 </script> 12 <div id="myDiv" style="color:red">这段文字是用来删除的</div> 13 <button onclick="deleteChar()">删除文字</button> 14 </body>
setStartBefore用于将某个节点的起点位置，设置为Range对象所代表区域的起点位置
setStartAfter用于将某个节点的终点位置，设置为Range对象所代表区域的起点位置
setEndBefore用于将某个节点的起点位置，设置为Range对象所代表区域的终点位置
setEndAfter用于将某个节点的终点位置，设置为Range对象所代表区域的终点位置
1 <body> 2 <script> 3 function deleteRow(){ 4 var table = document.getElementById("myTable"); 5 if (table.rows.length>0) { 6 var row = table.rows[0]; 7 var rangeObj = document.createRange(); 8 rangeObj.setStartBefore(row); 9 rangeObj.setEndAfter(row); 10 rangeObj.deleteContents(); 11 }; 12 } 13 </script> 14 <table id="myTable" border="1" cellspacing="0" cellpadding="0"> 15 <tr> 16 <td>内容1</td> 17 <td>内容2</td> 18 </tr> 19 <tr> 20 <td>内容3</td> 21 <td>内容4</td> 22 </tr> 23 </table> 24 <button onclick="deleteRow()">删除第一行</button> 25 </body>
以上是关于[html5] 学习笔记-编辑 API 之 Range 对象的主要内容，如果未能解决你的问题，请参考以下文章