The DOM made simple
In this article, we’re diving into the essence of the DOM and its role in enriching modern websites on any browser. Consider this a straightforward path to grasp what the DOM really is and to guide you through the process of ‘manipulating the DOM’ with confidence.
What is the DOM?
When discussing the DOM, let’s consider a statement from the W3C that sheds light on what the DOM really is, thanks to its connection with the World Wide Web Consortium:
“The DOM is a W3C (World Wide Web Consortium) standard.”
It outlines a framework for interacting with documents:
“The W3C Document Object Model (DOM) is a platform- and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.”
In essence, the DOM serves as a “standard” for how browsers should engage with documents, particularly HTML documents in our context. Picture this narrative:
Imagine someone attempting to create a web browser like any other application developed out there. Indeed, the Chrome browser you use daily functions similarly to applications such as Spotify and YouTube. Spotify envelops you in a world of music, and YouTube animates videos, but what unique role does a browser play? It unlocks access to the global expanse of information, to the websites created by people everywhere.
When someone develops a browser, such as Chrome, the primary function of this application is to retrieve and display HTML documents for you. Although these web pages appear styled and visually appealing, at their core, they are about delivering the information, content, and various other resources you seek on the internet. This allows you to connect with a vast array of digital experiences. I came across an illustrative image that perfectly captures what a browser is designed to do:
In the depicted image, the browser requests specific information from a server, which is then returned to you as a response. When someone develops a browser, their aim is to offer the same functionality as existing browsers like Chrome and Safari. This means providing access to websites you wish to explore by typing a URL into the search box. The process isn’t arbitrary; there’s a set of programmed rules ensuring that your experience on this new browser mirrors that of any other browser
When we talk about ‘programmed rules,’ we’re essentially saying that a browser needs to behave in a way that aligns with your expectations, just like any other app does what you anticipate it will do. Delivering interactive websites, where ‘interactive’ means you get to click, scroll, engage, and change things. This is where the DOM, or Document Object Model, comes into play. It’s what we call a ‘platform’ and ‘language-neutral interface’:
Just like Spotify is our favorite hub for music, consider the DOM as the essential system for browsers. It’s important for ensuring that when browsers, such as Google Chrome, process those HTML documents someone else has crafted — because, let’s not forget, websites are essentially files created by someone — they do so using a ‘standard’ approach. This ensures that regardless of the website you’re exploring, your experience remains consistent, interactive, and uniformly standard.
DOM as an application
Let’s keep exploring the DOM as both an application and a platform. The DOM is a technology that browsers leverage to transform HTML files and other documents. Imagine, if you will, the browser as a user who has the DOM installed on its device (figuratively speaking, since browsers don’t actually use phones). The browser taps into the DOM ‘app’ whenever it receives a collection of files a user has requested.
The DOM is essentially a platform that follows a standardized method to transform files, resulting in what we know as the DOM tree. This process is pretty complex so we wont go into the entire aspect but heres an article if you’re curious. At its core though, it involves taking all the elements from an HTML file and converting them into programmable objects. These objects become something you can manipulate with programming languages like Python, JavaScript, or any other language. This is what the W3C refers to when they describe the DOM as a “language-neutral interface” — it’s designed to work across any programming language, making the elements of a web page accessible and interactive for developers. Below is an example of this:
<html>
<head>
<title>My document</title>
</head>
<body>
<h1>Header</h1>
<p>Paragraph</p>
</body>
</html>
This serves as an illustrative example to help you grasp how HTML is interconnected with its elements in a hierarchical structure that establishes node-like relationships. Below is a detailed example showcasing what’s truly happening behind the scenes (the below is an example in JS):
The example provided above might not be the most accurate in detail, but it closely illustrates the concept. The primary aim here is to demonstrate how the DOM acts as a framework for transforming HTML into programmable objects. This transformation allows us to interact with HTML elements through code, enhancing the website’s interactivity and enabling us to do more than just style and layout.
DOM in sum
To summarize, the DOM acts as a critical interface that allows browsers to transform static HTML documents into dynamic, interactive web pages. It essentially converts HTML elements into programmable objects, enabling developers to manipulate these elements using code, such as Python or JavaScript. This process enhances a website’s functionality far beyond mere styling and layout, facilitating user interactions and dynamic content updates. The steps of the flow are below:
HTML Creation: The HTML code is written by developers. This code describes the structure and content of a webpage, including text, links, images, and other elements.
- Browser Interpretation: When you visit a website, your browser (e.g., Chrome, Firefox, Safari) fetches the HTML document and reads (or “parses”) it. The browser understands this HTML and knows how to process it.
- DOM Model Creation: As the browser parses the HTML, it constructs the Document Object Model (DOM). The DOM is a tree-like representation of the webpage’s structure. It represents the document as nodes and objects, allowing programming languages like JavaScript to interact with the webpage’s content and structure.
- Rendering: Once the DOM is built, the browser will render the webpage on the screen. This process involves calculating the layout of each element based on the DOM and the styling information from CSS. Then, the browser paints the webpage on the screen for the user to see.
DOM in Action
Open your preferred code editor, such as VS Code, and create a new HTML file. Then, insert the following code snippet into the file. After adding the code, use the Live Server extension (if you have it installed) to preview the file in your web browser.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="header">Hello, World!</h1>
<button id="changeTextBtn">Change Text</button>
</body>
</html>In preview, you should see something like this on the screen:
What just occurred is twofold: when a webpage loads, the visual presentation of the HTML comes to life on your screen, showcasing the website’s layout, colors, and design as intended for the viewer. Simultaneously, behind the scenes, the HTML content is loaded into the browser as an object model, laying the foundation for how the page behaves and interacts with user inputs.
Using the inspection tool
If you right-click on the page you’re viewing and select “Inspect” (the shortcut is Cmd+Option+I on Mac and Ctrl+Shift+I on PC), you can navigate to the "Elements" tab. Here, you'll see what appears to be the HTML structure. However, remember, this is a representation created by the browser. To demonstrate this, head over to your console and enter the following command:
If you click enter, you will notice the following appear:
If you open up the HTMLCollection, you will notice this:
We wont go into details everything that can be seen but in summary, this output represents an HTMLCollection, a type of object in JavaScript used to hold a collection of HTML elements from the DOM. In this particular instance, the HTMLCollection contains three elements:
- An
<h1>element with the idheader - A
<button>element with the idchangeTextBtn - A
<script>element
The HTMLCollection also provides named access to elements that have an id, as shown with header: h1#header and changeTextBtn: button#changeTextBtn, allowing you to directly access these elements using their ID as a property of the collection. The length property indicates the total number of elements in the collection, which is 3 in this case.
Accessing from the browser
If we wanted to access or manipulate a specific element directly from the console in the developer tools, we could use the following approach:
document.getElementById('elementId');For instance, if you’re aiming to select the <h1> element with the id header, you would enter
document.getElementById('header');
This command returns the <h1> element, allowing you to interact with it directly from the console. You can then modify its properties, styles, or content as needed.
Modifying from the browser
To modify the <h1> element you've selected, you can directly change its properties through the console. Here's how you might change the text content and style of the <h1> element with the id header:
// Select the <h1> element
let headerElement = document.getElementById('header');
// Change the text content
headerElement.textContent = 'New Title Here!';
// Change the style, for example, color
headerElement.style.color = 'blue';
When you run these lines in the console, the <h1> element on the page will update to display "New Title Here!" in blue color. This demonstrates how you can interact with and modify webpage elements in real-time using the browser's developer tools console.
Adding a JS file to your program
To demonstrate modifying your webpage using an external JavaScript file, follow these steps:
Step 1: Create a JavaScript File
Create a new file and name it script.js using your preferred code editor, ensuring it's saved in the same directory as your HTML file. For this example, we'll focus solely on JavaScript, so we won't be adding any CSS. However, it's important to note that while CSS primarily alters the appearance of HTML content, JavaScript allows for more dynamic interaction with the HTML through programming.
Step 2: Link the JavaScript File to Your HTML
In your HTML file, add a <script> tag right before the closing </body> tag to link to the script.js file. It should look like this:
<script src="script.js"></script>
</body>Step 3: Check that HTML and JS file are linked
To ensure your app.js file is properly linked and executing in conjunction with your HTML file, insert a console log statement at the beginning of your app.js file like so:
console.log("Hello I'm from the JS file!");This line of code will output “Hello I’m from the JS file!” to the browser’s console, confirming that the app.js file is successfully connected and running. To view this message, open your web browser's developer tools and navigate to the console tab after loading your HTML page.
Step 4: Write Your JavaScript Code
Open script.js in your code editor and add the following JavaScript code:
// Change the background color of the body
document.body.style.backgroundColor = 'lightblue';
// Change the text content of the h1 element
document.getElementById('header').textContent = 'Welcome to My Page!';
// Change the color of the h1 element
document.getElementById('header').style.color = 'darkblue';You have successfully executed JavaScript on the DOM. By adding code to your JavaScript file, as soon as your browser loads your webpage, it interprets the JavaScript commands and applies them to the page. This dynamic interaction modifies the webpage in real-time based on the instructions you’ve provided in the script. Whether it’s changing styles, adding content, or reacting to user actions, your JavaScript code directly influences the DOM
More Practice
Here are the different methods and way for manipulating the DOM with code:
Search/Query/Read Functions
document.querySelector(selector)-Selects the first element that matches the specified CSS selector.
const firstButton = document.querySelector('button');2. document.querySelectorAll(selector)- Selects all elements that match the specified CSS selector and returns them as a NodeList.
const allButtons = document.querySelectorAll('.btn');3. document.getElementById(id) — Selects an element by its unique ID.
const headerElement = document.getElementById('header');4. document.getElementsByClassName(className)- Selects all elements that have the specified class name and returns them as an HTMLCollection.
const highlightedTexts = document.getElementsByClassName('highlight');5. document.getElementsByTagName(tagName)-Selects all elements with the specified tag name.
const allDivs = document.getElementsByTagName('div');Create and Append Elements
document.createElement(tagName)-Creates a new element with the given tag name.
const newDiv = document.createElement('div');Explanation: This line of code creates a new <div> element and stores it in the variable newDiv. The element is not yet visible in the document because it has not been added to the DOM.
2. parentNode.appendChild(childNode)- Appends a node as the last child of a parent node.
document.body.appendChild(newDiv);// Create a new unordered list (ul) element
const newList = document.createElement('ul');
// Manually create and append 3 list items (li) to the unordered list
for (let i = 1; i <= 3; i++) {
const listItem = document.createElement('li');
listItem.textContent = `Item ${i}`;
newList.appendChild(listItem); // Append each listItem to the newList
}
// Append the newList (ul) to the document body
document.body.appendChild(newList);Edit Elements
<!DOCTYPE html>
<html>
<head>
<title>DOM Manipulation Examples</title>
</head>
<body>
<div id="demo">
<p id="text">This is some text.</p>
</div>
<button id="changeText">Change Text</button>
</body>
</html>Now, let's use JavaScript to perform the operations listed:
1. element.innerText
document.getElementById('text').innerText = "Updated text content!";Changes the text inside the paragraph to "Updated text content!".
2. element.innerHTML
document.getElementById('demo').innerHTML = '<p>New HTML content!</p>';Replaces the content of the div with a new paragraph containing "New HTML content!".
3. element.setAttribute(name, value)
document.getElementById('changeText').setAttribute('data-status', 'active');Adds a new attribute data-status="active" to the button.
4. element.getAttribute(name)
console.log(document.getElementById('changeText').getAttribute('data-status'));Logs the value of data-status attribute of the button, which is "active".
5. element.removeAttribute(name)
document.getElementById('changeText').removeAttribute('data-status');Removes the data-status attribute from the button.
6. element.style.property
document.getElementById('text').style.color = "blue";Changes the text color of the paragraph to blue.
7. element.classList.add(className)
document.getElementById('text').classList.add('highlight');Adds the class highlight to the paragraph.
8. element.classList.remove(className)
document.getElementById('text').classList.remove('highlight');Removes the highlight class from the paragraph.
9. element.classList.toggle(className)
document.getElementById('text').classList.toggle('highlight');Toggles the highlight class on the paragraph, adding it if it's not there or removing it if it is.
Hopefully this is helpful. Please be on the lookout for DOM events.
