Scribd
Upload
8 views2 pages

JavaScript DOM Manipulation Guide

Module 4 of the JavaScript Learning Guide covers the Document Object Model (DOM), explaining how JavaScript can manipulate webpage content, styles, and structure. It includes methods for selecting elements, changing content and styles, and dynamically creating or removing elements. A mini project is provided to build a simple To-Do List app, demonstrating these concepts in practice.

Uploaded by

theb8835
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
8 views2 pages

JavaScript DOM Manipulation Guide

Module 4 of the JavaScript Learning Guide covers the Document Object Model (DOM), explaining how JavaScript can manipulate webpage content, styles, and structure. It includes methods for selecting elements, changing content and styles, and dynamically creating or removing elements. A mini project is provided to build a simple To-Do List app, demonstrating these concepts in practice.

Uploaded by

theb8835
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

JavaScript Learning Guide – Module 4: DOM

Manipulation

1. What is the DOM?


DOM (Document Object Model) represents the structure of a webpage. JavaScript can interact with
the DOM to change content, styles, and structure dynamically.

2. Selecting Elements
You can select elements using methods like getElementById, querySelector, and querySelectorAll.
// Example HTML: <p id="demo">Hello</p>
let para = [Link]("demo");
[Link]([Link]); // Hello

let firstDiv = [Link]("div");


let allParas = [Link]("p");

3. Changing Content and Styles


We can change inner text, HTML, and CSS styles using JavaScript.
// Example HTML: <p id="demo">Old Text</p>
let para = [Link]("demo");
[Link] = "New Text"; // Change text
[Link] = "blue"; // Change style

4. Creating and Removing Elements


We can dynamically add or remove elements in the DOM.
let newDiv = [Link]("div");
[Link] = "I am a new div";
[Link](newDiv); // Add to page

[Link](newDiv); // Remove element

■ Mini Project: To-Do List App


Build a simple To-Do List where users can add tasks, and remove them when completed.
// Example HTML:
// <input id="taskInput" placeholder="Enter task">
// <button onclick="addTask()">Add</button>
// <ul id="taskList"></ul>

function addTask() {
let input = [Link]("taskInput");
let taskText = [Link];

if(taskText === "") return;

let li = [Link]("li");
[Link] = taskText;

// Add remove on click


[Link] = function() {
[Link]();
};

[Link]("taskList").appendChild(li);
[Link] = ""; // Clear input
}

■ End of Module 4. In the next module, we will learn about Events in JavaScript.

You might also like