DOM Manipulation (Selecting, Modifying Elements, Event Handling, Forms)
🔹 1. Introduction to DOM (Document Object Model)
DOM అనేది HTML మరియు JavaScript మధ్య ఒక interface. ఇది web page లోని elements ను dynamically access మరియు modify చేయడానికి JavaScript కి అవకాశం ఇస్తుంది.
📌 Example:
- HTML page లో button click అయితే text change అవ్వాలి.
- Form లో user data enter చేసిన తర్వాత validation చేయాలి.
DOM structure Tree Structure లాగా ఉంటుంది:
Document
├── HTML
│ ├── HEAD
│ ├── BODY
│ ├── H1
│ ├── P
│ ├── BUTTON🔹 2. Selecting Elements in DOM
JavaScript లో DOM elements ను access చేయడానికి కొన్ని methods ఉన్నాయి:
📌 getElementById() → ID ద్వారా element select చేయడానికి
JavaScript
let heading = document.getElementById("title");
heading.innerText = "Hello JavaScript!";📌 getElementsByClassName() → Class ద్వారా elements select చేయడానికి
JavaScript
let items = document.getElementsByClassName("list-item");
console.log(items[0].innerText); // First item display అవుతుంది📌 getElementsByTagName() → Tag ద్వారా elements select చేయడానికి
JavaScript
let paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length); // Total <p> tags count📌 querySelector() & querySelectorAll() → CSS selectors ద్వారా elements select చేయడానికి
JavaScript
let firstPara = document.querySelector("p");
let allParas = document.querySelectorAll("p");
console.log(allParas.length);🔹 3. Modifying DOM Elements
Elements properties ను change చేయడానికి:
📌 innerText & innerHTML → Text లేదా HTML update చేయడానికి
JavaScript
document.getElementById("title").innerText = "New Title";
document.getElementById("content").innerHTML = "<strong>Bold Text</strong>";📌 Changing Attributes → Example: Image SRC మార్చడం
JavaScript
document.getElementById("myImage").src = "new-image.jpg";📌 Changing Styles (CSS)
JavaScript
document.getElementById("box").style.backgroundColor = "blue";🔹 4. Creating & Removing Elements in DOM
Sometimes we need to dynamically create, insert, or remove elements.
📌 Creating Elements using createElement()
JavaScript
let newParagraph = document.createElement("p");
newParagraph.innerText = "This is a dynamically created paragraph.";
document.body.appendChild(newParagraph);📌 Appending Elements using appendChild()
JavaScript
let list = document.getElementById("taskList");
let newItem = document.createElement("li");
newItem.innerText = "New Task";
list.appendChild(newItem);📌 Removing Elements using removeChild()
JavaScript
let parent = document.getElementById("taskList");
let itemToRemove = document.getElementById("task1");
parent.removeChild(itemToRemove);📌 Replacing Elements using replaceChild()
JavaScript
let oldElement = document.getElementById("oldItem");
let newElement = document.createElement("li");
newElement.innerText = "Updated Item";
parent.replaceChild(newElement, oldElement);🔹 5. Event Handling in JavaScript
Web page లో user interaction handle చేయడానికి events ఉపయోగిస్తారు.
📌 Click Event → Button click అయితే action తీసుకోవడానికి
JavaScript
document.getElementById("btn").addEventListener("click", function() {
alert("Button Clicked!");
});📌 Mouse Events → Mouse move, hover, double-click events
JavaScript
document.getElementById("box").addEventListener("mouseover", function() {
this.style.backgroundColor = "green";
});📌 Keyboard Events → Key press detect చేయడానికి
JavaScript
document.addEventListener("keydown", function(event) {
console.log("Key Pressed: " + event.key);
});📌 Form Events → Input fields లో validation చేయడానికి
JavaScript
document.getElementById("name").addEventListener("input", function() {
console.log("User Entered: " + this.value);
});🔹 6. Real-Time Project: To-Do List Application
To-Do list ద్వారా DOM manipulation & events ఎలా పనిచేస్తాయో తెలుసుకుందాం.
🔹 Step 1: HTML Structure
JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
</head>
<body>
<h2>To-Do List</h2>
<input type="text" id="taskInput" placeholder="Enter Task">
<button id="addTask">Add Task</button>
<ul id="taskList"></ul>
<script src="script.js"></script>
</body>
</html>🔹 Step 2: JavaScript Logic (script.js)
JavaScript
// Selecting Elements
let input = document.getElementById("taskInput");
let button = document.getElementById("addTask");
let list = document.getElementById("taskList");
// Event Listener for Button Click
button.addEventListener("click", function() {
let taskText = input.value;
if (taskText === "") {
alert("Enter a Task!");
return;
}
let listItem = document.createElement("li");
listItem.innerText = taskText;
list.appendChild(listItem);
input.value = ""; // Clear input field
});🔹 Step 3: Run the Code
- HTML & JavaScript files save చేయండి.
- Browser లో open చేయండి.
- Task enter చేసి Add Task press చేయండి.
- Task list లో add అవుతుంది.
🔹 7. Summary
- DOM అంటే? Web page లోని elements ను JavaScript తో access & modify చేయడం.
- Elements Selection:
getElementById(),querySelector(). - DOM Modifications:
innerText,innerHTML,style. - Creating & Removing Elements:
createElement(),appendChild(),removeChild(). - Event Handling: Click, Mouse, Keyboard, Form events.
- Project: To-Do List (Adding dynamic tasks).
