KompoZer:

  • 0.7.10
  • 0.8b3

On this page:

Related Pages:

Go to TopDOM Explorer

The Document Object Model is the formal name for the logical structure of HTML documents. Behind the WYSIWYG interface, KompoZer uses the model to generate the HTML and CSS code that is saved in the files it produces. Being able to explore a page's DOM can help you understand how the page is constructed and debug any styling problems you may encounter.

The DOM Explorer is particularly useful when used in conjunction with the Split View pane, as then both the full HTML code of a single area of a page can be examined at the same time as the the detail of all the styling code affecting it, both inline and in any stylesheets linked to the page.

On initial launch of KompoZer a Sidebar is found on the left side of the program's Window. The sidebar can be made to appear and disappear by hitting F9 (Menu: VIEW > SHOW/HIDE > SIDEBAR). Initially, the siderbar shows the Site Manager, but click the "DOM Explorer" button at its base and the DOM Explorer rises to replace the Site Manager.

DOM Explorer showing HTML box

The DOM Explorer is in two parts. At the top, the Elements section reveals the structure of the HTML tags (Elements) used on the page. Clicking on any tag selects the contents of that tag in the main window and reveals any further tags nested within the one selected. Double-clicking on an element opens the "Advanced Property Editor" for the element concerned.

Within the Elements section the small [-] boxes that appear beside elements with contents nested within do not operate to close the tree structure as you might expect. There appears to be a minor idiosyncracy in the program, as to hide an element you need to click, not on its parent, but grandparent element.

DOM Explorer showing CSS

Beneath the Elements section is a further tabbed section revealing either the HTML attributes of the currently selected element or its CSS styles.

Within the HTML section, clicking on an attribute will open the Advanced Property Editor. Under the CSS tab, clicking on a property held in a stylesheet, whether internal or external, will open the "CSS Stylesheets" dialogue, while for inline styles the appropriate "Inline Styles" dialogue will open.

Much of the functionality of the upper part of the DOM Explorer is duplicated in KompoZer's status line. It's main advantage is that it reveals something about prior and following code and not just the currently selected item. This can be helpful when inspecting the overall structure of another author's page. (Hopefully, you understand the structure of your own pages!) It can also be helpful, on long pages, in navigating precisely to, for example, an element with a particular ID.

The lower part of the DOM Explorer can be extremely useful for exploring styling issues. Having selected an element in the upper part, the contents of the CSS tab will reveal, for example, both unnecessary duplicate styling rules that just bloat the code, and where conflicting rules may be overriding the intended effect, while the worse case scenario of HTML attributes affecting appearance, being shown under the HTML tab.

Go to Top Page updated: 15 April 2014