March 14, 2011
Document Object Model (DOM) Improvements
Internet Explorer 9 features a significantly improved Document Object Model (DOM). In addition to more World Wide Web Consortium (W3C) DOM Level 2 (L2) and L3 support, Internet Explorer 9 features an enhanced DOM, as well as improved whitespace handling.
Introducing the Enhanced DOM
The enhanced DOM object types are now reflected in the F12 developer tools when running pages in Internet Explorer 9 Standards Mode. (For more information about the new F12 developer tools in Internet Explorer 9, see F12 Developer Tools in this document.) Rather than showing the legacy COM-based types (consisting of an assortment of Interfaces and Disp-objects), IE9 mode pages report the actual enhanced DOM object type names in use by the Chakra engine, which is aligned with the W3C DOM L2 and L3 standards (for instance, NodeList, DocumentType, HTMLBodyElement, and so on).
Parsing and Serializing XML to and from the DOM
While Internet Explorer already provided support for parsing and serializing XML to and from the native DOM, there was no easy way for script to access this functionality from within HTML documents. For that reason, Internet Explorer 9 adds support for the DOMParser and XMLSerializer interfaces. These interfaces are widely supported by other popular browsers.
The following script example shows how to parse a string into an XML document by using the DOMParser interface:
var parser = new DOMParser();
The following script example shows to serialize a DOM node (including nodes from HTML documents) to an XML string by using the XMLSerializer interface:
var serializer = new XMLSerializer();
Document Object Model (DOM) Levels 2 and 3
Internet Explorer 9 adds support for more of Document Object Model Level 2 (DOM L2) and Level 3 (DOM L3), and improves DOM L2 support over existing implementations in Internet Explorer. It also adds support for the WebIDL Working Draft specification.
Internet Explorer 9 introduces support for the following DOM features.
DOM Core (L2 and L3) and Views (L2)
Internet Explorer 9 adds support for many new DOM L2 Core APIs, including the following:
It also adds interoperable support for DOM namespaces, such as support for *NS methods and namespace-related properties (createElementNS, namespaceURI, localName, prefix, and others). Internet Explorer 9 also supports many of the most commonly used DOM L3 Core methods and properties:
Internet Explorer 9 fully supports both DOM L2 Views properties.
For more information, see the DOM Core and Views reference section on MSDN.
DOM Element Traversal
The Element Traversal specification defines the ElementTraversal interface. This interface enables navigation via script of the elements in a DOM tree, such as element nodes in HTML, XML, or SVG documents. Internet Explorer 9 introduces support for the ElementTraversal interface and its five properties.
DOM L2 and L3 Events
The DOM Events specifications describe the DOM event system, which enables registration of event handlers, describes the flow of events through a document tree, and defines contextual information for events. For more information about the event model, see Understanding the Event Model on MSDN.
One of the goals for the event system in Internet Explorer 9 is to align with the interoperable system specified by the W3C. This enables you to move away from Internet Explorer’s proprietary attachEvent model, removing the need to branch your code for different browsers.
Note DOM Mutation events are included for completeness, but are deprecated in the W3C standard.
DOM L2 HTML
Internet Explorer 9 adds support for the DOM L2 HTML APIs that were not available in previous versions of Internet Explorer, including HTML5 APIs such as getElementsByClassName and characterSet. Internet Explorer 9 has improved the object model in tables, particularly with respect to DOM operations for adding or removing elements.
The characterSet attribute returns the preferred MIME name of the character encoding of the current document.
DOM L2 Style
The DOM L2 Style specification defines APIs to programmatically access and change both the styles of individual elements and entire style sheets by removing or modifying rules. Previous versions of Internet Explorer were able to accomplish these tasks using proprietary methods; Internet Explorer 9 adds support for the standardized APIs defined in the DOM L2 Style specification. In addition, support has been added for standardized APIs that have no equivalent in Internet Explorer, such as the getComputedStyle method. See an example of the getComputedStyle method in action on the Internet Explorer Test Drive site.
For more information, see DOM Style on MSDN.
DOM L2 Traversal and Range
The DOM Range portion of the DOM L2 Traversal and Range specification defines a general way to select document content between a pair of boundary points. Boundary points are specified by a container (the parent element that contains the point) and an offset (the location in the container where the point lies). In conjunction with the HTML5 Selection interface, DOM Range capabilities enable functionality such as programmatically retrieving a range, selecting children, and deleting a selection.
Internet Explorer 9 supports all DOM L2 Range APIs, as well as all HTML5 Selection APIs, such as the already widely used setSelectionRange method.
For more information, see DOM Range on MSDN.
The DOM Traversal portion of the DOM L2 Traversal and Range specification defines a way for you to move around in a document and filter out nodes as necessary. Internet Explorer 9 supports both the two ways to traverse the DOM (NodeIterator and TreeWalker), and the two ways to filter nodes (whatToShow and NodeFilter) that are defined in the W3C specification.
For more information, see DOM Traversal on MSDN.
DOM Whitespace Handling
Exposing whitespace in the DOM has been handled differently in Internet Explorer than in other browsers; the lack of interoperability in this area has been frustrating to web developers. In previous versions, Internet Explorer collapsed whitespace it encountered, and did not place it into text nodes in the DOM. In Internet Explorer 9, whitespace is preserved and placed into text nodes within the DOM, as expected. This behavior is consistent with other major browsers.