Home›Beginner›DOM Manipulation

🌳 DOM Manipulation

Control web pages dynamically by manipulating HTML elements with JavaScript

⏱️ 3.5 hours📚 9 sections⭐ Beginner

Your Progress

0 / 9 completed

📚 Lessons

🌳

What is the DOM?

The DOM (Document Object Model) is JavaScript's way of seeing and controlling your HTML! It treats your webpage as a tree of objects that you can read and change. This is how you make websites interactive!

💻 Code Example:

<!-- Your HTML -->
<div id="player">Hero</div>
<button id="powerBtn">Power Up!</button>

<script>
// JavaScript sees this as objects you can control!

// Get the player element
let player = document.getElementById("player");

// Get the button
let button = document.getElementById("powerBtn");

// The DOM is like a tree:
// document
//   └── html
//       ├── head
//       │   └── title
//       └── body
//           ├── div#player
//           └── button#powerBtn

// You can access and change ANYTHING on the page!
console.log(player.textContent);  // "Hero"
player.textContent = "Super Hero"; // Changes the text!

// The power of DOM manipulation:
// - Change text and HTML
// - Change styles and colors
// - Add/remove elements
// - Respond to clicks and events
// - Create interactive games!
</script>

💡 Tip: Try these examples in your browser console (F12) to see DOM manipulation in action!

📝 Key Points:

•DOM is JavaScript's view of HTML
•Everything is an object you can control
•Key to making interactive websites