selection | NN 6 IE 4(Win) DOM n/a | |||||||||||||||||
The selection object represents zero or more characters that have been explicitly selected in a document by the user or selected under script control. The objects are very different entities in the IE and Navigator browsers (observe compatibility ratings for properties and methods, below), and each has its own ways of providing script access to it. |
||||||||||||||||||
In IE for Windows, you create a selection object via the document.selection property, which returns a selection object. To perform substantive actions on the content of the selection object, you then generate a TextRange object from the selection object (via the selection object's createRange( ) method). Use TextRange properties and methods to interact with the content. To convert a TextRange object to a visibly selected stretch of text on the page, use the TextRange object's select( ) method. This close linkage with the TextRange object means that the IE selection object is so far limited to Win32 versions. The IE selection object can include selected text inside an input (of type text) and textarea element. |
||||||||||||||||||
In IE for the Macintosh, you don't have a selection object per se. Instead, it implements the Navigator 4 document.getSelection( ) method, which returns only the string contents of the selected text. |
||||||||||||||||||
Navigator 4 offers script access to the text selected in a document through the use of the document.getSelection( ) method. This method is deprecated in Netscape 6, and even displays a warning (less harmful than an error) in the JavaScript Console if you use the method. In its place, Netscape 6 implements a robust selection object that offers a long list of properties and methods to interact with the object. Most of this functionality was made available starting with Netscape 6.2, including the way to create a selection object: the window.getSelection( ) method. Notice that many properties and methods of the Netscape 6 selection object have analogs with the Range object specification. In fact, it is through the Range object that scripts can highlight even discontiguous text spans on the page: create and size a Range object; then add that Range to the highlighted text via the selection object's addRange( ) method. Netscape 6 selections (as with the Range object) operate only on body content, and not on text inside editable text boxes. |
||||||||||||||||||
Be aware that clicking on buttons in earlier browsers (including IE 5 for the Mac) deselects the current text selection. Therefore, all scripted action involving selections in these browsers must be triggered by onselect or onmouseup events, or functions invoked by a timer (see the window.setTimeout( ) method description in Chapter 12). More recent browsers maintain content selections while buttons are pressed. |
||||||||||||||||||
Object Model Reference | ||||||||||||||||||
|
||||||||||||||||||
Object-Specific Properties | ||||||||||||||||||
|
||||||||||||||||||
Object-Specific Methods | ||||||||||||||||||
|
||||||||||||||||||
Object-Specific Event Handler Properties | ||||||||||||||||||
None. |
anchorNode, focusNode | NN 6 IE n/a DOM n/a |
Read-only | |
Return a reference to the node where the user started (anchor) and ended (focus) the selection. Most typically, these are text node types. If the selection is set or extended via the addRange( ) method, these properties point to the node boundaries of the most recently added range. |
|
Example | |
var anchor = selectionRef.anchorNode; if (anchor.nodeType == 3 && anchor.parentNode.tagName == "td") { // process selection start inside a table cell } |
|
Value | |
Reference to a document tree node, or null if no selection. |
|
Default | |
null |
anchorOffset, focusOffset | NN 6 IE n/a DOM n/a |
Read-only | |
Return an integer count of characters or nodes from the beginning of the anchor or focus nodes of the selection (see anchorNode and focusNode properties). If the node is a text node, the offset unit is the character; if the node is an element node, the offset unit is the node. This behavior is similar to the offset properties of a Range object. Most typically, these values count characters within text node types. If the selection is set or extended via the addRange( ) method, these properties point to the node boundary offsets of the most recently added range. |
|
Example | |
var selStartOffset = selectionRef.anchorOffset; |
|
Value | |
Integer. |
|
Default | |
0 |
isCollapsed | NN 6 IE n/a DOM n/a |
Read-only | |
Returns Boolean true if the anchor and focus boundaries of a selection are identical. |
|
Example | |
if (selectionRef.isCollapsed) { // selection is an insertion point } |
|
Value | |
Boolean value: true | false. |
|
Default | |
true |
rangeCount | NN 6 IE n/a DOM n/a |
Read-only | |
Returns an integer count of Range objects (which may be discontiguous in Netscape 6) within the span of the selection. A manual selection by the user always contains one Range, but the addRange( ) method can tack on multiple, discontiguous ranges to the selection. To inspect each highlighted section's properties, use the getRangeAt( ) method. |
|
Example | |
var howMany = selectionRef.rangeCount; |
|
Value | |
Integer. |
|
Default | |
0 |
type | NN n/a IE 4(Win) DOM n/a |
Read-only | |
Specifies whether the current selection object has one or more characters selected or is merely an insertion point. |
|
Example | |
if (document.selection.type == "Text") { ... } |
|
Value | |
One of three constant values (as a string): None | Text | Control. The last one is possible only when HTML editing is engaged and control selections are possible. |
|
Default | |
None |
typeDetail | NN n/a IE 5.5(Win) DOM n/a |
Read-only | |
This property is supplied as a placeholder for other applications that may use the IE browser component. Such an application can provide additional selection type information as needed. |
addRange( ) | NN 6 IE n/a DOM n/a |
addRange(RangeReference) | |
Turns a Range into a highlighted selection on the page. You can add as many discontiguous ranges to the selection as your application requires. Each addition increments the selection object's rangeCount property. Ranges may also overlap in a selection. |
|
Parameters | |
|
|
Returned Value | |
None. |
clear( ) | NN n/a IE 4(Win) DOM n/a |
Deletes the content of the current selection in a document. For example, the event handler in the following tag deletes any selected text of the p element two seconds after the user starts making the selection: <p onselectstart="setTimeout('document.selection.clear( )',2000);>" |
|
Parameters | |
None. |
|
Returned Value | |
None. |
collapse( ) | NN 6 IE n/a DOM n/a |
collapse(nodeReference, offset) | |
Collapses the current selection to a location specified by the two parameters. Any previously highlighted selection returns to normal display. |
|
Parameters | |
|
|
Returned Value | |
None. |
collapseToEnd( ), collapseToStart( ) | NN 6 IE n/a DOM n/a |
Collapses the current selection to a location at the start (collapseToStart( )) or end (collapseToEnd( )) of the selection object. Any previously highlighted selection returns to normal display. If the selection consists of multiple ranges, the start or end boundary used for these collapse methods are at the outermost edges of the combined selection. After the collapse, the selection contains only one range. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
containsNode( ) | NN 6 IE n/a DOM n/a |
containsNode(nodeReference, entirelyFlag) | |
Returns Boolean true if the current selection object contains a node passed as a parameter. The second parameter is supposed to let you loosen or tighten the definition of contains, but the behavior of the method seems backward to the intended purpose of the flag. You can assure accuracy if you pass null as the second parameter, which forces the method to define containment as containing the node in its entirety. |
|
Parameters | |
|
|
Returned Value | |
Boolean value: true | false. |
createRange( ) | NN n/a IE 4(Win) DOM n/a |
Creates a TextRange object from the current selection object. After a statement like the following: var myRange = document.selection.createRange( ); |
|
scripts can act on the content of the selected text. |
|
Parameters | |
None. |
|
Returned Value | |
TextRange object. |
createRangeCollection( ) | NN n/a IE 5.5(Win) DOM n/a |
Creates a TextRange collection object. This must be in anticipation of IE supporting multiple, discontiguous selections in the future. |
|
Parameters | |
None. |
|
Returned Value | |
TextRange collection object. |
deleteFromDocument( ) | NN 6 IE n/a DOM n/a |
Removes the current selection from the document tree. The node hierarchy adjusts itself by obeying the same rules as Range.deleteContents( ). |
|
Parameters | |
None. |
|
Returned Value | |
None. |
empty( ) | NN n/a IE 4(Win) DOM n/a |
Deselects the current selection and sets the selection object's type property to None. There is no change to the content that had been selected. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
extend( ) | NN 6 IE n/a DOM n/a |
extend(nodeReference, offset) | |
Moves the end (focus) boundary of the selection to the designated document tree node and offset within that node. The start (anchor) point does not move with this method. |
|
Parameters | |
|
|
Returned Value | |
None. |
getRangeAt( ) | NN 6 IE n/a DOM n/a |
getRangeAt(rangeIndex) | |
Returns a reference to the range within a selection object whose zero-based numeric index matches the passed parameter. For contiguous selections, the parameter should be zero. But for discontiguous selections, the getRangeAt( ) method lets you retrieve each range that had been added to the selection for individual manipulation as a Range object. Use the selection.rangeCount property to derive the number of Range objects contained by the selection object. Invoking the method does not disturb the sequence of ranges within the selection. |
|
Parameters | |
|
|
Returned Value | |
Range object reference. |
removeAllRanges( ) | NN 6 IE n/a DOM n/a |
Removes all Range objects from the current selection (not from the document tree). The selection collapses, and the rangeCount property value changes to zero. |
|
Parameters | |
None. |
|
Returned Value | |
None. |
removeRange( ) | NN 6 IE n/a DOM n/a |
removeRange(rangeReference) | |
Removes a single Range object from the current selection (not from the document tree). If you have a multiple-range selection, you can iterate through all Range objects, inspect each for some criterion, and delete the one(s) you want with the following sequence: var oneRange; var sel = window.getSelection( ); for (var i = 0; i< sel.rangeCount; i++) { oneRange = sel.getRangeAt(i); if (oneRange. someProperty == someDiscerningValue) { sel.removeRange(oneRange); } } |
|
Parameters | |
|
|
Returned Value | |
None. |
selectAllChildren( ) | NN 6 IE n/a DOM n/a |
selectAllChildren(elementNodeReference) | |
Forces the selection object to encompass the element node passed as a parameter and all of its child nodes. This method is also a shortcut to using a script to select an element node. Using this method on an element node causes the anchor and focus nodes to be that element node. Should you pass a reference to a text node, the resulting selection is collapsed in front of the first character of the text node. Invoking this method on an existing selection replaces all ranges with the new range encompassing the element. |
|
Parameters | |
|
|
Returned Value | |
None. |
selectionLanguageChange( ) | NN 6 IE n/a DOM n/a |
selectionLanguageChange(RTLFlag) | |
Controls the cursor Bidi (bi-directional) level. |
|
Parameters | |
|
|
Returned Value | |
None. |
toString( ) | NN 6 IE n/a DOM n/a |
Returns a string containing only body content from the selection. Tags and attributes are ignored. |
|
Parameters | |
None. |
|
Returned Value | |
String value. |