{"id":560,"date":"2025-05-19T10:52:05","date_gmt":"2025-05-19T10:52:05","guid":{"rendered":"https:\/\/buhave.com\/courses\/?p=560"},"modified":"2025-05-20T12:57:38","modified_gmt":"2025-05-20T12:57:38","slug":"dom-manipulation","status":"publish","type":"post","link":"https:\/\/buhave.com\/courses\/java-script\/dom-manipulation\/","title":{"rendered":"DOM Manipulation"},"content":{"rendered":"What is the DOM?<\/h2>\nDOM Meaning<\/h3>\n
The DOM (Document Object Model) is a programming interface that represents an HTML or XML document as a tree structure where each node is an object.<\/p>\n
In simple words:<\/strong><\/p>\nThe DOM connects web pages to programming languages like JavaScript, allowing you to change the page dynamically.<\/p>\n
Structure of the DOM<\/strong><\/p>\n\n- The whole web page becomes a tree of nodes.<\/li>\n
- Each HTML element (like <h1>, <p>, <div>) is a node in the tree.<\/li>\n
- There are different types of nodes:<\/li>\n
- Document node (the root, entire page)<\/li>\n
- Element nodes (tags like <p>, <img>)<\/li>\n
- Text nodes (text inside elements)<\/li>\n
- Attribute nodes (like class=”title”)<\/li>\n<\/ul>\n
Example:<\/strong> Simple HTML Page and DOM<\/p>\nHTML:<\/strong><\/p>\n<!DOCTYPE html><\/em>
\n<html><\/em>
\n<body><\/em>
\n<h1>Hello World<\/h1><\/em>
\n<p>Welcome to the DOM.<\/p><\/em>
\n<\/body><\/em>
\n<\/html><\/em><\/p>\nDOM Tree:<\/strong><\/p>\nDocument<\/em>
\n\u2514\u2500\u2500 html<\/em>
\n\u2514\u2500\u2500 body<\/em>
\n\u251c\u2500\u2500 h1<\/em>
\n\u2502 \u2514\u2500\u2500 “Hello World”<\/em>
\n\u2514\u2500\u2500 p<\/em>
\n\u2514\u2500\u2500 “Welcome to the DOM.”<\/em><\/p>\nThe DOM turns HTML into a structure that JavaScript can read and manipulate.<\/p>\n
How JavaScript Interacts with the DOM<\/h3>\n
You can use JavaScript to:<\/strong><\/p>\n\n- Select elements (getElementById, querySelector, etc.)<\/li>\n
- Change content (element.textContent, element.innerHTML)<\/li>\n
- Change styles (element.style.color = “red”)<\/li>\n
- Add or remove elements (appendChild, removeChild)<\/li>\n
- Handle events (clicks, typing, scrolling)<\/li>\n<\/ul>\n
Example:<\/strong> Changing Text Using the DOM<\/p>\n<h1 id=”title”>Hello<\/h1><\/em><\/p>\n<script><\/em>
\nconst heading = document.getElementById(“title”);<\/em>
\nheading.textContent = “Hello, DOM World!”;<\/em>
\n<\/script><\/em><\/p>\nThe <h1> content changes when the script runs.<\/p>\n
Why the DOM is Important<\/strong><\/p>\n\n- Dynamic updates without reloading the page.<\/li>\n
- Interactive websites (like buttons, forms, pop-ups).<\/li>\n
- Control over structure, style, and content of a webpage.<\/li>\n<\/ul>\n
Without the DOM, JavaScript could not manipulate HTML and webpages would be static.<\/p>\n
Quick Summary:<\/strong><\/p>\n\n\n\n| Topic<\/th>\n | Explanation<\/th>\n<\/tr>\n<\/thead>\n |
\n\n| DOM Definition<\/td>\n | Interface that represents HTML\/XML pages as trees<\/td>\n<\/tr>\n |
\n| DOM Purpose<\/td>\n | Connects web pages with programming languages<\/td>\n<\/tr>\n |
\n| DOM Structure<\/td>\n | Tree with nodes (Document, Element, Text, Attribute)<\/td>\n<\/tr>\n |
\n| JavaScript Role<\/td>\n | Access and change elements dynamically<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nSelecting elements (getElementById, querySelector, etc.)<\/h2>\nWhy Select Elements?<\/strong><\/p>\nSelecting elements means grabbing HTML elements using JavaScript so you can read, change, or manipulate them.
\nYou can modify text, style, attributes, or even react to user actions like clicks.<\/p>\n Common Methods to Select Elements<\/h3>\n1. GetElementById()<\/strong><\/p>\n\n- Purpose: Selects one element with a specific id.<\/li>\n
- Returns: A single element (or null if not found).<\/li>\n
- Fastest method for selecting.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst element = document.getElementById(“elementId”);<\/em><\/p>\nExample:<\/strong><\/p>\n<h1 id=”main-title”>Welcome!<\/h1><\/em><\/p>\nconst title = document.getElementById(“main-title”);<\/em>
\nconsole.log(title.textContent); \/\/ “Welcome!”<\/em><\/p>\nTip:<\/strong> IDs must be unique on a page.<\/p>\n2. getElementsByClassName()<\/strong><\/p>\n\n- Purpose: Selects all elements with a specific class name.<\/li>\n
- Returns: An HTMLCollection (looks like an array but not exactly).<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst elements = document.getElementsByClassName(“className”);<\/em><\/p>\nExample:<\/strong><\/p>\n<p class=”info”>Info 1<\/p><\/em>
\n<p class=”info”>Info 2<\/p><\/em><\/p>\nconst infoItems = document.getElementsByClassName(“info”);<\/em>
\nconsole.log(infoItems.length); \/\/ 2<\/em><\/p>\nAccess with index infoItems[0], infoItems[1].<\/p>\n 3. getElementsByTagName()<\/strong><\/p>\n\n- Purpose: Selects all elements of a specific tag (like p, div, h1).<\/li>\n
- Returns: An HTMLCollection.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst paragraphs = document.getElementsByTagName(“p”);<\/em><\/p>\nExample:<\/strong><\/p>\n<p>Paragraph 1<\/p><\/em>
\n<p>Paragraph 2<\/p><\/em><\/p>\nconst allParagraphs = document.getElementsByTagName(“p”);<\/em>
\nconsole.log(allParagraphs.length); \/\/ 2<\/em><\/p>\n4. querySelector()<\/strong><\/p>\n\n- Purpose: Selects the first element that matches a CSS selector.<\/li>\n
- Returns: A single element (or null if none found).<\/li>\n
- Very powerful and flexible.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst element = document.querySelector(“selector”);<\/em><\/p>\nExample:<\/strong><\/p>\n<div class=”box”>Box 1<\/div><\/em>
\n<div class=”box”>Box 2<\/div><\/em><\/p>\nconst firstBox = document.querySelector(“.box”);<\/em>
\nconsole.log(firstBox.textContent); \/\/ “Box 1”<\/em><\/p>\nCSS Selectors:<\/strong> IDs (#id), classes (.class), tags (div), attributes ([type=”text”]).<\/p>\n5. querySelectorAll()<\/strong><\/p>\n\n- Purpose: Selects all elements that match a CSS selector.<\/li>\n
- Returns: A NodeList (can use forEach).<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nconst elements = document.querySelectorAll(“selector”);<\/em><\/p>\nExample:<\/strong><\/p>\n<p class=”highlight”>First<\/p><\/em>
\n<p class=”highlight”>Second<\/p><\/em><\/p>\nconst highlights = document.querySelectorAll(“.highlight”);<\/em>
\nhighlights.forEach(item => console.log(item.textContent));<\/em><\/p>\nHTMLCollection vs. NodeList<\/strong><\/p>\n\n\n\n| Feature<\/th>\n | HTMLCollection<\/th>\n | NodeList<\/th>\n<\/tr>\n<\/thead>\n | \n\n| Returned by<\/td>\n | getElementsByClassName, getElementsByTagName<\/td>\n | querySelectorAll<\/td>\n<\/tr>\n | \n| Live Update<\/td>\n | Yes (updates if DOM changes)<\/td>\n | No (static snapshot)<\/td>\n<\/tr>\n | \n| forEach() Method<\/td>\n | (needs conversion)<\/td>\n | (direct use)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n Choosing the Right Method<\/strong><\/p>\n\n\n\n| Situation<\/th>\n | Best Method<\/th>\n<\/tr>\n<\/thead>\n | \n\n| Need single element by ID<\/td>\n | getElementById()<\/code><\/td>\n<\/tr>\n\n| Need elements by class name or tag<\/td>\n | getElementsByClassName()<\/code>,
\ngetElementsByTagName()<\/code><\/td>\n<\/tr>\n\n| Need first match by CSS selector<\/td>\n | querySelector()<\/code><\/td>\n<\/tr>\n\n| Need all matches by CSS selector<\/td>\n | querySelectorAll()<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\nReal Example – Full Flow<\/strong><\/p>\nHTML:<\/strong><\/p>\n<h1 id=”site-title”>Hello<\/h1><\/em>
\n<p class=”description”>First paragraph.<\/p><\/em>
\n<p class=”description”>Second paragraph.<\/p><\/em><\/p>\nJavaScript:<\/strong><\/p>\nconst title = document.getElementById(“site-title”);<\/em>
\nconst descriptions = document.getElementsByClassName(“description”);<\/em>
\nconst firstParagraph = document.querySelector(“.description”);<\/em>
\nconst allParagraphs = document.querySelectorAll(“.description”);<\/em><\/p>\nconsole.log(title.textContent); \/\/ Hello<\/em>
\nconsole.log(descriptions.length); \/\/ 2<\/em>
\nconsole.log(firstParagraph.textContent); \/\/ First paragraph.<\/em>
\nallParagraphs.forEach(p => console.log(p.textContent));<\/em><\/p>\nQuick Summary:<\/strong><\/p>\nIn JavaScript, you can select elements using methods like getElementById, querySelector, getElementsByClassName, and querySelectorAll to manipulate or interact with the page easily.<\/p>\n Changing content and styles<\/h2>\nWhy Change Content and Styles?<\/strong><\/p>\nUsing JavaScript, you can dynamically update:<\/p>\n \n- Text<\/li>\n
- HTML structure<\/li>\n
- CSS styles<\/li>\n<\/ul>\n
This makes websites interactive, dynamic, and user-friendly \u2014 no page reload needed!<\/p>\n Changing Content<\/h3>\nThere are several ways to change the content of HTML elements:<\/strong><\/p>\n1. Text Content<\/strong><\/p>\n\n- Sets or gets the text inside an element.<\/li>\n
- Ignores HTML tags, treats everything as plain text.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nelement.textContent = “New Text Here”;<\/em><\/p>\nHTML:<\/strong><\/p>\n<p id=”greet”>Hello!<\/p><\/em><\/p>\nJavaScript:<\/strong><\/p>\nconst greet = document.getElementById(“greet”);<\/em>
\ngreet.textContent = “Welcome to the site!”;<\/em><\/p>\nResult:<\/strong> Only text is inserted.<\/p>\n2. Inner HTML<\/strong><\/p>\n\n- Sets or gets the HTML content inside an element.<\/li>\n
- Allows HTML tags inside.<\/li>\n<\/ul>\n
Syntax:<\/strong><\/p>\nelement.innerHTML = “<strong>Bold Text<\/strong>”;<\/em><\/p>\nExample:<\/strong><\/p>\n<div id=”content”><\/div><\/em><\/p>\nJavaScript:<\/strong><\/p>\nconst content = document.getElementById(“content”);<\/em>
\ncontent.innerHTML = “<h2>New Heading<\/h2><p>New paragraph!<\/p>”;<\/em><\/p>\n\n- Result:<\/strong> HTML structure is rendered inside the div.<\/li>\n
- Warning:<\/strong> Using innerHTML can open security risks (like XSS attacks) if you insert untrusted content.<\/li>\n<\/ul>\n
Handling events (click, input, submit)<\/h2>\nHandling Events in JavaScript<\/strong><\/p>\nJavaScript allows you to handle user interactions (events) like clicks, inputs, and form submissions to make web pages dynamic. Events are triggered by user actions, such as clicking a button or typing in a text box, and JavaScript listens for these events to execute a function.<\/p>\n There are many types of Handling Events in JavaScript.<\/h3>\n1. Event Types<\/strong><\/p>\n\n- Click: Triggered when a user clicks an element (e.g., button, link).<\/li>\n
- Input: Triggered when a user types into a text field or textarea.<\/li>\n
- Submit: Triggered when a user submits a form.<\/li>\n<\/ul>\n
2. Attaching Event Listeners<\/strong><\/p>\nMethod 1:<\/strong> Using addEventListener()<\/p>\nThe addEventListener() method attaches an event handler to an element. It\u2019s flexible and allows multiple event listeners for the same event.<\/p>\n Example – Handling a Click Event:<\/strong><\/p>\n<button id=”myButton”>Click Me<\/button><\/em><\/p>\n<script><\/em>
\nconst button = document.getElementById(‘myButton’);<\/em>
\nbutton.addEventListener(‘click’, function() {<\/em>
\nalert(‘Button clicked!’);<\/em>
\n});<\/em>
\n<\/script><\/em><\/p>\nExample – Handling Input Event:<\/strong><\/p>\n | | | | | |