Web Development - DOM Introduction
JavaScript and the DOM
The DOM (Document Object Model) is how JavaScript sees your web page. It represents the HTML as a tree of objects that you can read and change with code.
With the DOM, JavaScript can:
- Find elements on the page
- Change text and HTML
- Change CSS styles
- React to user actions (clicks, input, etc.)
What is the DOM?
When the browser loads an HTML page, it builds a DOM tree from it. Each HTML tag becomes a DOM node that JavaScript can work with.
Example
Simple HTML page:
<!DOCTYPE html>
<html>
<body>
<h1 id="title">My Page</h1>
<p id="demo">Original text</p>
</body>
</html>
Try it Yourself »
In the DOM, the <h1> and <p> elements become objects that JavaScript can access and change.
Selecting Elements
To change something on the page, you first need to select it.
The easiest way is document.getElementById().
Example
Find an element and change its text:
<p id="demo">Hello</p>
<script>
const element = document.getElementById("demo");
element.innerHTML = "Hello JavaScript!";
</script>
Try it Yourself »
Here, document.getElementById("demo") finds the
element with id="demo" (the <p> elemenet), and innerHTML sets its content.
Tip: IDs should be unique. Use getElementById when you want to work with a specific element.
Changing Text and HTML
You can change
the text of an element with the innerHTML
property:
Example
Change text when the script runs:
<p id="demo">This will be replaced</p>
<script>
document.getElementById("demo").innerHTML = "New content from JavaScript.";
</script>
Try it Yourself »
This replaces the original text with new text written by JavaScript.
Changing Styles
You can change the CSS of an element using the style property.
Example
Change color and size with JavaScript:
<p id="demo">Watch my style change</p>
<script>
const p = document.getElementById("demo");
p.style.color = "blue";
p.style.fontSize = "20px";
</script>
Try it Yourself »
Here, JavaScript changes the text color and font size directly from the script.
Reacting to User Actions
JavaScript can run code when the user clicks a button or interacts with the page. You can connect HTML elements to functions.
Example
Change text when a button is clicked:
<p id="demo">Click the button</p>
<button onclick="changeText()">Click me</button>
<script>
function changeText() {
document.getElementById("demo").innerHTML = "Button was clicked!";
}
</script>
Try it Yourself »
When the button is clicked, the changeText() function runs and updates the paragraph.
Changing Attributes
You can also change attributes like src, href, or alt.
Example
Change the image source:
<img id="myImage" src="pic1.jpg" alt="Picture">
<script>
document.getElementById("myImage").src = "pic2.jpg";
</script>
Try it Yourself »
This changes the image file shown on the page.
Working with Classes
You can change the CSS classes of an element using classList.
This lets you add, remove, or toggle classes without touching the HTML directly.
Example
Toggle a highlight class on a paragraph:
<style>
.highlight {
background-color: yellow;
}
</style>
<p id="demo">Click the button to highlight this text.</p>
<button onclick="toggleHighlight()">Toggle highlight</button>
<script>
function toggleHighlight() {
const element = document.getElementById("demo");
element.classList.toggle("highlight");
}
</script>
Try it Yourself »
Each time you click the button, the highlight class is added or removed.
Example
Add and remove classes directly:
<style>
.error {
color: red;
}
.bold {
font-weight: bold;
}
</style>
<p id="message">Form not submitted.</p>
<script>
const msg = document.getElementById("message");
msg.classList.add("error", "bold");
</script>
Try it Yourself »
The paragraph now uses both the error and bold CSS classes.
Summary
- The DOM is the in-memory representation of your HTML page.
- Use
document.getElementById()to select an element. - Use
innerHTMLto change text or HTML content. - Use the
styleproperty to change CSS from JavaScript. - Use events (like button clicks) to run functions when the user interacts with the page.
Next, you will learn more about changing HTML and CSS with the DOM — adding, removing, and updating elements dynamically.
Next » Changing HTML with the DOM
