Range对象基本用法
效果图如下（在谷歌浏览器下的展示）
代码如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> function test() { var html=""; var showRange=document.getElementById("test"); selection=document.getSelection(); if (selection.rangeCount <= 0) { } else { for (var i = 0; i < selection.rangeCount; i++) { var range = selection.getRangeAt(i); html+="您选取的内容为["+range+"]</br>"; } showRange.innerHTML=html; } } </script> <p>为中国奥运健儿加油</p> <input type="button" onclick="test()" value="点击"/> <div id="test"></div> </body> </html>
在火狐浏览器下的展示
为什么会出现这种情况呢，因为火狐浏览器下可以针对不连续的内容多选.
Range对象之SelectNode和selectNodeContents方法
效果图如下
代码内容如下:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> function deleteRangeContent(statusContent) { var div=document.getElementById("range"); var rangeObject=document.createRange(); if(statusContent) { rangeObject.(div); rangeObject.deleteContents(); } else { rangeObject.selectNode(div); rangeObject.deleteContents(); } } </script> <div style="300px;height: 30px;background-color: #ec7dff" id="range">查看效果</div> <input type="button" onclick="deleteRangeContent(true)" value="删除div内部内容"/> <input type="button" onclick="deleteRangeContent(false)" value="删除div及内部内容"/> </body> </html>
selectNodeContents是选定div里边的内容，selectNode是选定div包括里边的内容.
Range对象之setStart和setEnd方法
效果图如下
代码内容如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> function deleteFromEnd() { var textNode=document.getElementById("test").firstChild; var rangeObject=document.createRange(); rangeObject.setStart(textNode,1); rangeObject.setEnd(textNode,4); rangeObject.deleteContents(); } </script> <div id="test">中国奥运军团是所向披靡的战无不胜的</div> <button onclick="deleteFromEnd()">删除</button> </body> </html>
我们误以为是会删除”中国奥运”四个字，但是实际上删除的只有“国奥运”.
Range对象之setStartBefore和setEndAfter方法
效果图如下
代码如下
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> table,tr,td { border:1px solid; } </style> </head> <body> <script> function deleteContent() { var tableElement=document.getElementById("tb"); if(tableElement.rows.length>0) { var range=document.createRange(); var row=tableElement.rows[0]; range.setStartBefore(row); range.setEndAfter(row); range.deleteContents(); } } </script> <table id="tb" style="border:1px solid;"> <tr> <td>第一行第一列</td> <td>第一行第二列</td> </tr> <tr> <td>第二行第一列</td> <td>第二行第二列</td> </tr> </table> <button onclick="deleteContent()">删除table行</button> </body> </html>
该实例中定义了table的开始位置和结束位置来删除.