Back to Lessons

DOM Manipulation Basics

April 5, 2026

Document Object Model

Access and modify HTML elements dynamically.

DOM Example

<button id="myBtn">Click Me</button>
<div id="output"></div>

<script>
let btn = document.getElementById("myBtn");
let output = document.getElementById("output");

btn.addEventListener("click", function() {
    output.textContent = "Button clicked!";
    output.style.color = "blue";
    output.classList.add("highlight");
});
</script>

Key Points

  • getElementById, querySelector, querySelectorAll.
  • addEventListener for events.
  • Properties: textContent, innerHTML, style, classList.
  • Create elements: document.createElement().
Previous Lesson Next Lesson