Call +91 9649695189
JavaScript Tutorial

DOM and Events

Select elements, update page content and respond to user events.

Concept

The DOM represents an HTML document as objects. querySelector and related APIs locate elements so JavaScript can read or update them.

Events such as click, input and submit let code respond to user actions. Prefer addEventListener so behavior stays composable.

Example

const button = document.querySelector("#start");
button.addEventListener("click", () => {
  document.querySelector("#status").textContent = "Started";
});
Type the example yourself and change at least one value. Small experiments reveal syntax and behavior faster than passive reading.

Practice Tasks

  1. Create a button that changes a heading.
  2. Read text from an input field on submit.
  3. Toggle a CSS class on click.

Key Takeaways

  • The DOM is the browser representation of the document.
  • Events connect user actions to behavior.
  • Keep selectors and event logic easy to trace.
Next
Promises, async/await and Modules →