Range对象表明页面上的一段连续区域,经过Range对象,能够获取或修改页面上的任何区域,能够经过以下建立一个空的Range对象,以下:html
var range = document.createRange();前端
在html5中,每个浏览器窗口及每个窗口中都有一个selection对象,表明用户鼠标在页面中所选取的区域,(注意:通过测试IE9如下的浏览器不支持Selection对象), 能够经过以下语句建立selection对象;html5
var selection = document.getSelection(); 或者node
var selection = window.getSelection();web
每个selection对象都有一个或者多个Range对象,每个range对象表明用户鼠标所选取范围内的一段连续区域,在firefox中,能够经过ctrl键能够选取多个连续的区域,所以在firefox中一个selection对象有多个range对象,在其余浏览器中,用户只能选取一段连续的区域,所以只有一个range对象。浏览器
能够经过selection对象的getRangeAt方法来获取selection对象的某个Range对象,以下:app
var range = document.getSelection().getRangeAt(index);性能
getRangeAt方法有一个参数index,表明该Range对象的序列号;咱们能够经过Selection对象的rangeCount参数的值判断用户是否选取了内容;测试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>range</title> </head> <body> <script> function rangeTest() { var html; var showRangeDiv=document.getElementById("showRange"); var selection=document.getSelection(); if(selection.rangeCount>0){ html="您选取了"+selection.rangeCount+">段内容<br/>" for(var i=0;i<selection.rangeCount;i++){ var range=selection.getRangeAt(i); html+="第"+(i+1)+"段内容为:"+ range+"<br/>"; } showRangeDiv.innerHTML=html; } } </script> Selection与Range对象的使用 <input type="button" value="点击我" onclick="rangeTest()"> <div id="showRange"></div> </body> </html>
selectNode方法:Range对象的selectNode方法用于将Range对象的起点指定为某个节点的起点,将Range对象的终点指定为该节点的终点,使Range对象所表明的区域中包含该节点。使用方法以下:spa
rangeObj.selectNode(node);
上面的rangeObj表明一个Range对象,该方法使用一个参数,表明页面中的一个节点。
selectNodeContents方法:用于将Range对象的起点指定为某个节点中的全部内容的起点,将Range对象的终点指定为该节点全部内容的终点,使Range对象所表明的区域中包含该节点的全部内容。使用方法以下:
rangeObj.selectNodeContents(node);
含义如上所示;
deleteContents方法:用于将Range对象中所包含的内容从页面中删除,使用方法以下所示:
rangeObj.deleteContents();
<script> function deleteRangeContent (onlyContent) { var div=document.getElementById("div"); var rangeObj=document.createRange(); if(onlyContent){ rangeObj.selectNodeContents(div); rangeObj.deleteContents(); }else{ rangeObj.selectNode(div); rangeObj.deleteContents(); } } </script> <div id="div" style="background-color: aquamarine; width: 300px;height: 50px"> 元素中内容 </div> <button onclick="deleteRangeContent (false)">删除元素</button> <button onclick="deleteRangeContent (true)">删除内容</button>
setStart方法 用于将某个节点中的某处位置指定为Range对象所表明区域的起点位置,使用方法以下:
rangeObj.setStart(node,curIndex);
如上代码rangeObj表明一个Range对象,该setStart方法使用2个参数,第一个参数node表明一个节点,第二个参数是一个数字,当第一个参数node所表明的节点是一个内容为一段文字的文字节点时,该参数值用于指定将第几个文字的结束位置做为Range对象所表明的区域的起点位置;当第一个参数node所表明的节点中包括其余子节点时,该参数值用于将第几个子节点的结束位置指定为Range对象所表明的区域的起点位置;
setEnd方法 用于将某个节点中的某处位置指定Range对象所表明区域的结束位置。使用方法以下所示:
rangeObj.setEnd(node,curIndex);
该方法中的2个参数的含义如setStart方法中参数的含义相同;只不过一个是起点位置,另外一个是结束位置;
setStartBefore方法:用于将某个节点的起点位置指定为Range对象所表明区域的起点位置。
setStartAfter方法: 用于将某个节点的终点位置指定为Range对象所表明区域的起点位置。
setEndBefore方法: 用于将某个节点的起点位置指定为Range对象所表明区域的终点位置。
setEndAfter方法: 用于将某个节点的终点位置指定为Range对象所表明区域的终点位置。
<script> function deleteChar() { var div=document.getElementById("mydiv"); var textNode=div.firstChild; var rangeObj=document.createRange(); rangeObj.setStart(textNode,1); rangeObj.setEnd(textNode,5); rangeObj.deleteContents(); } </script> <div id="mydiv" style="color: cornflowerblue"> 12345测试删除文字功能aaaaaaaaa </div> <button onclick="deleteChar()">删除文字</button>
cloneRange
cloneRange方法 Range对象的cloneRange方法用于对当前的Range对象进行复制,该方法返回复制的Range对象,
<script> function cloneRange() { var rangeObj=document.createRange(); var p=document.getElementById("p"); rangeObj.selectNodeContents(p) var rangeClone=rangeObj.cloneRange(); alert(rangeClone.toString()); } </script> <p id="p">这里是内容</p> <button onclick="cloneRange()">克隆</button>
cloneContents
该方法用于在页面上追加一段HTML代码,而且将Range对象所表明区域中的HTML代码克隆到被追加的html代码中;
<script> function cloneContent() { var div=document.getElementById("div1"); var rangeObj=document.createRange(); rangeObj.selectNodeContents(div); var docFrangMent=rangeObj.cloneContents(); div.appendChild(docFrangMent); } </script> <div id="div1"> *小萌货* <br/> <button onclick="cloneContent()">克隆</button> <br/> </div>
extractContents
extractContents方法 用于将Range对象所表明区域中的html代码克隆到一个DocumentFragment对象中,而后从页面中删除这段HTML代码;
<script> function moveContent() { var srcDiv=document.getElementById("srcDiv"); var disDiv=document.getElementById("disDiv"); var rangeObj=document.createRange(); rangeObj.selectNodeContents(srcDiv); var docFrangment=rangeObj.extractContents(); disDiv.appendChild(docFrangment); } </script> <div id="srcDiv" style="background-color: cornflowerblue;width:300px;height: 50px">么么哒</div> <div id="disDiv" style="background-color: #ff6471;width:300px;height: 50px"></div> <button onclick="moveContent()">移动元素</button>
insertNode
insertNode方法: 该方法用于将指定的节点插入到某个Range对象所表明的区域中,插入位置为Range对象所表明区域的起点位置,若是该节点已经存在于页面中,该节点将被移动到Range对象表明的区域的起点处。
<script> 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="width: 400px;background-color: cornflowerblue"> web前端 HTML5 hello world </div> <button id="button">按钮</button>
compareBoundaryPoints
<script> function b() { 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> <div> 下雨天了怎么办,<b id="boldTest">忽然</b>好想你。 <br/> <button onclick="b()">位置比较</button> </div>
collapse
<script> var rangeObj=document.createRange(); function selectRangeContens() { var div=document.getElementById("div"); rangeObj.selectNode(div); } function unselect() { rangeObj.collapse(false); } function showRange() { alert(rangeObj.toString()); } </script> <div id="div2" style="background-color: cadetblue; width: 300px;height: 50px;"> 说好的幸福呢? </div> <button onclick="selectRangeContens()">选择元素</button> <button onclick=" unselect()">取消元素</button> <button onclick="showRange() ">显示Range内容</button>
选择元素后点击显示内容
取消元素后显示的状况
detach
range的detach方法如:rangeObj.detach()释放Range对象,释放后其余事件就不成立了,主要用于释放Range对象来提高应用的性能。