javascript

Chapter 11: DOM Levels 2 and 3
The TreeWalker type also has a property called currentNode that indicates the node that was last
returned from the traversal via any of the traversal methods. This property can also be set to change
where the traversal continues from when it resumes, as shown in this example:
var node = walker.nextNode();
alert(node === walker.currentNode); //true
walker.currentNode = document.body; //change where to start from
Compared to NodeIterator , the TreeWalker type allows greater flexibility when traversing the DOM.
There is no equivalent in IE, so cross - browser solutions using traversals are quite rare.
Ranges
To allow an even greater measure of control over a page, the DOM Level 2 Traversal and Range module
defines an interface called a range . A range can be used to select a section of a document regardless of node
boundaries (this selection occurs behind the scenes and cannot be seen by the user). Ranges are helpful
when regular DOM manipulation isn ’ t specific enough to change a document. DOM ranges are supported
in Firefox, Opera, Safari, and Chrome. IE implements ranges in a proprietary way.
Ranges in the DOM
DOM Level 2 defines a method on the Document type called createRange() . In DOM - compliant
browsers, this method belongs to the document object. You can test for the range support by using
hasFeature() or by checking for the method directly. Here is an example:
var supportsRange = document.implementation.hasFeature(“Range”, “2.0”);
var alsoSupportsRange = (typeof document.createRange == “function”);
If the browser supports it, a DOM range can be created using createRange() , as shown here:
var range = document.createRange();
Similar to nodes, the newly created range is tied directly to the document on which it was created and cannot
be used on other documents. This range can then be used to select specific parts of the document behind the
scenes. Once a range has been created and its position set, a number of different operations can be performed
on the contents of the range, allowing more fine - grained manipulation of the underlying DOM tree.
Each range is represented by an instance of the Range type, which has a number of properties and
methods. The following properties provide information about where the range is located in the
document:
❑
❑
startContainer — The node within which the range starts (the parent of the first node in the
selection).
startOffset — The offset within the startContainer where the range starts. If
startContainer is a text node, comment node, or CData node, the startOffset is the
number of characters skipped before the range starts; otherwise, the offset is the index of the
first child node in the range.
349