JavaScript進階程式設計37.pdf

用DOM範圍實作簡單選擇

selectNode()和selectNodeContents()它們都接收一個DOM節點參數，然後使用該節點中的資訊來填充範圍，其中selectNode()方法選擇整個節點，包括其子節點；而selectNodeContents()方法隻選擇節點的子節點

var range1=document.createRange();

var range2=document.createRange();

　　p1=document.getElementById("p1");

range1.selectNode(p1);　　//包含id為“p1”的整個節點

range2.selectNodeContents(p1);　　//隻包含id為“p1”的子節點

在調用selectNode()時，startContainer、endContainer和commonAncestorContainer都等于傳入節點的父節點，而startOffset屬性等于給定節點在其父節點的childNodes集合中的索引，endOffset等于startOffset加上選擇了多少個節點

在調用selectNodeContents()時，startContainer、endContainer和commonAncestorContainer都等于傳入的節點，而startOffset屬性始終等于0(第一個子節點開始)，endOffset等于子節點數量

更精細的控制

setStartBefore(refNode):将範圍的起點設定在refNode之前，refNode就是範圍選區的第一個子節點，同時會将startContainer設定為refNode.parentNode

setStartAfter(refNode):将範圍的起點設定在refNode之後，refNode的後一個同胞元素就是範圍選區的第一個子節點

setEndBefore(refNode):将範圍的終點設定在refNode之前，上一個同胞元素是範圍選區中最後一個子節點

setEndAfter(refNode):将範圍的終點設定在refNode之後，refNode是範圍選區中最後一個子節點

用DOM範圍實作複雜選擇

setStrat()和setEnd()方法，兩個方法都接收兩個參數，一個參照節點和一個偏移量值，對于setStart()來說，參照節點會變成startContainer，偏移量值會變成startOffset；對于setEnd()來說,參照節點會變成endContainer，偏移量值會變成endOffset

操作DOM範圍中的内容

 在建立範圍時，内部會為這個範圍建立一個文檔片段，範圍所屬的全部節點都被添加到這個文檔片段中，對于殘缺的标簽，範圍會自動為其補全（注意：表示範圍的内部文檔片段中的所有節點，都隻是指向文檔中相應節點的指針）

第一個方法：deleteContents()，能夠從文檔中删除範圍所包含的内容；

extractContents()也會從文檔中移除範圍選區，有一點不同的是它會傳回被移除的文檔片段，以便插入到文檔中其他地方（注意，在使用appendChild()方法時，添加到文檔中隻是片段的子節點，非片段本身）

cloneContents()，建立範圍對象的一個副本，再其他地方插入該副本

插入DOM範圍中的内容

insertNode()可以向範圍選區開始處插入一個節點

range.insertNode(span);　　//插入節點

surroundContents()方法，環繞範圍插入内容，接收一個環繞範圍内容的節點，背景會執行3步：

提取出範圍中的内容（類似extractContent()）；

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

将文檔片段的内容添加到給定節點中。

　　...

var span=document.createElement("span");

span.style.backgroundColor="yellow";

range=surroundContents(span);

以上代碼給範圍選區添加黃色背景

折疊DOM範圍

collapse()方法，接收一個布爾值參數，表示折疊到範圍的哪一端，true表示折疊到範圍的起點，false則為終點，collapsed屬性确定範圍是否折疊完畢

range.collapse(true);　　//折疊到起點

alert(range.collapsed);　　//輸出true

檢測某個範圍是否處于折疊狀态，可以幫助我們确定範圍中兩個節點是否緊密相鄰