Processing and the DOM

This topic we begin looking at “pages,” or the actual visualization of the content in your directories. Before we make anything, however, we need to talk about how data gets from your keystrokes to a browser, and how that browser renders information for viewing.

For example, HTML is a language that describes the structure of a document intended for viewing through a browser. The browser’s processor identifies elements of the document by looking for tags embedded directly in the text. These elements are then parsed into the Document Object Model (DOM).

What is the DOM?

billboard with the words on it

The DOM is an interface to a document and stipulates how that document is accessed and changed by defining its structure in a logical way. The DOM represents these documents as nodes and objects on a tree structure so that programming languages such as JavaScript can modify the content.

This process becomes particularly useful when styling (or “decorating”) objects. Combined with some other processes (see “How Web Browsers Function”), the DOM helps connect styling wants to the appropriate structural elements.

What isn’t the DOM?

graphic of a person smiling

The DOM is not the same as your source code. Essentially, this means that the DOM is not a mirror of what you add to a .html document, for example. At times, the DOM may even help correct invalid HTML to aid in the rendering process.

The DOM is therefore not a webpage; it is an essential step in creating one, however, even though you may never explicitly interact with it.

development dom processor