javascript

Chapter 11: DOM Levels 2 and 3
Of course, just selecting sections of the document isn ’ t very useful unless you can interact with the
selection.
Interacting with DOM Range Content
When a range is created, internally it creates a document fragment node onto which all of the nodes in
the selection are attached. The range contents must be well formed in order for this process to take place.
In the previous example, the range does not represent a well - formed DOM structure because the
selection begins inside one text node and ends in another, which cannot be represented in the DOM.
Ranges, however, recognize missing opening and closing tags, and are therefore able to reconstruct a
valid DOM structure to operate on.
In the previous example, the range calculates that a < b > start tag is missing inside the selection, so the
range dynamically adds it behind the scenes, along with a new < /b > end tag to enclose “ He ” , thus
altering the DOM to the following:
< p > < b > He < /b > < b > llo < /b > world! < /p >
Additionally, the “ world! ” text node is split into two text nodes, one containing “ Wo ” and the other
containing “ rld! ” . The resulting DOM tree is shown in Figure 11 - 8 , along with the contents of the
document fragment for the range.
Document
Element p
Range
DocumentFragment
Element b
Element b
Text He
Text llo
Element b
Text wo
Text llo
Text wo
Text rld!
Figure 11-8
With the range created, the contents of the range can be manipulated using a variety of methods (note
that all nodes in the range ’ s internal document fragment are simply pointers to nodes in the document).
353