HTML5 编辑 API 之 Range 对象（二）
cloneRange:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>range对象中的cloneRange方法</title> </head> <body> <!-- 复制当前的range --> <script type="text/javascript"> function cloneRange(){ var rangeObj = document.createRange(); rangeObj.selectNodeContents(document.getElementById("p")); var rangeClone = rangeObj.cloneRange(); alert(rangeClone.toString()); } </script> <p id="p">这是一段文字，用来测试</p> <button onclick="cloneRange()">点击</button> </body> </html>
cloneContents:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>range对象中的cloneContents方法</title> </head> <body> <!-- 用于追加html代码，并且将range对象所代表的区域中的html代码追加到html代码之后。 --> <script type="text/javascript"> function cloneContent(){ var div = document.getElementById('id'); var rangeObj = document.createRange(); rangeObj.selectNodeContents(div); var docFrangMent = rangeObj.cloneContents(); div.appendChild(docFrangMent); } </script> <div id="id"> 今天天气真的好 <br/> <button onclick="cloneContent()">克隆</button> <br/> </div> </body> </html>
extratContents:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>range对象中的extratContents方法</title> </head> <body> <script type="text/javascript"> function moveContent(){ var srcDiv = document.getElementById('srcDiv'); var distDiv = document.getElementById('distDiv'); var rangeObj = document.createRange(); rangeObj.selectNodeContents(srcDiv); var docFragment = rangeObj.extractContents(); distDiv.appendChild(docFragment); } </script> <div id="srcDiv" style="background-color:green; width:300px;height:50px">How are you</div> <div id="distDiv" style="background-color:red; width:300px;height:50px"></div> <button onclick="moveContent()">移动</button> </body> </html>
compareBoundaryPoints:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>range对象中的compareBoundaryPoints方法</title> </head> <body> <script type="text/javascript"> function testPlace(){ var boldText = document.getElementById('boldTest'); var boldRange = document.createRange(); boldRange.selectNodeContents(boldText.firstChild); var selection = document.getSelection(); if(selection.rangeCount>0){ var selRange = selection.getRangeAt(0); if(selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0){ alert("选取的文字在粗体前面") }else{ if(selRange.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0){ alert("选取的文字在粗体后面") } } } } </script> 这是一段<b id="boldTest">用来</b>测试的文字，测试结果 <br/> <button onclick="testPlace()">位置比较</button> </body> </html>
insertNode:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>range对象中的insertNode方法</title> </head> <body> <script type="text/javascript"> function moveButton(){ var btn = document.getElementById('button'); var selection = document.getSelection(); if(selection.rangeCount>0){ var range = selection.getRangeAt(0); range.insertNode(btn); } } </script> <div onmouseup="moveButton()" style="background-color:bisque;width:400px">这是一段测试文字这是一段测试文字这是一段测试文字</div> <button id="button">点击</button> </body> </html>
collapse:
<!DOCTYPE html> <html> <head lang="en"> <meta charset="utf-8"> <title>range对象中的collapse方法</title> </head> <body> <script type="text/javascript"> var rangeObj = document.createRange(); function selectRangeContents(){ var div = document.getElementById('div'); rangeObj.selectNode(div); } function unselect(){ rangeObj.collapse(false); } function showRange(){ alert(rangeObj.toString()); } </script> <div id="div" style="background-color:bisque;width:300px;height:50px">现在是下午三点四十五分</div> <button onclick="selectRangeContents()">选择元素</button> <button onclick="unselect()">取消选择元素</button> <button onclick="showRange()">显示range内容</button> </body> </html>
