javascript

Chapter 11: DOM Levels 2 and 3
The first and second range share the same starting point, so comparing them using
compareEndPoints() returns 1. range1 ’ s end point occurs after range2 ’ s end point,
so compareEndPoints() returns 1 .
IE also has two additional methods for comparing ranges: isEqual() , which determines if two ranges
are identically equal, and inRange() , which determines if a range occurs inside of another range. Here
is an example:
var range1 = document.body.createTextRange();
var range2 = document.body.createTextRange();
range1.findText(“Hello World”);
range2.findText(“Hello”);
alert(“range1.isEqual(range2): “ + range1.isEqual(range2)); //false
alert(“range1.inRange(range2): “ + range1.inRange(range2)); //true
This example uses the same ranges as in the previous example to illustrate these methods. The ranges are
not equal because the end points are different, so calling isEqual() returns false. However, range2 is
actually inside of range1 , because its end point occurs before range1 ’ s end point but after range1 ’s start
point. For this reason, range2 is considered to be inside of range1 , so inRange() returns true.
Cloning an IE Range
Text ranges can be cloned in IE using the duplicate() method, which creates an exact clone of the
range, as shown in the following example:
var newRange = range.duplicate();
All properties from the original range are carried over into the newly created one.
Summary
The DOM Level 2 specifications define several modules that augment the functionality of DOM Level 1.
DOM Level 2 Core introduces several new methods related to XML namespaces on various DOM types.
These changes are relevant only when used in XML or XHTML documents; they have no use in HTML
documents. Methods not related to XML namespaces include the ability to create new instances of
Document programmatically as well as enabling the creation of DocumentType objects.
The DOM Level 2 Style module specifies how to interact with stylistic information about elements as
follows:
❑
❑
❑
❑
Every element has a style object associated with it that can be used to determine and change
inline styles.
To determine the computed style of an element, including all CSS rules that apply to it, there is a
method called getComputedStyle() .
IE doesn ’ t support this method but offers a currentStyle property on all elements that returns
the same information.
It ’ s also possible to access style sheets via the document.styleSheets collection.
362