Day 5: JavaScript DOM Manipulation

Innu nammude session-il DOM Manipulation padichu. JavaScript upayogichu webpage-ile elements select cheyyan, text change cheyyan, events handle cheyyan ithu sahayikkum.

1. DOM (Document Object Model) Enthu Aanu?

DOM ennathu *Document Object Model* aanu. Oru webpage-ine *JavaScript upayogichu access cheyyan, modify cheyyan* DOM sahayikkum. *HTML elements ne JavaScript code upayogichu access cheyyan DOM manipulate cheyyum.*

📌 Example:

document.body.style.backgroundColor = "lightblue";

*Itha execute cheythal webpage background color light blue aakum.*

2. Elements Select Cheyyuka (Selecting Elements)

HTML elements access cheyyan JavaScript-ile different methods use cheyyam.

2.1 `getElementById()` – ID upayogichu element select cheyyan

HTML element ID upayogichu select cheyyam. *Example:*

let heading = document.getElementById("main-heading"); heading.innerHTML = "DOM Manipulation Success!";

2.2 `getElementsByClassName()` – Class name upayogichu multiple elements select cheyyan

Class name upayogichu multiple elements select cheyyam.

let items = document.getElementsByClassName("list-item"); items[0].style.color = "red"; // First item red aakkum

2.3 `getElementsByTagName()` – Tag name upayogichu elements select cheyyan

let paragraphs = document.getElementsByTagName("p"); paragraphs[0].style.fontWeight = "bold";

2.4 `querySelector()` & `querySelectorAll()` – CSS selectors upayogichu elements select cheyyan

let firstPara = document.querySelector("p"); firstPara.style.color = "blue"; // First paragraph blue aakkum let allItems = document.querySelectorAll(".list-item"); allItems.forEach(item => item.style.backgroundColor = "yellow");

3. Event Handling – User Interactions Handle Cheyyuka

Webpage-il user interaction manage cheyyan events upayogikkam.

3.1 Button Click Event

Oru button click cheyyumbo function execute cheyyan.

document.getElementById("btn").addEventListener("click", function() { alert("Button clicked!"); });

3.2 Mouseover & Mouseout Events

Mouse move cheyyumbo or click cheyyumbo color change cheyyan.

let box = document.getElementById("box"); box.addEventListener("mouseover", function() { box.style.backgroundColor = "green"; }); box.addEventListener("mouseout", function() { box.style.backgroundColor = "white"; });

3.3 Input Event

User input edukkuka.

document.getElementById("nameInput").addEventListener("input", function() { document.getElementById("output").innerHTML = "Hello, " + this.value + "!"; });

4. Real-World Example – To-Do List Application

document.getElementById("addTask").addEventListener("click", function() { let task = document.getElementById("taskInput").value; if(task) { let newTask = document.createElement("li"); newTask.innerText = task; document.getElementById("taskList").appendChild(newTask); document.getElementById("taskInput").value = ""; } });

🎯 Conclusion

Innu nammude session-il padichathu:

DOM Manipulation (Elements select cheyyuka, modify cheyyuka)
Events (Click, Mouseover, Input events handle cheyyuka)
Real-World Example (To-Do List Application)

🔥 Next session: JavaScript Forms & Validation – Don't miss it!

Module 1 Session 5

🔒 Login Required