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>