# DOM Viewer Komodo IDE only

The Document Object Model (DOM) is an interface for dynamically accessing the content, structure and style of XML and HTML documents. Komodo's DOM Viewer tab displays the DOM nodes (e.g. elements and attributes) of the current document as a collapsible tree. The DOM Viewer lets you find, view and jump to any of these nodes quickly.

## Navigating the DOM Tree

Double-clicking on a node in the DOM Viewer moves the cursor to the corresponding node in the document.

The Locate current node button does two things:

- If the window focus is on the DOM Viewer, it moves the cursor in the editor tab to the node selected in the DOM Viewer.
- If the window focus is on the editor tab, it finds the node in the tree corresponding to the current cursor position in the document.

The Show/hide attributes button toggles the visibility of element attributes. Attributes are hidden by default.

## Filtering the DOM Tree

Entering text in the Filter box performs an XPath search on the nodes in the tree, limiting the tree view to matching nodes and their parents.

For example, when viewing an HTML document, entering `table` in the Filter box might limit the tree view to the `<table ...>` element and the parent `<body>` and `<html>` elements. If a node matching the search string is found in a collapsed branch, the branch is automatically expanded.

For documents that use namespace prefixes, like XSLT, use the format prefix:element-name in the search (e.g. xsl:template).

The Filter box uses the XPath syntax supported in Python's ElementTree.

## DOM Resources

More information on various aspects of the Document Object Model can be found here:

- W3C DOM Recommendations: The canonical source for DOM Technical Reports (specifications).
- What does each DOM Level bring?: Abstracts of the three DOM Level specs by Fabian Guisset.
- W3 Schools XML DOM Tutorial: A straightforward tutorial with links to an XML DOM object reference and examples. See also their HTML DOM Tutorial.