↑
Main Page

DOM-compliant browser

</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>
Figure 10-2 displays the result when this example is run in a DOM-compliant browser, such as Mozilla.
As you can see,
oRange1
’s
startContainer
,
endContainer
, and
commonAncestorContainer
are equal
to the
<body/>
element because the
<p/>
element is wholly contained within it. Also,
startOffset
is
equal to 0, because the
<p/>
element is the first child of
<p/>
, and
endOffset
is equal to 1, meaning that
the range is over before the second child node (which is index 1).
Looking over at
oRange2
’s information gathered by
selectNodeContents()
,
startContainer
,
endContainer
, and
commonAncestorContainer
are equal to the
<p/>
element itself because you are
selecting its children. The
startOffset
is equal to 0, because the selection begins with the first child
node of
<p/>
. The
endOffset
is equal to 2 because there are two child nodes of
<p/>
:
<b/>
and the text
node
World
.
320
Chapter 10
13_579088 ch10.qxd 3/28/05 11:39 AM Page 320


JavaScript EditorFree JavaScript Editor     Ajax Editor


©

→