curriculum/challenges/english/blocks/lecture-working-with-the-dom-click-events-and-web-apis/67336894ae148431a870694d.md
Let's learn about the DOM and why it's so important for web development. DOM stands for Document Object Model. It's a programming interface that lets us interact with HTML documents.
With the DOM, you can add, modify, or delete elements on a webpage. You can even make your website interactive by making elements listen to and respond to events.
In the DOM, an HTML document is represented as a tree of nodes. Each node represents an HTML element from the HTML document:
<!DOCTYPE html>
<html lang="en">
<head>
<title>DOM Example</title>
</head>
<body>
<h1>What is the DOM?</h1>
<h2>Let's learn about the DOM</h2>
</body>
</html>
This is a diagram representing the basic DOM structure of our example:
Document
========
HTML
-----
- Head
- Title
- Body
- H1
- H2
Of course, this can be more detailed and complex based on the structure of the HTML markup of a webpage.
The HTML document is the root node in the DOM hierarchy. It has one child node, the html element. This is the root element of the HTML document, since all other nodes descend from it.
The html element has two children: head and body.
The head element contains metadata about the document. It provides essential information about the webpage.
The body element contains the visible content of the webpage.
You can access these elements with JavaScript, work with them in your code, and even modify them dynamically. That's the power of the DOM and web APIs.
To access these elements in JavaScript, you can use getElementById() and querySelector() methods. These methods are web APIs because they provide standardized ways to interact with the DOM using JavaScript.
With getElementById(), you can get an object that represents the HTML element with the specified id. Remember that ids must be unique in every HTML document, so this method will only return one Element object. Here you can see an example:
const container = document.getElementById("container");
This line of JavaScript code gets an element with the id value of container and assigns that object to a JavaScript constant. You must pass the id within quotation marks as an argument. If you log this object to the console, you will see it in the output:
:::interactive_editor
<div id="container">
<h1>Hello, World!</h1>
<p>Welcome to learning about the DOM.</p>
</div>
<script src="index.js"></script>
const container = document.getElementById("container");
console.log(container);
:::
querySelector() is broader than getElementById(). With querySelector(), you can get the first element in the HTML document that matches the CSS selector passed as argument.
In this example, you will get the element that matches the section selector:
:::interactive_editor
<section>
<h2>Section Title</h2>
<p>This is a section of the webpage.</p>
</section>
<script src="index.js"></script>
const sectionEl = document.querySelector("section");
console.log(sectionEl);
:::
If you want to select an element by its class name using querySelector(), you need to prefix the class name with a dot (.). Here's an example:
:::interactive_editor
<link rel="stylesheet" href="styles.css">
<div class="highlight">
<p>This content is highlighted.</p>
</div>
<script src="index.js"></script>
body {
background-color: lightgray;
}
.highlight {
background-color: yellow;
}
const highlightEl = document.querySelector(".highlight");
console.log(highlightEl);
:::
You also have other methods to match multiple elements, like getElementsByClassName() and querySelectorAll(). You'll learn more about them in future lessons.
By understanding how to use web APIs to manipulate the DOM efficiently, you can create powerful and interactive web applications.
What is the Document Object Model (DOM)?
A programming language used for web development.
Think about how the DOM represents the structure of an HTML document.
A collection of CSS styles.
Think about how the DOM represents the structure of an HTML document.
A tree-structured representation of an HTML document.
A method for creating dynamic web pages.
Think about how the DOM represents the structure of an HTML document.
3
Which of the following methods can be used to access an element by its id in JavaScript?
getElementById()
getElementsByClassName()
Consider how to target a specific element based on its unique identifier.
querySelectorAll()
Consider how to target a specific element based on its unique identifier.
createElement()
Consider how to target a specific element based on its unique identifier.
1
What is the primary purpose of the querySelector() method?
To create a new element in the DOM.
Think about how querySelector() is used to target an element.
To select an element based on a CSS selector.
To modify the content of an existing element.
Think about how querySelector() is used to target an element.
To remove an element from the DOM.
Think about how querySelector() is used to target an element.
2