JavaScript DOM Manipulation

JavaScript DOM Manipulation

The DOM (Document Object Model) allows JavaScript to interact with HTML elements:

// Select elements
const button = document.getElementById("myButton");
const paragraph = document.querySelector(".text");

// Modify content
paragraph.textContent = "New content!";
paragraph.style.color = "blue";

// Add event listeners
button.addEventListener("click", function() {
    alert("Button clicked!");
});

// Create new elements
const newDiv = document.createElement("div");
newDiv.className = "highlight";
newDiv.textContent = "Dynamic content";
document.body.appendChild(newDiv);

Common DOM Methods:

• getElementById() - Select by ID
• querySelector() - Select by CSS selector
• addEventListener() - Attach event handlers
• createElement() - Create new elements