JS Range使用整理

時間 2021-06-19

標籤 javascript html java node 瀏覽器 app 函數 firefox code htm 欄目 JavaScript 简体版

原文原文鏈接

Range對象的概念

Range對象表明頁面上一段連續的區域，經過Range對象能夠獲取或者修改頁面上任何區域的內容。也能夠經過Range的方法進行復制和移動頁面任何區域的元素，甚至能夠經過Range對象獲取並控制光標位置javascript

獲取頁面Range對象

var  selection = window.getSelection();   
var  range = selection.getRangeAt(0);//getRangeAt方法獲取range，參數爲range下標

每個selection對象都有一個或者多個Range對象，每個range對象表明用戶鼠標所選取範圍內的一段連續區域，在firefox中，能夠經過ctrl鍵能夠選取多個連續的區域，所以在firefox中一個selection對象有多個range對象，在其餘瀏覽器中，用戶只能選取一段連續的區域，所以只有一個range對象。html

建立Range對象

var range = document.createRange();java

Range對象的屬性和方法

(1)屬性

startContainer
包含「起點」的節點。「包含」的意思是起點所屬的節點。
endContainer
包含「結束點」的節點
startOffset
「起點」在startContainer中的偏移量。
若是startContainer是文本節點、註釋節點或CDATA節點，則返回「起點」在startContainer中字符偏移量。
若是startContainer是元素節點，則返回「起點」在startContainer.childNodes中的次序。
collapsed
起點和結束點在一塊兒時爲true；Range對象爲空（剛createRange()時）也爲true。
commonAncestorContainer
第一個包含Range的節點，即同時包含Range的起點和結束點。node

(2)定位（設置「起點」和「結束點」）的一些方法

setStart(node, offset)和setEnd(node, offset)
setStart：設置起點的位置，node是對startContainer的引用，偏移則是startOffset；
setEnd：設置結束點的位置，node是對endContainer的引用，偏移則是startOffset；
代碼以下：瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>range3</title>
 <script>
  function deleteChar() {
      var div = document.getElementById("myDiv");
      var textNode = div.firstChild;
      var rangeObj = document.createRange();
      rangeObj.setStart(textNode,1);
     rangeObj.setEnd(textNode,4);
     rangeObj.deleteContents();
}
</script>
</head>
<body>
     <div id="myDiv" style="color:red">這段文字是用來刪除的</div>
     <button onclick="deleteChar()">刪除文字</button>
</body>
</html>

setStartBefore(referenceNode)、setStartAfter(referenceNode)
setEndBefore(referenceNode)、setEndAfter(referenceNode)
setStartBefore：將「起點」設置到referenceNode前
setStartAfter：將「起點」設置到referenceNode後
setEndBefore：將「結束點」設置到referenceNode前
setEndAfter：將「結束點」設置到referenceNode後
注意：使用這四個方法設置的「起點」或「結束點」的父節點與referenceNode的父節點是同一個元素。
代碼以下:app

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="application/javascript">
            function delrow(){
                var table=document.getElementById("mytable");
                if(table.rows.length>0){
                    var row=table.rows[0];
                    var rangeObj=document.createRange();
                    rangeObj.setStartBefore(row);
                    rangeObj.setEndAfter(row);
                    rangeObj.deleteContents();
                }
            }
        </script>
    </head>
    <body>
        <table id="mytable" border="1">
            <tr>
                <td>內容1</td>
                <td>內容2</td>
            </tr>
            <tr>
                <td>內容3</td>
                <td>內容4</td>
            </tr>
        </table>
        <button onclick="delrow()">刪除第一行</button>
    </body>
</html>

selectNode(referenceNode)和selectNodeContents(referenceNode)
selectNode：設置Range的範圍，包括referenceNode和它的全部後代(子孫)節點。
selectNodeContents：設置Range的範圍，包括它的全部後代節點。函數

(3)修改範圍的方法

cloneRange()
cloneRange()方法將返回一個當前Range的副本，它也是Range對象。
cloneContents()
能夠克隆選中Range的fragment並返回改fragment。這個方法相似extractContents()，但不是刪除，而是克隆
deleteContents()
從Dom中刪除Range選中的fragment。注意該函數沒有返回值（實際上爲undefined）。
extractContents()
將選中的Range從DOM樹中移到一個fragment中，並返回此fragment
insertNode
insertNode方法能夠插入一個節點到Range中，注意會插入到Range的「起點」
collapse()
Range.collapse() 方法向邊界點摺疊該 Range 。firefox

range.collapse(toStart);//toStart 可選,一個布爾值： true 摺疊到 Range 的 start 節點，false 摺疊到 end 節點。若是省略，則默認爲 false .

(4)比較

compareBoundaryPoints()code

var compare = comparerange.compareBoundaryPoints(how, sourceRange);

compare：返回1, 0, -1.（0爲相等，1爲時，comparerange在sourceRange以後，-1爲comparerange在sourceRange以前）。
how：比較哪些邊界點，爲常數。
Range.START_TO_START - 比較兩個 Range 節點的開始點
Range.END_TO_END - 比較兩個 Range 節點的結束點
Range.START_TO_END - 用 sourceRange 的開始點與當前範圍的結束點比較
Range.END_TO_START - 用 sourceRange 的結束點與當前範圍的開始點比較
sourceRange：個Range對象的邊界。htm

(5)其它

detach()
雖然GC（垃圾收集器）會將其收集，但用detach()釋放range對象是一個好習慣。語法爲：oRange.detach();

toString()
返回該範圍表示的文檔區域的純文本內容，不包含任何標籤;

注意點

除了火狐瀏覽器外。若是section中已經存在一個range了，再經過addRange添加range是無效

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。