Events & DOM Manipulation

Example demonstrating event handling and DOM manipulation:

// Select button and paragraph elements
const button = document.getElementById('myButton');
const paragraph = document.getElementById('myParagraph');

// Add a click event listener to the button
button.addEventListener('click', () => {
  // Change the paragraph text and style on button click
  paragraph.textContent = "You clicked the button!";
  paragraph.style.color = 'blue';
});
          

This code demonstrates:

• Selecting HTML elements via getElementById.
• Adding event listeners to respond to user actions.
• Changing DOM content dynamically.
• Modifying CSS styles programmatically.

DOM (Document Object Model): The DOM is a programming interface for HTML documents. It represents the page so that programs can change the document structure, style, and content.

Events: Events are actions or occurrences that happen in the system, such as user interactions like clicks, key presses, or page loads. JavaScript can listen to these events and execute code in response.

Event Listeners: Functions that are called when an event occurs on a target element. They can be attached using methods like addEventListener.

DOM Manipulation: Involves changing the elements, attributes, and styles of the HTML document dynamically using JavaScript.

• Selecting elements with methods like getElementById, querySelector.
• Modifying content using textContent, innerHTML.
• Changing styles via the style property.
• Creating, appending, or removing elements dynamically.

• Interactive form validations and user feedback.
• Dynamic UI updates without page reloads.
• Building responsive navigation menus and modal dialogs.
• Games and animations that respond to user inputs.
• Single Page Applications (SPAs) that manipulate DOM to show/hide content.