Much of what JavaScript web developers do today is make rich experiences for users by manipulating the Document Object Model (DOM). Now that you've got the basics of JavaScript down, you're now going to get a chance to start to see your code come alive in the browser.
In this lesson, you'll be introduced to the concept of the DOM, and why it's so essential for you as a JavaScript developer.
What is the Document Object Model?
The Document Object Model (DOM) is a crucial concept for JavaScript web developers. You can imagine the DOM as a tree-like representation of all the content on a webpage. This includes everything you see, such as text, images, and buttons, as well as the HTML structure that you might not immediately see, like tags and attributes.
The DOM is created by the browser when a web page is loaded, transforming the HTML document into an object that can be manipulated using JavaScript.
What makes the DOM particularly powerful is its dynamic nature. In the lessons in this section, you'll learn how to interact with the DOM to create, modify, and delete elements on a webpage in real-time, without needing to reload the entire page. This means you can make web pages more interactive and responsive to user actions.
For instance, whenever you click a button to display more information on a webpage, JavaScript is likely working behind the scenes, using the DOM to update the webpage. Understanding and manipulating the DOM bridges the gap between static HTML/CSS and dynamic, interactive web experiences.
A Quick History of the DOM
The Document Object Model (DOM) was not available when JavaScript was first invented. JavaScript was created by Brendan Eich in 1995 and was initially designed as a simple scripting language for the Netscape Navigator. In its early versions, JavaScript's interaction with web pages was much more limited and less standardized.
The concept and implementation of the DOM as you'll see in these lessons evolved gradually. Early on, web developers had to rely on browser-specific methods to manipulate web page content, leading to many headaches.
The DOM was developed to provide a standardized way to access and manipulate the content, structure, and style of web documents, addressing these cross-browser challenges.
The DOM became a critical part of web development with the rise of dynamic HTML (DHTML) in the late 1990s. It started to gain widespread use with the introduction of DOM Level 1, which became an official recommendation by the World Wide Web Consortium (W3C) in 1998. This standardization played a key role in enabling the rich, interactive web experiences that are common today.
While JavaScript predates the DOM, the development and standardization of the DOM have been instrumental in harnessing JavaScript's capabilities to create rich, interactive web experiences.
Browser Rendering
When a web page loads, the browser processes the HTML to build the Document Object Model (DOM) and concurrently loads and parses CSS into the CSS Object Model (CSSOM), which together make up the render tree.
The render tree is used by the browser to compute the layout of each visible element, a process also known as reflow. Afterwards, the browser paints the pixels to the screen in the painting process.
JavaScript can modify both the DOM and CSSOM, these modifications can affect the render tree and may cause the browser to run layout and paint operations again, though you don't interact directly with the render tree itself.
When you get into more advanced JavaScript, you'll learn about the performance implications of modifying the DOM and CSSOM, and how to optimize your code to minimize the number of reflows and repaints. You'll also learn how to sequence your code to ensure that your code and the rendering process don't get in the way of each other.
The DOM's Structure
The DOM is often described as having a tree-like structure. In this structure, every element, attribute, and piece of text in the HTML of a webpage is represented as a node in a tree. At the root of this tree is a Document object, representing the entire web page. From this root, branches extend to different nodes, each signifying an element in the HTML document, such as <div>, <p>, or <h1>.
The document object is a property of the window object. You can access the document object using window.document or simply document from a JavaScript console in the browser.
Visualizing the DOM as a tree helps in understanding the hierarchical relationship between different parts of a web page. For example, consider an HTML document with a body that contains a div, which in turn contains a paragraph with text.
<body>
<div>
<p>Some text</p>
</div>
</body>
In the DOM tree, the body node is a direct branch from the root document node. The div would branch from the body, and the p would branch from the div. This parent-child relationship in the DOM tree is crucial for traversing and manipulating elements in JavaScript effectively.
This parent-child relationship is also crucial for effective CSS!
An Example of Using the DOM with JavaScript
In the following lessons you'll get more detailed examples of how to use JavaScript to manipulate the DOM. For now, consider a basic example:
<body>
<p>Click the button to change the text.</p>
<button>Click me!</button>
</body>
This HTML document contains a button that should change the text of the second paragraph. To do this, you'll need to use JavaScript to access the DOM and modify the text of the paragraph.
To interact with the paragraph using JavaScript, the id attribute is added to enable easy access via the document.getElementById() method. Similarly, the onclick attribute is added to the button to trigger a function event when it is clicked.
<body>
<p id="change-me">Click the button to change the text.</p>
<button onclick="changeText()">Click me!</button>
</body>
<script>
function changeText() {
let paragraph = document.getElementById("change-me");
paragraph.innerText = "The text has changed!";
}
</script>
In this example, you first use the document.getElementById() method to get the paragraph element with the id of change-me. You then use the innerText property to change the text of the paragraph.
Try it out! Load the example in a browser and click the button to change the text of the paragraph.
Summary: The DOM and Javascript
You've begun to unravel the exciting possibilities offered by the Document Object Model (DOM) in web development. In this lesson, you've:
- Got a grip on what the DOM is: a tree-like structure that represents the content of a webpage, allowing JavaScript to interact with and modify it dynamically.
- Learned the importance of the DOM in creating interactive and responsive web pages without full page reloads
- Understood the history of the DOM, and how it evolved alongside JavaScript to provide a standardized way for cross-browser page manipulation
- Became aware of the browser rendering process
- Grasped the concept of the DOM's tree-like structure
- Explored a basic example of manipulating the DOM with JavaScript.
As you dive deeper into DOM manipulation, remember that these fundamentals will serve as the foundation for making websites that not only look good but also feel alive and interactive. Keep experimenting and building, as practical applications will help cement your understanding even further.