Range对象的方法

Range对象表示页面上连续的一块区域，经过Range对象能够操做页面的任何元素。咱们在页面上经过新建一个Range来操做选中元素。建立Range的方法： var  range = document.createRange();

与Range对应的是selection，全部的窗口都有selection对象。通常的浏览器selection只对应一个Range，可是火狐浏览器（firfox）能够对应对个Range。建立selection的js语句：var selection = document.getSelection();或者var selection = window.getSelection();

那么咱们简单了解了他俩的关系 怎么吧他们联系起来呢，经过selection的方法来获取Range对象

 var range = document.getSelection().getRangeAt(index);咱们经过selection的rangeCount属性能够判断用户是否选择了内容。

一、rangeAt()：获取range内容的方法，rangeCount：统计range的数量

<h3>咱们生活在北京，北京雾霾很重，咱们快被毒死了</h3>
		<input type="button" value="点击试试" onclick="RangeTest()">
		<div id="showRange"></div>

<script>	
            function RangeTest() {
				var html;
				var selection = document.getSelection();
				var showRange = document.getElementById("showRange");
				if(selection.rangeCount > 0) {
					html = "您选取了" + selection.rangeCount + "段内容<br/>";
					for(var i = 0; i < selection.rangeCount; i++) {
						var range = selection.getRangeAt(i);
						console.log("我手机");
						html+= "第" + (i+1) + "段内容是:" + range + "<br/>";
						console.log("我手机");
					}
					showRange.innerHTML = html;
				}
			}
		</script>

 

呈现的效果图：

火狐但是实现多段内容选择，在这里再也不进行演示。

二、deleteContents：删除当前 Range 对象表示的文档区域，seleteNodeContents(）：使它包含指定节点的子孙节点，但不包含指定的节点自己。seleteNode()：设定range范围，使它包含指定的节点和它的全部子孙节点

function deleteRangeContent(onlyContent){
				var div=document.getElementById("deleteContent");
				//建立range对象
				var rangeObj=document.createRange();
				if(onlyContent){
					rangeObj.selectNodeContents(div);
					rangeObj.deleteContents();
				}else{
					rangeObj.selectNode(div);
					rangeObj.deleteContents();
				}
				
				
			}
		</script>
		<div id="deleteContent" style="background-color: aquamarine;width: 300px;height: 200px;">你敢删我？？</div>
		<button onclick="deleteRangeContent(true)">删除内容</button>
		<button onclick="deleteRangeContent(false)">删除元素</button>

 删除元素后就彻底没有了  只剩下两个按键了。

三、删除字符，删除第一个到第四个字。主要方法：setStart设置删除字段的开始点,setEnd设定删除字段的终点位置。

            function deleteChar(){
                var div=document.getElementById("deleteChar");
                var textObj=div.firstChild;
                var rangeObj=document.createRange();
                rangeObj.setStart(textObj,0);
                rangeObj.setEnd(textObj,4);
                rangeObj.deleteContents();
            }
            
        </script>
        <div id="deleteChar">这段内容是来删除的额</div>
        <button onclick="deleteChar()">删除文字</button>

四、deleteRow成行删除,第二排的表格被删除了。这里要好好介绍一下4个方法。

setEndAfter()：用于将某个节点终点位置设定为range对象所表明区域的终点位置。

setEndBefore()：用于将某个节点终点位置设定为range对象所表明区域的起点位置。

setStartAfter()：用于将某个节点起点位置设定为range对象所表明区域的终点位置。

setStartBefore()：用于将某个节点起点位置设定为range对象所表明区域的起点位置

function deleteRow(){
				var table=document.getElementById("table");
				if(table.rows.length>0){
					var row=table.rows[1];
					var rangeObj=document.createRange();
					rangeObj.setStartBefore(row);
					rangeObj.setEndAfter(row);
					rangeObj.deleteContents();
				}
				
			}
		</script>
		<table border="1px" cellpadding="10" cellspacing="0" id="table">
			<tr>
				<td>1</td>
				<td>2</td>
			</tr>
	        <tr>
	        <td>3</td>
	        <td>4</td>
	        </tr>	
		</table>

五、clone()方法。

function clone(){
				var rangeObj=document.createRange();
				rangeObj.selectNodeContents(document.getElementById("clone"));
				var rangeClone =rangeObj.cloneRange();
				alert(rangeClone.toString());
			}
		</script>
		
		<p id="clone">clone()方法的实验代码</p>
		<button onclick="clone()">克隆克隆</button>

六、移动元素，extractContents()从文档中移除范围选区,是它会从之前的位置移除来，放在别的地方。该方法和 cloneContents() 方法与 deleteContents() 方法的组合很类似。

function moveContent(){
				var srcDiv = document.getElementById("srcDiv");
				var disDiv = document.getElementById("disDiv");
				var  rangeObj=document.createRange();
				rangeObj.selectNodeContents(srcDiv);
				var docFrament=rangeObj.extractContents();
				disDiv.appendChild(docFrament);
			}
		</script>
		
		<div id="srcDiv" style="background-color: antiquewhite;width: 200px;height: 100px;">wo</div>
		<div id="disDiv" style="background-color: beige;width: 200px;height: 100px;">ni</div>
		<button onclick="moveContent()">移动元素</button>

                      

七、插入元素，insertNode()

<div onmouseup="insertNode()">这儿里随便写的一些东西，为了好待会儿测试插入实例。</div>
		<button id="button">我去哪儿呢</button>
        <script>
			function insertNode(){
				var btn = document.getElementById("button");
				var selection=document.getSelection();
				if(selection.rangeCount>0){
					var range=selection.getRangeAt(0);
					range.insertNode(btn);
				}
			}
        </script>

八、detach()当确认 Range 对象再也不被使用时，能够调用 detach() 方法，通知实现没必要再跟踪该范围。collapse() 方法是范围的边界点重合，就是取消选择。

<script>
			var range=document.createRange();
			function selectRangeContents(){
				var div=document.getElementById("div");
				range.selectNode(div);
			}
			function unselect(){
				range.collapse(true);
			}
			
			function showRange(){
				alert(range.toString());
			}
		</script>
		
		<div id="div" style="background-color: darkgray;width: 300px;height: 200px;">dededede</div>
		<button onclick="selectRangeContents()">选择元素</button>
		<button onclick="unselect()">取消元素</button>
		<button onclick="showRange()">打印元素</button>