Chapter 12JavaScript Tutorial~1 min read

DOM — Document Object Model

HTML Elements JavaScript ने Control करणे

DOM म्हणजे Document Object Model — webpage चे tree-like representation. JavaScript DOM च्या मदतीने HTML elements access करतो, content बदलतो, styles बदलतो, आणि events handle करतो. हे JavaScript चे सगळ्यात practically important topic आहे.

Marathi Analogy

🌳 Analogy: DOM म्हणजे family tree सारखे. <html> root, <body> trunk, <div>/<p> branches. JavaScript ला हे tree दिसतो आणि कोणत्याही branch ला access करता येते.

Elements Select करणे

DOM Selection Methods

javascript

// getElementById — ID ने एक element
let heading = document.getElementById("main-title");

// querySelector — CSS selector ने पहिला match
let btn = document.querySelector(".submit-btn");
let h1 = document.querySelector("h1");

// querySelectorAll — CSS selector ने सगळे matches
let allCards = document.querySelectorAll(".card");

// getElementsByClassName — class ने (live collection)
let items = document.getElementsByClassName("item");

// getElementsByTagName — tag ने
let paragraphs = document.getElementsByTagName("p");

Content बदलणे

innerHTML, textContent

javascript

let title = document.getElementById("title");

// innerHTML — HTML सह content बदलणे
title.innerHTML = "<strong>नवीन Title</strong>";

// textContent — Plain text (safer — no HTML parsing)
title.textContent = "नवीन Title";

// Value — Input fields साठी
let input = document.getElementById("nameInput");
console.log(input.value); // User ने जे टाइप केले
input.value = "Rahul";

Styles बदलणे

Style Manipulation

javascript

let box = document.getElementById("box");

// Inline style बदलणे
box.style.backgroundColor = "orange";
box.style.color = "white";
box.style.fontSize = "24px";
box.style.display = "none"; // लपवणे

// Classes add/remove करणे (recommended)
box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("dark-mode"); // Add करतो किंवा remove

Events — User Actions Handle करणे

Event Listeners

javascript

let button = document.getElementById("myBtn");

// Click event
button.addEventListener("click", function() {
    alert("Button click झाला!");
});

// Arrow function syntax
button.addEventListener("click", () => {
    document.getElementById("output").textContent = "Clicked! 🎉";
});

// Common events:
// click, dblclick, mouseover, mouseout
// keydown, keyup, keypress
// submit, change, input, focus, blur

Practical Example — Counter

javascript

let count = 0;
let display = document.getElementById("count");
let btn = document.getElementById("increment");

btn.addEventListener("click", () => {
    count++;
    display.textContent = count;
});

// HTML मध्ये:
// <p id="count">0</p>
// <button id="increment">+ Add</button>

Elements Create आणि Add करणे

createElement, appendChild

javascript

// नवीन element बनवणे
let newCard = document.createElement("div");
newCard.classList.add("card");
newCard.innerHTML = "<h3>नवीन Card</h3><p>Dynamic content!</p>";

// Page वर add करणे
document.getElementById("container").appendChild(newCard);

✅ Key Points — लक्षात ठेवा

▸DOM = webpage चे JavaScript API — HTML elements access करतो
▸getElementById, querySelector, querySelectorAll — selection
▸innerHTML, textContent — content बदलणे
▸style.property, classList.add/remove — styling
▸addEventListener("click", fn) — user events handle

0/13 chapters पूर्ण

मागे — Previous

Objects in JavaScript

पुढे — Next

Classes आणि OOP