HTML5 编辑 API 之 Range 对象（一）
一、Range 对象基本概念
通过使用 Range 对象所提供的方法实现一个鼠标选取内容，通过点击按钮打印出选中内容，当然注意在不同的浏览器下可选中的内容数量是不同的。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 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()"> 25 <div id="showRange"></div> 26 </body> 27 </html>
二、Range方法之SelectNode等方法
包含 SelectNode、SelectNodeContents、deleteContents 方法，通过实例来了解每一个方法的使用。
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 function deleteRangeContent(onlyContent){ 10 var div = document.getElementById("div"); 11 var rangeObj = document.createRange(); 12 if(onlyContent){ 13 rangeObj.selectNodeContents(div); 14 rangeObj.deleteContents(); 15 }else{ 16 rangeObj.selectNode(div); 17 rangeObj.deleteContents(); 18 } 19 } 20 </script> 21 <div id="div" style="background-color: aqua;width: 300px;height: 50px"> 22 节点中的内容 23 </div> 24 <button onclick="deleteRangeContent(true)">删除节点内容</button> 25 <button onclick="deleteRangeContent(false)">删除整个节点</button> 26 </body> 27 </html>
三、Range方法之setStartsetEnd等方法
包含 setStart、setEnd、setStartBefore、setStartAfter、setEndBefore、setEndAfter 方法。
四、Range 对象方法
本课时讲解通过使用 Range 对象的方法来进行复制、追加、克隆等操作。通过简单地标签，来了解 Range 对象提供的方法的使用。
五、Range 对象方法之 insertNode、compareBoundaryPoints 方法
使用 Range 对象的方法 insertNode 来进行指定节点插入某个 Range 对象所代表的区域中插入位置为 Range 对象所代表的区域的起点位置。使用 compareBoundaryPoints 方法来比较两个 Range 对象的起点位置或终点位置。
六、Range 对象方法之 collapse、detach 方法
通过使用 collapse 方法将 Range 对象所代表的区域的终点移动到该区域的起点处，或将 Range 对象所代表区域的起点移动到终点出。
