Range對象基本用法 效果圖如下（在谷歌瀏覽器下的展示） 代碼如下 在火狐瀏覽器下的展示 為什麼會出現這種情況呢，因為火狐瀏覽器下可以針對不連續的內容多選. Range對象之SelectNode和selectNodeContents方法 效果圖如下 代碼內容如下: selectNodeConten ...
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="width: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的開始位置和結束位置來刪除.
