javascript

Chapter 11: DOM Levels 2 and 3
❑
❑
❑
endContainer — The node within which the range ends (the parent of the last node in the
selection).
endOffset — The offset within the endContainer where the range ends (follows the same
rules as startOffset ).
commonAncestorContainer — The deepest node in the document that has both
startContainer and endContainer as descendants.
These properties are filled when the range is placed into a specific position in the document.
Simple Selection in DOM Ranges
The simplest way to select a part of the document using a range is to use either selectNode() or
selectNodeContents() . These methods each accept one argument, a DOM node, and fill a range with
information from that node. The selectNode() method selects the entire node, including its children,
whereas selectNodeContents() selects only the node ’ s children. For example, consider the following
HTML:
< html >
< body >
< p id=”p1” > < b > Hello < /b > world! < /p >
< /body >
< /html >
This code can be accessed using the following JavaScript:
var range1 = document.createRange();
var range2 = document.createRange();
var p1 = document.getElementById(“p1”);
range1.selectNode(p1);
range2.selectNodeContents(p1);
The two ranges in this example contain different sections of the document: range1 contains the < p/ >
element and all its children, whereas range2 contains the < b/ > element, the text node “ Hello ” , and the
text node “ world! ” (see Figure 11 - 6 ).
range1
p id"p1"bHello/b world!/p
Figure 11-6
range2
When selectNode() is called, startContainer , endContainer , and commonAncestorContainer are
all equal to the parent node of the node that was passed in; in this example, these would all be equal to
document.body . The startOffset property is equal to the index of the given node within the parent ’ s
childNodes collection (which is 1 in this example — remember DOM - compliant browsers count white
space as text nodes), whereas endOffset is equal to the startOffset plus one (because only one node
is selected).
350