Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
The DOM (Document Object Model) is like a family tree for your web page. It converts your HTML into JavaScript objects that you can interact with!
Think of it this way: HTML is the blueprint, and the DOM is the actual house that JavaScript can walk through, modify, and interact with.
Your HTML code is just text. The browser reads it and creates objects.
The DOM converts HTML into objects JavaScript can read and change!
<h1>Hello</h1>, the DOM creates an object you can access with document.querySelector('h1')<html>
<body>
<h1>Welcome</h1>
<p>Hello World!</p>
</body>
</html>Before you can change anything, you need to find it first! Think of it like pointing at something before you can pick it up.
Finds the first matching element
document.querySelector('.box')Finds all matching elements
document.querySelectorAll('.box')Once you've selected an element, you can change it! Add content, remove elements, or create new ones.
Make new elements
createElement()Insert into page
appendChild()Delete elements
remove()Add or change element properties and CSS classes. This is how you control behavior and appearance!
Change element properties like href, src, id
element.setAttribute('href', 'url')Add/remove CSS classes
element.classList.add('active')Change colors, sizes, positions, and any CSS property! Make your page come alive with style changes.