Understanding the DOM, Part 1
The DOM (pronounced like “Mom” or “Dome” depending on who you talk to) is one of the basic building blocks to understand when it comes to web development. Mozilla provides a good definition:
The Document Object Model (DOM) is a programming interface for HTML, XML and SVG documents. It provides a structured representation of the document (a tree) and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The DOM provides a representation of the document as a structured group of nodes and objects that have properties and methods. Nodes can also have event handlers attached to them, and once that event is triggered the event handlers get executed. Essentially, it connects web pages to scripts or programming languages. (my emphasis added)
I’ve emphasized the two key points:
- The DOM is provides a structured representation of the document (e.g. HTML page)
- The nodes of the DOM can have event handlers attached to them
Here’s a simple example that shows a typical type of DOM interaction, using a cljs wrapper of jQuery:
Here's our example text. Click me and I change colors.
If you right-click on the example text and select “Inspect Element” from the context menu, you’ll see the node (also called an element) in the DOM. Specifically, it is a
span with an id of
example-element. Because the DOM is “structured” (a tree), we can navigate to any node within the tree.
Our code gets the node with id
example-element, then adds
click-handler as an event handler. Whenever you click the text, a
click event occurs and our
click-handler is called. We first get the node, then toggle its color between red and blue.
Element ids SHOULD be unique on a given page. The spec says ids MUST be unique but browsers tend to be more accepting than they should. If you give multiple elements the same id, your code will probably work but your team will never want to work with you again.
We’ll fix the code in the next post.
* It’s not about code structure, using jQuery vs Google Closure, etc. It’s about principles.