The DOM is the Document Object Model. The DOM is the convention for representing the various objects in HTML, XHTML and XML documents and the way the objects interact with each other. The DOM convention is cross-platform and language independent. The W3C DOM is the standard.

Understanding the DOM of a web page is important for applying proper CSS techniques. It is also important to understand the DOM for using JavaScript to manipulate the content and events for the web page. The DOM can be used by a multitude of programming languages.

The DOM provides a representation of the web page in a structured group of nodes and objects that have their own properties and methods.

DOM = Structure

Every time a browser loads a web page a DOM is created for that page. The DOM basically defines the logical structure of that page based on the various HTML elements that occur in the page, how the document is accesses and how the objects within the document are manipulated. If JavaScript is used to manipulate the elements on the page, the DOM is changed to represent the results of that manipulation.

CSS and the DOM

The CSS can style the various objects withing the <body> tags of the DOM. This styling can change the size, display and layout of the elements within the <body> tags.


The DOM does not define the semantics of HTML. The semantics are defined by the language itself. The DOM respects the language of HTML. The DOM does not state how to represent a <p> tag or and <img> tag, etc. The DOM does define the heirarchy of the HTML elements, something like a tree structure. This DOM structure defines the elements as a parent or child of other elements.

DOM and browsers

Browsers are used to access, interpret and display HTML web pages. The most popular browsers in use are: Chrome, Firefox, Internet Explorer, Safari and Opera. The browsers have different ways of implementing the DOM structure and different ways of complying with the W3C DOM. Remember the W3C standards are just the suggested way of representing web pages.