快捷導(dǎo)航

Javascript標(biāo)準(zhǔn)DOM Range操作全集第1/3頁

更新時(shí)間：2007年01月09日 00:00:00 作者：

2級DOM定義了一個(gè)createRange()方法，如果是按照DOM此標(biāo)準(zhǔn)的瀏覽器（IE并不是支持此標(biāo)準(zhǔn)的，但是IE里的屬性或方法卻遠(yuǎn)比標(biāo)準(zhǔn)中定義的多得多），它屬于document對象，所以創(chuàng)建一個(gè)range對象要這樣做：

var oRange = document.createRange();

如果你要檢測你的瀏覽器是否支持此標(biāo)準(zhǔn)Range對象，可以用hasFeature()方法來檢測：

var supportsDOMRanges = document.implementation.hasFeature("Range", "2.0");
if (supportsDOMRange) {
var oRange = document.createRange();
//range code here
}
Range對象進(jìn)行簡單的選擇
最簡單用Range進(jìn)行選擇，用selectNode()或者selectNodeContents()方法，這兩個(gè)方法只有一個(gè)接收參數(shù)，一個(gè)DOM節(jié)點(diǎn)。

selectNode()方法選擇全部節(jié)點(diǎn)，包括它的孩子，而selectNodeContents()選擇的節(jié)點(diǎn)只是它的孩子。如

<p id="p1"><b>Hello</b> World</p>
<script>
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNode(oP1);
oRange2.selectNodeContents(oP1);
</script>

oRange1和oRange2包含上面所說的兩種方法，但是看了下面的示圖相信你能很快明白這兩個(gè)方法的區(qū)別：

當(dāng)你創(chuàng)建了一個(gè)Range對象時(shí)，Range實(shí)例就會(huì)有以下的屬性：
startContainer — 返回range對象從何開始的節(jié)點(diǎn)對象（父節(jié)點(diǎn)的第一個(gè)節(jié)點(diǎn)）
startOffset — 返回Range開始的偏移量(offset)，如果startContainer是一個(gè)文本節(jié)點(diǎn)，注釋節(jié)點(diǎn)，或者是CDATA節(jié)點(diǎn)，這個(gè)屬性返回文本的偏移量，否則返回第一個(gè)節(jié)點(diǎn)的索引。
endCOntainer — 返回Range對象最后一個(gè)節(jié)點(diǎn)對象（父節(jié)點(diǎn)的最后一個(gè)節(jié)點(diǎn)）
endOffset — 返回Range結(jié)束時(shí)的偏移量(offset)特性與startOffset相同。
commonAncestorContainer — 返回第一個(gè)包含該Range對象的節(jié)點(diǎn)。

注：這些屬性均為只讀屬性(read-only)，startOffset和endOffset將在下文中有較詳細(xì)的解釋。

下面這段代碼將說明這些屬性，請?jiān)贛ozilla firefox里運(yùn)行（支持此標(biāo)準(zhǔn)的瀏覽器——DOM2級，IE里將無效）：

<html>
<head>
<title>DOM Range Example</title>
<script type="text/javascript">
function useRanges() {
var oRange1 = document.createRange();
var oRange2 = document.createRange();
var oP1 = document.getElementById("p1");
oRange1.selectNode(oP1);
oRange2.selectNodeContents(oP1);

document.getElementById("txtStartContainer1").value
    = oRange1.startContainer.tagName;
document.getElementById("txtStartOffset1").value =
    oRange1.startOffset;
document.getElementById("txtEndContainer1").value =
    oRange1.endContainer.tagName;
document.getElementById("txtEndOffset1").value =
    oRange1.endOffset;
document.getElementById("txtCommonAncestor1").value =
    oRange1.commonAncestorContainer.tagName;
document.getElementById("txtStartContainer2").value =
    oRange2.startContainer.tagName;
document.getElementById("txtStartOffset2").value =
    oRange2.startOffset;
document.getElementById("txtEndContainer2").value =
    oRange2.endContainer.tagName;
document.getElementById("txtEndOffset2").value =
    oRange2.endOffset;
document.getElementById("txtCommonAncestor2").value =
    oRange2.commonAncestorContainer.tagName;
}
</script>
</head>
<body><p id="p1"><b>Hello</b> World</p>
<input type="button" value="Use Ranges" onclick="useRanges()" />
<table border="0">
<tr>
<td>
<fieldset>
<legend>oRange1</legend>
Start Container:
    <input type="text" id="txtStartContainer1" /><br />
Start Offset:
    <input type="text" id="txtStartOffset1" /><br />
End Container:
    <input type="text" id="txtEndContainer1" /><br />
End Offset:
    <input type="text" id="txtEndOffset1" /><br />
Common Ancestor:
    <input type="text" id="txtCommonAncestor1" /><br />
</fieldset>
</td>
<td>
<fieldset>
<legend>oRange2</legend>
Start Container:
    <input type="text" id="txtStartContainer2" /><br />
Start Offset:
    <input type="text" id="txtStartOffset2" /><br />
End Container:
    <input type="text" id="txtEndContainer2" /><br />
End Offset:
    <input type="text" id="txtEndOffset2" /><br />
Common Ancestor:
    <input type="text" id="txtCommonAncestor2" /><br />
</fieldset>
</td>
</tr>
</table>
</body>
</html>

上面的代碼將不作注釋了，有什么問題，在評論中留言。

Range中還有一些其它的方法：
setStartBefore(node) — 設(shè)置Range的相對于node節(jié)點(diǎn)的起始位置
setStartAfter(node) — 同上
setEndBefore — 設(shè)置Range的相對于node節(jié)點(diǎn)的結(jié)束位置
setEndAfter — 同上

12 3 下一頁閱讀全文

您可能感興趣的文章: