The Document Object Model — Explained — Part 2

In part 1, we said that the DOM is a standard for creating, reading, updating and deleting HTML elements. Elements are DOM objects which we can change. Let’s begin interacting with the DOM using DOM methods and properties.

The DOM API

All HTML elements in the DOM are objects and we can use JavaScript to perform CRUD operations against these objects.

Objects have settable properties and methods to do stuff.

Important! I recommend doing these examples through Chrome’s developer tools. DOM interaction using Chrome is quick and intuitive.

DOM Methods in Action

Figure 1 demonstrates DOM methods and properties in action.

Use Chrome’s developer tools to open up an about:blank page. Let’s edit the DOM directly from within the ‘Elements tab’ by right clicking within the HTML DOM-tree and selecting ‘Edit as HTML’ and then press Esc to bring up the console. Figure 1.

Figure 1 — Using DOM methods and properties to interact with the DOM. The DOM is a live tree-data-structure and changes to the DOM are instant.

Add a <p id="paragraph-one"> node to the DOM and use the method document.querySelector() to query the DOM for an element with the id="paragraph-one" .This method returns an Element object representing the element whose id property matches ‘paragraph-one’. Once we have this Element object, we can set the object’s innerHTML property to ‘Updating the DOM’.

document.querySelector() is a powerful method. It returns the first Element within the document that matches a valid CSS selector string or group of selectors. CSS selectors are strings to select and style element(s).

Remember! The DOM is a live-data-structure and DOM changes are instant!

The Infamous Document Object

The DOM is a tree-data-structure and sitting at the top of this tree is the document-object. Figure 2. The document-object represents the web-page and it owns the objects beneath it. Access to those objects is done through the document-object.

Figure 2 — The DOM tree

Before we explore the document-object, we need to look at the window-object. The window-object is part of the Browser Object Model (BOM). The BOM is an unofficial standard that browser vendors implement and is distinct from the DOM.

The window-object is present in all browsers and represents the browser’s window.

Any globally created variable, function or object is a member of the window-object. Global variables are properties and global functions are methods of the window-object. Also, the infamous document-object is a property of the window-object. This can be observed in Figure 3 as we expand the window-object to reveal the document-property.

If you observe Figure 3, note how powerful Chrome’s developer tools are. When we hover over the body within ‘active element’, Chrome highlights the body element in blue within the document. We could even store the active element as a reference for future use.

Also note, as we arrow down through the options, Chrome gives us an indication of what it is we are working with, such as f for functions, and values for properties such as about:blank for the baseURI. Spend some time here gaining familiarity with all the options. Some will be intuitive and others not so, but it is certainly worth exploration.

Figure 3 — Exploring the document-object

A great way to gain familiarity with the DOM is to just mess around. Let’s change the title of the page and see those changes apply in real-time. Figure 4.

Figure 4 — Changing the document’s title.

Have fun, play around. Let’s change the document’s bgColor to ‘red’. Figure 5.

Figure 5 — Changing the document’s bgColor to ‘red’.

Enough reading already, GO PLAY!

Part 3 coming soon.