欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript標準DOM Range操作全集第2/3頁

 更新時間：2007年01月09日 00:00:00   作者：  

復雜的DOM Range

建立復雜的DOM range需要使用setStart()和setEnd()兩個方法，這兩個方法有兩個參數(shù)：一個是一個節(jié)點(node)引用和一個偏移(offset)。
setStart方法節(jié)點的引用是startContainer，偏移則是startOffset；
setEnd()方法時，節(jié)點引用為endContainer，偏移就是endOffset。

使用這兩個方法與selectNode()和selectNodeContents()方法相似。比如，下面的useRanges()函數(shù)的前一個示例，可以使用setStart()和setEnd():

function useRanges() {
 var oRange1 = document.createRange();
 var oRange2 = document.createRange();
 var oP1 = document.getElementById("p1");
 var iP1Index = -1;
 for (var i=0; i < oP1.parentNode.childNodes.length; i++) {
 if (oP1.parentNode.childNodes[i] == oP1) {
 iP1Index = i;
 break;
 }
 }

 oRange1.setStart(oP1.parentNode, iP1Index);
 oRange1.setEnd(oP1.parentNode, iP1Index + 1);
 oRange2.setStart(oP1, 0);
 oRange2.setEnd(oP1, oP1.childNodes.length);
 //textbox assignments here
}

注意這個選擇節(jié)點時的代碼(oRange1)，你必須指定oP1父節(jié)點里所有childNodes集合里的一個索引。

而選擇內(nèi)容時的代碼(oRange2)，則不需要額外的考慮，

從剛才的例子來從這段HTML里(code <p id="p1"><b>Hello</b> World</p>)
選擇從hello中的llo開始到從World中的Wo開始的Range，我們用setStart()和setEnd()，很容易就可以做到。

首先，我們必須用常規(guī)的DOM方法得到文本節(jié)點的引用還有就是容器p1的引用。
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
說明：
文本Hello實際上是容器p1的孫子節(jié)點，所以我們可以用oP1.firstChild得到<b>元素，oP1.firstChild.firstChild也就是Hello文本節(jié)點的引用了，而World則就是容器p1的最后一個節(jié)點了。

下一步，建立range然后設(shè)置偏移(offset)：
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
說明：
對于setStart()，偏移(offset)為2，因為字母l在該文本節(jié)點中(即Hello中)的位置是2，(位置是從0開始計算的)，設(shè)置setEnd()方法中的偏移為3，原因同上，需要注意的是World前面有一個空格，空格也是占位置的。如圖：
uploads/200609/30_141714_domranges3.gif


注意：
(Mozilla DOM Range bug #135928)在 Mozilla低版本瀏覽器 執(zhí)行此Range方法時，如果setStart()和setEnd()都指向同一個文本節(jié)點會出現(xiàn)異常

用DOM Range做一些操作
當創(chuàng)建一個Range對象時，在Range里的所有對象之上，已經(jīng)創(chuàng)建了一個文檔的fragment節(jié)點。在這之前，Range對象必須合格證你選擇的這段Range是一個well-formed（格式良好）。
比如以面這段Range
uploads/200609/30_165636_domranges4.gif

很明顯的，在這里，并不是一個well-formed，上面說過了，當創(chuàng)建一個Range時，會自動產(chǎn)生一個fragment，在這里，framgment自動動態(tài)的添加一些元素，以保證Range的正確性：
<p><b>He</b><b>llo</b> World</p>
也就是自動加上了開始標簽<b>，使得整個Range變?yōu)?lt;b>llo</b> Wo，fragment的示意圖為：
uploads/200609/30_170131_domranges5.gif

當此fragment創(chuàng)建后，你就可以用Range的一些方法來操作它了。

最簡單的一個操作就是：deleteContents()方法，這個方法將刪除Range選中的部分，在上面的操作之后進行deleteContents()，那么余下的HTML就為：
<p><b>He</b>rld</p>
之所以加上閉合標簽</b>，上面也說了，也是Range為了確保它是well-formed。

extractContents()方法類似于deleteContents()，但具體操作不同，extractContents()是將選中的Range從DOM樹中移到一個fragment中，并返回此fragment，復制下面這些代碼然后在Mozilla Firefox里運行，看看結(jié)果你就明白了。——刪除的<b>llo</b> Wo作為一個fragment被添加到body的末端。
<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
var oFragment = oRange.extractContents();
document.body.appendChild(oFragment);
</script>

cloneContents()方法可以克隆選中Range的fragment，比如：
<p id="p1"><b>Hello</b> World</p>
<script>
var oP1 = document.getElementById("p1");
var oHello = oP1.firstChild.firstChild;
var oWorld = oP1.lastChild;
var oRange = document.createRange();
oRange.setStart(oHello, 2);
oRange.setEnd(oWorld, 3);
var oFragment = oRange.cloneContents();
document.body.appendChild(oFragment);
</script>

這個方法類似于extractContents()，但是不是刪除，而是克隆。

相關(guān)文章

最新評論