DOM 之Range(範圍)

時間 2019-12-11

標籤 dom range 範圍欄目 HTML 简体版

原文原文鏈接

-------《javascript高級程序設計》 12.4 範圍筆記-------javascript

DOM2級在Document類型中定義了createRange()方法，在兼容DOM的瀏覽器中，這個方法屬於Document對象。能夠使用HasFeature方法來檢測瀏覽器是否支持範圍html

var supportsRange = document.implementation.hasFeature(‘Range’, ‘2.0’)java

var alsoSupportsRange = (typeof document.createRange == ‘function’);瀏覽器

1、若是瀏覽器支持Range，就能夠使用createRange()來建立DOM範圍

var range = documemt.createRange(); 字體

新建立的範圍直接與建立它的文檔關聯在一塊兒，不用用於其餘文檔。每個範圍由一個Range類型的實例表示。它有不少屬性及方法this

1. startContainer: 包含範圍起點的節點（即選區中第一個節點的父節點） spa

2. startOffset: 範圍在startComtainer中起點的偏移量，若是startContainer是文本節點、註釋節點或CDATA節點，那麼startOffset就是範圍起點以前的跳過的字符數量，不然，startOffset就是範圍中第一個子節點的索引。設計

3. endContainer 包含範圍終點的節點（即選區中最後一個節點的父節點) code

4. endOffset: 範圍在endContainer中節點的偏移量（與startOffset遵循相同的取值規則) htm

5. commonAncestorContainer: startContainer和endContainer共同的祖先節點在文檔樹中位置最深的那個

2、用DOM範圍實現簡單選擇

選用的方法 selectNode() 或者selectNodeContents()

1.這兩個方法都接受一個參數，即一個DOM節點。但selectNode()方法選擇整個節點，包括其子節點，而selectNodeContents（）方法只是選擇節點的子節點，

range<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <p id="p1"><b>hello</b>world</p>
</body>
</html>

rangevar p1 = document.getElementById('p1');
//建立範圍
var range1 = document.createRange();
var range2 = document.createRange();
//實例化範圍
range1.selectNode(p1);
range2.selectNodeContents(p1);
//檢測範圍裏的一些屬性及方法
range1.startContainer // body
range1.startOffset   // 1  空格文本是一個文本節點
range1.endContainer  //body
range1.endOffset      //  2 只選中一個子節點
range1.commonAncestorContainer  //body

range2.startContainer //p1
range2.startOffset  //  0
range2.endContaner //p1
range2.endOffset // 2
range2.commonAncestorContainer  //p1

------爲了更精細的控制將哪些節點包含在範圍中,還能夠使用下列方法 ------

1. setStartBefore(refNode) 將範圍的起點設置在refNode以前，所以refNode也就是範圍選區中的第一個子節點，同時會將startContainer屬性設置爲refNode.parentNode，將startOffset屬性設置爲refNode在其父節點的childNodes集合中的索引

2. setStartAfter(refNode) 將範圍的起點設置在refNode以後，所以refNode也就不在範圍以內了，其下一個同輩節點纔是選區中的第一個子節點，同時會將startContainer屬性設置爲refNode.aprentNode,將startOffset屬性設置爲refNode在其父節點的childNodes集合中的索引加1；

3. setEndBefore(refNode): 將範圍的終點設置在refNode以前，所以refNode也就不在範圍以內了，其上一個同輩節點纔是範圍選區中的最後一個子節點。同時會將endContainer屬性設置爲refNode.parentNode，將endOffset屬性設置爲refNode在其父節點的childNodes集合中的索引；

4. setEndAfter(refNode) 將範圍的終點設置在refNode以後，所以refNode也就是範圍選區中的最後一個子節點。同時會將endContainer屬性設置爲refNode.parentNode,將endOffset屬性設置爲refNode在其父節點的childNodes集合中的索引加1

---- 用DOM範圍實現複雜選擇 -----

要實複雜的範圍就使用setStart() 和setEnd() 方法，這兩個方法都接受兩個參數：一個參照節點和一個偏移量值

setStart() 參照節點會變成startContainer，而偏移量值會變成startOffset

setEnd() 參照節點會變成endContainer，偏移量會變成endOffset

用這兩個方法重寫前面selectNode()與selectNodeContents()方法

