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");
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");
