Lesson 17 of 3352%
(Progress persistence is disabled until Phase 9)
JavaScript
Intermediate
20 min
Introduction to the DOM
Understand the Document Object Model.
Learning Objectives
- The window and document objects
Introduction to the DOM
Welcome to this lesson on Introduction to the DOM. JavaScript is the programming language of the web, and introduction to the dom is a fundamental piece of that ecosystem.
Explanation
When your browser loads a web page, the HTML creates the structure, the CSS creates the style, and JavaScript creates the interactivity. JavaScript can update both HTML and CSS in real-time.
Code Examples
Here is a simple snippet demonstrating this concept:
const newDiv = document.createElement("div");
body.appendChild(newDiv);\n```
### Explanation of Code
In the example above, we define the logic required to implement the concept, and then execute it. The JavaScript engine parses this syntax and runs it.
<Callout type="warning">
**Common Mistake:** Watch out for syntax errors! Missing a bracket or a semicolon can sometimes break your entire script.
</Callout>
### Try It Yourself
Put this into practice! The BrowserCode runtime allows you to execute JavaScript securely in your browser.
<TryItButton />
### Key Takeaways
- JavaScript makes pages interactive.
- Always check your browser console for errors.