rangevar range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById('p1');
var p1Index = -1, i, len;
//檢測p1的索引值
for(i = 0,len = p1.parentNode.childNodes.length; i<len; i++){
  if( p1.parentNode.childNodes[i] == p1){
    p1Index = i;
    break;
  }
}
range1.setStart(p1.parentNode, p1Index);
range1.setEnd(p1.parentNode, p1Index+1);
range2.setStart(p1,0);
range2.setEnd(p1,p1.childNodes.length);

setStart() 與setEnd()方法的運用

rangehelloNode = p1.firstChild.firstChild  // 文本節點 'hello'
worldNode = p1.lastChild              // 文本節點 ' world'
range = document.createRange()      
range.setStart(helloNode, 2);
range.setEnd(worldNode,3)
//這個範圍就是 'llo world'
range.startContainer  //hello
range.endContainer  //world
range.startOffset       // 2 字符在文本節點的位置
range.endOffset       // 3
range.commonAncestorContainer   // p#p1

-----操做DOM範圍中的內容-----

在建立範圍時,內部會爲這個範圍建立一個文檔片斷.範圍所屬的所有節點都被添加到了這個文檔片斷中,範圍知道自身缺乏哪些開標籤和閉標籤,它可以從新構建有效的DOM結構以便咱們對其進行操做

針對上面的例子,選區變爲了 ‘llo’</b>wo 不是一個有效的DOM結構，但範圍會自動添加缺乏的，最終變成了

<p><b>he</b><b>llo</b> wo rld</p> 範圍內的文檔片斷是

1. deleteContents() 從文檔中刪除範圍所包含的內容，沒有返回值

2.extractContents() 也會從文檔中移除範圍選區，但會返回範圍的文檔片斷，能夠進行其餘做用

3.cloneContents() 建立範圍對象的一個副本，而後在文檔的其餘地方插入該副本; 在調用方法以前，拆分的節點並不會產生格式良好的文檔片斷，換句話說，原始的HTMl在DOM被修改以前會始終保持不變

4.insertNode(Node) 向範圍選區的開始處插入一個節點

5. surroundContents() 環繞範圍內容插入內容，接受一個參數，即環繞範圍插入的節點

在環繞範圍插入內容時，後臺會執行下列步驟

1）提取出範圍中的內容（相似執行extractContent());

2) 將給定節點插入到文檔中原來範圍所在的位置上；

3）將文檔片斷的內容添加到給定節點中；

6. 摺疊DOM範圍

就是範圍中未選擇文檔的任何部分；collapse()方法來摺疊範圍，這個方法接受一個參數（布爾值) true 表示摺疊到範圍的起點，false表示摺疊到範圍的終點。要檢測範圍已經摺疊完畢，能夠檢查collapsed屬性

檢測某個範圍否處於摺疊狀態，能夠幫咱們肯定範圍中的兩個節點是否緊密相鄰。將一個範圍設置第一個節點的終點，另外一個範圍設置爲第二個節點的起點，若是兩個節點是相鄰了這個範圍就摺疊完畢，

7. 比較DOM範圍

在有多個範圍的狀況下，能夠使用compareBoundaryPoints() 方法來肯定這些範圍是否有公共的邊界（起點和終點）。這個方法接受兩個參數：表示比較方式的常量值和要比較的範圍。表示比較方式的常量值以下所示

Range.START_TO_START(0) 比較第一個範圍和第二個範圍的起點

Range.START_TO_END(1) 比較第一個範圍的起點和第二個範圍的終點

Range.END_TO_END(2) 比較第一個範圍和第二個範圍的終點

Range.END_TO_START(3) 比較第一個範圍的終點和第一個範圍的起點

--- compareBoundaryPoints()方法可能的返回值以下：

若是第一個範圍中的點位於第二個範圍中的點以前，返回-1；

若是兩個點相等。返回0；

若是第一個範圍中的點位位於第二個範圍中的點以後，返回1

range<!DOCTYPE html>
<html>
<head>
  <title>範圍</title>
  <meta charset="utf-8">
