javascript Range selectNode( ), selectNodeContents( )

selectNode( ), selectNodeContents( )

NN 6 IE n/a DOM 2

selectNode(nodeReference) selectNodeContents(nodeReference)

Sets the range's boundary points to encompass a node or just the node's contents. Despite the methods' names, no body text in the rendered document is highlighted.

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.

Property	Value	Description
startContainer	[object HTMLParagraphElement]	Start point is right before the span element.
startOffset	1	Start point is at the 2nd (zero-based index of 1) node inside the p element.
endContainer	[object HTMLParagraphElement]	End point is immediately after the span element.
endOffset	2	End point is at the 3rd (zero-based index of 2) node in the context of its endContainer p element.

Property	Value	Description
startContainer	[object HTMLSpanElement]	Start point is just inside the span element.
startOffset	0	Start point is at the 1st (zero-based index of 0) node inside the span element.
endContainer	[object HTMLSpanElement]	End point is immediately after the span element's content.
endOffset	1	End point is at a position where the 2nd (zero-based index of 1) node, if present, would be in the context of its endContainer span element.

Property	Value	Description
startContainer	[object HTMLSpanElement]	Start point is just inside the span element.
startOffset	0	Start point is at the 1st (zero-based index of 0) node inside the span element.
endContainer	[object HTMLSpanElement]	End point is immediately after the span element's content.
endOffset	1	End point is at a position where the 2nd (zero-based index of 1) node, if present, would be in the context of its endContainer span element.

Property	Value	Description
startContainer	[object Text]	Start point is at the beginning of the text node.
startOffset	0	Start point is at the 1st (zero-based index of 0) position of the text node.
endContainer	[object Text]	End point is collapsed.
endOffset	0	End point is collapsed.

Parameters

Reference to any text or element in the document tree.

Returned Value

None.

Previous: javascript Range setEnd( ), setStart( )

Next: javascript Range isPointInRange( )

Permanent URL: http://javascript.gakaa.com/range-selectnode-4-0-5-2-0-selectnodecontents-4-0-5-.aspx
Updated: Oct 16, 2008

jono

#1

2008-09-30

[Quote]

Im trying to get all the nodes within a user defined range - this makes sense to me - but does not work?

var i=0
x=new Array
e=o.document.getElementsByTagName("*")
while(e[i])
{
a=r.selectNode(e[i])
if(a)
x[x.length]=a
i++
}
vasu

#2

2010-12-15

[Quote]

Good

jono

vasu

1642,Nickname,Homepage or email,Comments here,Add comment