Internet Explorer 9 Guide for Developers

  • Article

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 in Internet Explorer 9 improves the overall performance of Internet Explorer 9 Standards Mode (IE9 mode) by speeding up the script execution layer between “Chakra”, the new JavaScript engine, and the Trident layout engine, and by moving the entry points of the DOM into the Chakra engine. For more information about IE9 mode, see Improved Interoperability through Standards Support in this document. The enhanced DOM also simultaneously delivers the correct DOM inheritance object hierarchy as specified by the W3C DOM L2 and L3 specifications.

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).

The enhanced DOM in Internet Explorer 9 significantly advances the state of interoperability between Internet Explorer 9 and other browsers. It also simultaneously delivers performance gains in many scenarios, due mainly to DOM objects that are represented as native JavaScript objects.

The enhanced DOM extends a wide array of new capabilities provided by “Chakra”, the new JavaScript engine into the objects and APIs provided by the DOM, including:

  • Selective DOM object extensibility (through Object.preventExtensions)
  • DOM API mutability (by mutating the DOM API’s property descriptors or deleting properties entirely)
  • JSON support of DOM objects
  • Native JavaScript Object features via inheritance (hasOwnProperty, toString, etc.)
  • Native JavaScript Function features via inheritance (call, apply, bind)

These features unify the programming experience between the JavaScript engine’s native objects and the DOM. In addition the following new DOM features have been added:

  • W3C DOM exceptions: DOM exceptions are new types of error objects that are thrown as a result of DOM API failures. The error codes for these exceptions map to constants defined on the exception itself.
  • W3C DOM “const” properties (for instance, Node.ELEMENT_NODE): The const properties are simple fields that provide names for many common numerical return values from other DOM APIs. For example, the number returned by the nodeType DOM API can be compared against the constant to make more readable code: if (myElement.nodeType == Node.ELEMENT_NODE)

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();
var doc = parser.parseFromString("<test>Some XML</test>", "text/xml");

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();
var xmlString = serializer.serializeToString(doc);

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:

  • adoptNode
  • compareDocumentPosition
  • CDATASection
  • importNode
  • inputEncoding
  • isDefaultNamespace
  • isEqualNode
  • isSameNode
  • isSupported
  • lookupNamespaceURI
  • lookupPrefix
  • replaceWholeText
  • textContent
  • xmlEncoding
  • xmlStandalone
  • xmlVersion
  • wholeText

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.

getElementsByClassName

The getElementsByClassName method returns all element nodes that have class attributes matching the input string. Its functionality is similar to that of the getElementsByTagName method.

characterSet

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.