JavaScript Examples Bible - UserWorks Technologies

Chapter 5 ✦ Body Text Objects (Chapter 19)
Example
Use The Evaluator (Chapter 13 in the JavaScript Bible) to see the splitText()
method in action. Begin by verifying that the myEM element has but one child node,
and that its nodeValue is the string “all”:
document.getElementById(“myEM”).childNodes.length
document.getElementById(“myEM”).firstChild.nodeValue
Next, split the text node into two pieces after the first character:
document.getElementById(“myEM”).firstChild.splitText(1)
Two text nodes are now inside the element:
document.getElementById(“myEM”).childNodes.length
Each text node contains its respective portion of the original text:
document.getElementById(“myEM”).firstChild.nodeValue
document.getElementById(“myEM”).lastChild.nodeValue
If you are using NN6, now bring the text nodes back together:
document.getElementById(“myEM”).normalize()
document.getElementById(“myEM”).childNodes.length
At no time during these statement executions does the rendered text change.
TextRange Object
Properties
boundingHeight
boundingLeft
boundingTop
boundingWidth
NN2 NN3 NN4 NN6 IE3/J1 IE3/J2 IE4 IE5 IE5.5
Compatibility ✓ ✓ ✓
Example
Listing 19-9 provides a simple playground to explore the four bounding properties
(and two offset properties) of a TextRange object. As you select text in the big
paragraph, the values of all six properties are displayed in the table. Values are also
updated if you resize the window via an onResize event handler.
Notice, for example, if you simply click in the paragraph without dragging a
selection, the boundingWidth property shows up as zero. This action is the equivalent
of a TextRange acting as an insertion point.
297
TextRange.boundingHeight