✨ JavaScript DOM Manipulation & Event Handling

The DOM (Document Object Model) lets you programmatically change HTML elements, attributes, and styles. Event handling lets you react to user interactions like clicks, typing, or hovering.

📚 Example: Change Text Content

const para = document.getElementById("myPara");
para.textContent = "Text changed with JavaScript!";

This text will change.

🔄 Example: Button Click Event

const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  alert("Button clicked!");
});

📝 Example: Input Event Handling

const input = document.getElementById("myInput");
const output = document.getElementById("inputOutput");

input.addEventListener("input", () => {
  output.textContent = "You typed: " + input.value;
});

⚡ Quick Tips

Use document.getElementById(), document.querySelector() to grab DOM elements.
Add event listeners with addEventListener for clicks, input, hover, and more.
Manipulate text, HTML, styles, and attributes dynamically with JS.
Use events to make pages interactive and responsive to user actions.