beginner25 min
DOM & Events
Manipulate HTML elements and respond to user interactions
What is the DOM?
The Document Object Model (DOM) is the browser's representation of your HTML page as a tree of objects. JavaScript can read and modify this tree to change what the user sees — in real time.
Selecting Elements
Output
Run your code to see output here
Changing Content
Once you have an element, you can change its text, HTML, or styles:
Output
Run your code to see output here
Events — Responding to Users
Events let you run code when something happens — a click, a keypress, a form submission.
Output
Run your code to see output here
Common Events
| Event | Fires When |
|---|---|
click | Element is clicked |
input | Input field value changes |
submit | Form is submitted |
keydown | A key is pressed |
mouseenter | Mouse enters element |
mouseleave | Mouse leaves element |
DOMContentLoaded | HTML is fully loaded |
Building a Simple Counter
Let's put it all together — DOM manipulation + events:
Output
Run your code to see output here
Check Your Understanding
Which method adds a CSS class to an element?
Exercise
Write code that selects the button with id 'magic-btn' and changes its text to 'Clicked!' when clicked.
Python will load on first run