javascript Range selectNode( ), selectNodeContents( )

Your choice of method impacts the way the range's startContainer and endContainer properties are filled. In the following sequence, you see what happens to the range and its properties when an element node and a text node are parameters to these methods. The initial HTML segment is:

<>One paragraph with a <span id="myspan">nested</span> element inside.</p>p

Selecting the span element (with the rng.selectNode(document.getElementById("myspan")) method) sets the range to:

<>One paragraph with a |<span id="myspan">pnested</spa>| element inside.</p>n

The Range object's properties report values as follows.

Using the rng.selectNodeContents(document.getElementById("myspan")) method to select the span element's contents sets the range to:

<>One paragraph with a <span id="myspan">|pnested</span> element inside.</p>|

The Range object's properties report values as follows.

Using the rng.selectNode(document.getElementById("myspan").firstChild) method to select the text node inside the span element sets the range to:

<>One paragraph with a <span id="myspan">|pnested</span> element inside.</p>|

Even though the node passed as a parameter is different (and a different node type), the new range selection looks the same as the previous one. In fact, due to the way the node tree is structured, the Range object's properties report identical values as follows.

Using the rng.selectNodeContents(document.getElementById("myspan")) method to select the contents of the text node inside the span element sets the range to:

<>One paragraph with a <span id="myspan">||nested</span> element inside.</p>p

In other words, the range collapses to an insertion point at the start of the text node (this may be a bug in Netscape 6), and the text node becomes the container, as shown in the following property enumeration.

Element nodes tend to be the most practical parameter values to pass to either method.

• Reference to any text or element in the document tree.

None.