"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).
The DOM standard is maintained by an organization called the World Wide Web Consortium, or W3C. They've created highly detailed documentation defining the DOM standard.
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 <html> 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."
The tree structure creates logical relationships between nodes, like a family tree. Each node can have a parent and ancestors from which it branches. They can have siblings. And the nodes can have children and descendants. Thinking in these terms helps a lot when using JavaScript and CSS to interact with the DOM.
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 <div> and <p>. CSS can also access the elements directly by referencing class and id names. Class styling gets applied to several elements so you can style them all at the same time. Conversely, id styling applies changes to only a single element.
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.
How JavaScript Interacts With the DOM
JavaScript has the most control over the document because JavaScript is an actual programming language with objects, flow control, variables, etc. The DOM provides several interfaces that allow JavaScript the ability to manipulate the document, elements, and other nodes.
JavaScript can add and remove nodes as well as change their style. And JavaScript can watch for events in the document, like hovering the mouse over an element, clicking, and pressing keys.
JavaScript can search and navigate the document tree in a very similar way to CSS. It's able to find elements by id and class. And it can retrieve lists of child elements as arrays.
The Future of Web Development and the DOM
The internet has changed a lot since the early days. In the early days, JavaScript was mostly used for special effects and simple data displays. Most websites weren't much more than digital brochures. AJAX changed all that, though.
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.
As the expectations of users grow, technology must keep up. JavaScript isn't the most powerful or fastest language. It also suffers from a handful of issues like floating-point number errors that make it less desirable for developers. This is where WebAssembly comes in.
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.