Events and DOM Manipulation in JavaScript: A Beginner’s Guide with Examples

Events and DOM Manipulation in JavaScript
JavaScript provides powerful tools to interact with and manipulate the Document
Object Model (DOM). Events allow developers to respond to user interactions
such as clicks, keypresses, and mouse movements.

1. DOM Basics
Accessing DOM Elements

 getElementById: Retrieves an element by its id.

const element = document.getElementById("myElement");
console.log(element);

 getElementsByClassName: Retrieves elements by class name.

const elements = document.getElementsByClassName("myClass");
console.log(elements);

 getElementsByTagName: Retrieves elements by tag name.

const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs);

 querySelector: Retrieves the first element matching a CSS selector.

const firstDiv = document.querySelector("div");
console.log(firstDiv);

 querySelectorAll: Retrieves all elements matching a CSS selector.

const allDivs = document.querySelectorAll("div");
console.log(allDivs);

, 2. Manipulating DOM Elements
Changing Content

 innerHTML: Updates the HTML content.

element.innerHTML = "<strong>New Content</strong>";

 textContent: Updates only the text content.

element.textContent = "Plain text content";

Modifying Attributes

 setAttribute: Sets or modifies an attribute.

element.setAttribute("class", "newClass");

 getAttribute: Retrieves the value of an attribute.

console.log(element.getAttribute("id"));

 removeAttribute: Removes an attribute.

element.removeAttribute("class");

Styling Elements

 Inline CSS

element.style.color = "blue";
element.style.fontSize = "20px";

 Class Manipulation

element.classList.add("highlight");
element.classList.remove("highlight");
element.classList.toggle("active");