“The DOM” is a term that gets used a lot in front-end web design and development. It stands for “Document Object Model”, and it’s a fundamental part of websites.
As important as the DOM is, many people don’t understand it. In fact, you can program websites for years without learning much about it. But as front-end technology advances, understanding the DOM is becoming more important.
Understanding the DOM Contract
In object-oriented programming, there is a construct called an interface. An interface doesn’t do anything on its own. Instead, it creates a contract. It says that anything can interact with anything else, as long as it follows the rules of the interface contract.
Having an interface lets any part of a program interact with any other part of the program in a controlled and predictable way. The interface also makes it possible for one part of a program to work with any other part, even if it doesn’t know anything about the part of the program on the other side of the interface.
An interface is like an electrical outlet in your wall. Your device doesn’t need to know where the power is coming from as long as the voltage is correct. The transformer on the corner doesn’t need to know what it’s powering. It just needs to send electricity at the proper voltage to your house.
The DOM is an interface layer between the web page and the code that creates and changes it. When you visit a website, you’re seeing how the browser renders the DOM of that website. When you write HTML, you’re actually programming using the DOM’s API (programming interface).
At this point, you may be thinking they’re not doing a very good job. After all, there are so many problems caused by cross-browser compatibility issues.
The problem isn’t with the standard. It’s with the browsers themselves. Many browsers have added functionality to their DOM implementation that doesn’t comply with the W3C standards. Sometimes that functionality becomes popular and gets implemented into the DOM standard, forcing other browsers to catch up.
Another problem is that some people are still using older versions of browsers that don’t have the latest DOM standard built-in. And sometimes browsers don’t implement the standard correctly.
How The DOM Is Structured
You can think of the DOM like a tree. The element is the trunk, and all the elements inside of it are branches. When you nest HTML elements inside of a parent element, you’re actually creating branches off of that branch. The proper term for each branch is “node.”
How HTML Interacts With the DOM
The DOM is defined by creating a document object with the document interface. Your HTML code is the most direct way to create a document. HTML gives you a simple way to define the document without needing to do traditional programming.
If you’re just getting started with HTML, here are five tips to familiarize yourself with it.
HTML is simpler and more forgiving than traditional programming languages. It makes interacting with the DOM easy for beginner web designers.
How CSS Interacts With the DOM
Once your HTML has structured the DOM document, CSS can style that document. In order to do that, it needs to be able to find the elements you want to style. It does this in a few ways.
You can access document nodes by referencing elements by name, like
You can also access the family tree structure with CSS and fine-tune access for more control. CSS selectors let you choose multiple elements and gives you a bag of tricks for finding them. You can search for children by their ancestry, combinations of classes, and much more.
The Future of Web Development and the DOM
AJAX allows websites to update data displayed from a server on the fly without reloading the page. Before AJAX, every change to data could only be seen when the page was reloaded, or the user navigated to another page.
After AJAX, web apps became more and more popular. The internet is no longer a collection of simple static websites and a few high functionality apps, like eBay. Now the internet is almost a second operating system, full of highly functional apps.
WebAssembly brings many of the benefits of native code to the browser, including improved speed and better hardware access. It will let programmers use other languages to build websites like C++ and Rust.
But even with the vast improvements that WebAssembly will bring, the DOM will still be there, providing a consistent interface between the code and what’s displayed in the browser.