</head>
<body>
	<p id="p2">before</p>
	<p id="p1"><b>hello</b> world!</p>
	<p id="p3">after</p>
  <script type="text/javascript">
    var p1 = document.getElementById('p1' ),
	    p2 = document.getElementById('p2' ),
	    p3 = document.getElementById('p3' ),
	    range1 = document.createRange(),
	    range2 = document.createRange();
	    range1.selectNodeContents(p1);
	    range2.selectNodeContents(p1);
	    range2.setEndBefore(p1.lastChild);
            range1.compareBoundaryPoints(Range.START_TO_START,range2)
            range1.compareBoundaryPoints(Range.END_TO_END,range2)
  </script>
</body>
</html>

8.cloneRange() 複製範圍

9. detach() 從建立範圍文檔中分離出該範圍。從而讓垃圾回收機制回收其內存

range.detach();

range = null

--------------------------------ie的範圍----------------------

IE專有的文本範圍(text range) 文本範圍處理的主要是文本（不必定是DOM節點），經過<body>,<button>.<input>.<textarea> 等這幾個元素能夠調用createTextRange()方法來建立文本範圍

1.findText() 會找到第一次出現的給定文本，並將範圍移過來環繞該文本。若是沒找到文本，返回false，不然返回true

textRange<p id="p1"><b>hello</b>world</p>

var range = document.body.createTextRange();
var found = range.findText('hello');

文本'hello’就被包含在範圍以內。能夠檢測範圍的text屬性，來確認（這個屬性返回範圍中包含的文本),或者能夠檢查findText()的返回值

還能夠爲findText()傳入另外一個參數，即表示向哪一個方向繼續搜索的數值，負值表示應該從當前位置向後搜索，正值表示從當前位置向前搜索

2.moveToElementText() 接受一個DOM元素，並選擇該元素的全部文本，包含HTML標籤，（與selectNode相似)

能夠使用range的htmlText屬性來取得範圍的所有內容。包含HTMl和文本

3. parentElement() （與commonAncestorContainer屬性相似）

-----使用IE範圍實現複雜的選擇---

1. move() moveStart() moveEnd() expend() 這四個方法都接受兩個參數，移動單位和移動單位的數量

移動單位是下列的一種字符串值

‘character’ 逐個字符地移動

'word’ 逐個單詞(一系列非空字符)地移動

'sentence’ 逐個句子(一系列以句號、問號或歎號結尾的字符)地移動

'textedit’ 移動到當前範圍選區的開始或結束位置

moveStart() moveEnd() 能夠移動範圍的起點和終點，移動的副度同單位數量指定（正值表示縮小範圍，負值表示增大範圍)

expand() 能夠將範圍規範化。（將任何部分選擇的文本所有選中）

move() 方法會首先摺疊當前範圍（讓起點和終點相等），而後再將移動指定的單位數量

調用move()以後，範圍的起點與終點相同，所以必須再使用moveStart() 或moveEnd（)建立新的選區

2.操做範圍中的內容能夠使用text屬性或pasteHTML()方法，

text屬性是可讀寫的，能夠獲取範圍內的文本，也能夠設置範圍內的文本

pasteHTMl() 方法能夠設置範圍內的HTMl，插入HTMl時可能會致使格式不正確的HTMl存在（範圍選取時截取了標籤）

3. 摺疊範圍

collapse() 參數爲布爾值，true 摺疊到起點。false摺疊到終點

IE沒有collapsed屬性來檢測是否摺疊完畢，但能夠使用boundingWidth屬性。該屬性返回範圍的寬度（以像素爲單位),摺疊完畢後boundingWidth返回值爲0 (boundingTop,boundingHeight,boundingWidth,boundingLeft

4. 比較IE範圍

compareEndPoints() 方法 (與DOM範圍中的compareBoundaryPoints()方法相似）接受兩個參數：比較的類型和要比較的範圍。比較類型的取值範圍是下列幾個字體串

'startToStart’ , ‘startToEnd’ ‘EndtoEnd’ ‘EndToStart’

compareEndPoints()方法返回值（與DOM的compareBoundaryPoints()方法同樣)

若是第一個範圍的邊界位於第二個範圍的邊界前面，返回-1；

若是兩個邊界相同，返回0；

若是第一個範圍的邊界位於第二個邊界的後面，返回1

IE中還有兩個方法，用於比較範圍

isEqual() 肯定兩個範圍是否相等

inRange() 用於肯定一個範圍是否包含另外一個範圍

5.複製IE範圍

duplicate()方法能夠複製文本範圍

相關標籤/搜索

每日一句

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