javascript

Chapter 11: DOM Levels 2 and 3
Complex Selection in IE Ranges
Complex ranges can be created in IE by moving the range selection around in specific increments. This
can be done using four methods: move() , moveStart() , moveEnd() , and expand() . Each of these
methods accepts two arguments: the type of unit to move and the number of units to move. The type of
units to move is one of the following string values:
❑
❑
❑
❑
“ character “ — Moves a point by one character
“ word “ — Moves a point by one word (a sequence of non–white - space characters)
“ sentence “ — Moves a point by one sentence (a sequence of characters ending with a period,
question mark, or exclamation point)
“ textedit “ — Moves a point to the start or end of the current range selection
The moveStart() method moves the starting point of the range by the given number of units,
whereas the moveEnd() method moves the end point of the range by the given number of units, as
shown in the following example:
range.moveStart(“word”, 2);
range.moveEnd(“character”, 1);
//move the start point by two words
//move the ending point by two words
You can also use the expand() method to normalize the range. The expand() method makes sure that any
partially selected units become fully selected. For example, if you selected only the middle two characters
of a word, you can call expand( “ word “ ) to ensure that the entire word is enclosed by the range.
The move() method first collapses the range (making the start and end points equal), and then moves
the range by the specified number of units, as shown in the following example:
range.move(“character”, 5);
//move over five characters
After using move() , the start and end points are equal, so you must use either moveStart() or
moveEnd() to once again make a selection.
Interacting with IE Range Content
Interacting with a range ’ s content in IE is done through either the text property or the pasteHTML()
method. The text property, used previously to retrieve the text content of the range, can also be used to
set the text content of the range. Here is an example:
var range = document.body.createTextRange();
range.findText(“Hello”);
range.text = “Howdy”;
If you run this code against the same Hello World code shown earlier, the HTML result is as follows:
< p id=”p1” > < b > Howdy < /b > World < /p >
Note that all the HTML tags remained intact when setting the text property.
360