BACK_TO_ROOT
MODULE 03
DOM MANIPULATION
The Document Object Model is the bridge between JavaScript and HTML. It allows your code to change the page content, style, and structure in real-time.
DOM_CONTROL_PANEL
CONNECTED
BROWSER_VIEWPORT
Hello World
JS_CONSOLE
// Select element
const el = document.getElementById('target');
const el = document.getElementById('target');
el.style.color
= "#FF4500"
el.innerText
=
el.style.display
=
el.style.scale
= 1
Live connection established
Selection
Before you can change an element, you must find it.
document.getElementById('id')
document.querySelector('.class')Modification
Once selected, you can change its properties.
element.style.color = 'red'
element.innerText = 'Hello'Events
React to user actions like clicks or typing.
element.addEventListener('click', handler)