पाठ 29, कुल 30 में

JavaScript और DOM — पेज को पेड़ समझिए

4 मिनट पढ़ें · मुफ़्त · बिना लॉगिन

English हिंदी

JavaScript Promises और async/await — इंतज़ार का तरीका JavaScript Form Validation — दरवाज़े पर जाँच

HTML file पर text है। जब browser उसे लोड करता है, तो वह कुछ और बनाता है: objects का पेड़, हर tag के लिए एक, text के हर टुकड़े के लिए एक, हर attribute के लिए एक। उस पेड़ को DOM कहते हैं — Document Object Model। JavaScript उस पेड़ में पहुँच सकता है, पेज का कोई भी हिस्सा ढूँढ सकता है, और पेज खुले रहते हुए उसे बदल सकता है। इसी तरह button click से heading बदलती है, form error दिखाता है, या सूची एक item से बढ़ जाती है — पेज दोबारा लोड किए बिना।

Diagram — देखें, यह सब कैसे जुड़ता है

पेज को family tree की तरह सोचिए। <html> दादा-दादी हैं, <body> माता-पिता हैं, और headings, paragraphs और buttons बच्चे हैं। JavaScript उस पेड़ पर चलता है, जिस व्यक्ति को चाहता है उसे ढूँढता है, और उसके कपड़े बदल देता है। पेड़ पेज से कभी नहीं जाता — सिर्फ जो दिखता है, वह बदलता है।

Elements ढूँढना — getElementById और querySelector

let title = document.getElementById("main-title");
let firstBtn = document.querySelector("button");
let allItems = document.querySelectorAll("li");

document.getElementById("main-title") उस id वाला एक element ढूँढता है — सबसे तेज़ और सबसे आम तरीका। document.querySelector("button") पहला element ढूँढता है जो CSS selector से मेल खाता है, इसलिए आप classes, tags और combinations इस्तेमाल कर सकते हैं: ".card p", "#list li"। querySelectorAll हर मेल ढूँढता है और आपको एक सूची देता है, जिस पर आप loop चला सकते हैं। याद रखिए: पेज पर id unique होनी चाहिए, इसलिए getElementById को हमेशा ज़्यादा से ज़्यादा एक element मिलता है।

Note: अगर element नहीं है, तो ये methods null देती हैं — और null इस्तेमाल करने की कोशिश करने पर TypeError आता है (errors वाले पाठ से error)। अगर आपका code कहता है 'Cannot read properties of null', तो पहले id या selector की spelling जाँचिए, और जाँचिए कि आपकी script उस HTML के बाद चलती है जिसे वह छूती है — <head> में script body बनने से पहले चलती है।

Elements बदलना — text, HTML और style

title.textContent = "Welcome to KAMALDNP";
title.style.color = "orange";
title.style.fontSize = "32px";

textContent element के अंदर का सादा text बदलता है — सुरक्षित, क्योंकि यह text को कभी HTML नहीं समझता। innerHTML उसके अंदर का HTML बदलता है, ताकि आप tags जोड़ सकें — पर user के लिखे text को कभी innerHTML में मत डालिए, क्योंकि लिखा हुआ <script> सच में चल जाएगा। style CSS को एक-एक property बदलता है, और property के नाम camelCase में होते हैं: backgroundColor, background-color नहीं।

Elements जोड़ना और हटाना

let li = document.createElement("li");
li.textContent = "New student";
document.getElementById("list").appendChild(li);

createElement("li") एक नया element बनाता है, जो अभी पेज पर नहीं है। आप उसे text से भरते हैं, फिर appendChild उसे parent से जोड़ता है — आमतौर पर <ul> या <div> से। हटाने के लिए element.remove() इस्तेमाल कीजिए। इसी तरह to-do list, student list या comment section बिना reload के बढ़ता है।

Tip: ऐसे याद रखिए: getElementById ढूँढता है, textContent बदलता है, style रंगता है। ढूँढिए, बदलिए, रंगिए — यही तीन चालों में पूरा DOM है।

आम गलतियाँ

HTML बनने से पहले script चलाना — अपनी <script> को <body> के अंत में रखिए, या पेज लोड होने का इंतज़ार कीजिए।
User input के साथ innerHTML इस्तेमाल करना — लिखा हुआ tag असली HTML बन जाता है। User के लिखे किसी भी चीज़ के लिए textContent इस्तेमाल कीजिए।
यह भूल जाना कि querySelectorAll सूची देता है, एक element नहीं — आपको उस पर loop चलाना होगा या [0] चुनना होगा।
style में dash वाले CSS property नाम लिखना — style.background-color syntax error है। camelCase इस्तेमाल कीजिए: style.backgroundColor।

याद रखें

DOM पेज को objects के पेड़ के रूप में दिखाता है, जिसे JavaScript बदल सकता है।
getElementById id से एक element ढूँढता है; querySelector CSS selector का पहला मेल ढूँढता है।
textContent सादा text बदलता है; innerHTML HTML बदलता है — user input के साथ इसका इस्तेमाल कभी मत कीजिए।
createElement + appendChild नए elements जोड़ते हैं; remove() उन्हें हटा देता है।
getElementById ढूँढता है, textContent बदलता है, style रंगता है।

उदाहरण समझिए

<ul id="list"> — पेज पर छात्र सूची, जिसमें पहले से दो छात्र हैं, ताकि पेज खाली न हो।
let name = document.getElementById("name").value; — name वाले box में user ने जो लिखा है, उसे पढ़ता है।
let li = document.createElement("li"); — एक बिल्कुल नया list item बनाता है, जो अभी पेज पर नहीं है।
li.textContent = name; — लिखा हुआ नाम उसके अंदर सादे text के रूप में डालता है (सुरक्षित — लिखा हुआ tag text ही रहता है)।
document.getElementById("list").appendChild(li); — नया item सूची से जोड़ता है, ताकि वह तुरंत पेज पर दिखे।
document.getElementById("title").style.color = "orange"; — 'Make it orange' button एक लाइन में heading को नारंगी रंग देता है।

उदाहरण

Example

<!DOCTYPE html>
<html>
<head>
<title>Student List — DOM</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 360px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; margin: 4px; }
</style>
</head>
<body>

<h1 id="title">KAMALDNP Students</h1>
<div class="card">
<ul id="list">
<li>Priya — HTML</li>
<li>Rahul — CSS</li>
</ul>
<p>New student: <input id="name" type="text" value="Amit"></p>
<p>
<button onclick="addStudent()">Add student</button>
<button onclick="paintTitle()">Make it orange</button>
</p>
<p>Try it: click "Add student" to add Amit to the list, or "Make it orange" to paint the heading.</p>
</div>

<script>
function addStudent() {
  let name = document.getElementById("name").value;
  let li = document.createElement("li");
  li.textContent = name + " — JavaScript";
  document.getElementById("list").appendChild(li);
  document.getElementById("name").value = "";
}
function paintTitle() {
  document.getElementById("title").style.color = "orange";
}
</script>

</body>
</html>

परिणाम

परिणाम — ब्राउज़र में यह कैसा दिखता है

खुद करके देखें — लाइव एडिटर

नीचे दिया गया कोड बदलें और चलाएँ दबाएँ — परिणाम तुरंत दिखेगा। कोई फाइल सहेजनी नहीं है, कोई लॉगिन नहीं चाहिए।

<!DOCTYPE html>
<html>
<head>
<title>Student List — DOM</title>
<style>
body { font-family: Verdana, sans-serif; background-color: #fff8e1; }
h1 { color: #b45309; text-align: center; }
.card { background-color: white; border: 2px solid #f59e0b; padding: 16px; width: 360px; margin: 20px auto; }
button { background-color: #b45309; color: white; border: none; padding: 10px 18px; font-size: 16px; margin: 4px; }
</style>
</head>
<body>

<h1 id="title">KAMALDNP Students</h1>
<div class="card">
<ul id="list">
<li>Priya — HTML</li>
<li>Rahul — CSS</li>
</ul>
<p>New student: <input id="name" type="text" value="Amit"></p>
<p>
<button onclick="addStudent()">Add student</button>
<button onclick="paintTitle()">Make it orange</button>
</p>
<p>Try it: click "Add student" to add Amit to the list, or "Make it orange" to paint the heading.</p>
</div>

</body>
</html>

पूरे एडिटर में खोलें

परिणाम

खुद क्यों सीखें — AI से पूछने के बजाय?

AI आपके लिए कोड लिख सकता है, लेकिन वह आपके लिए सोच नहीं सकता। जब आप HTML खुद सीखते हैं, तो आपका दिमाग असली कौशल बनाता है: आप समझते हैं कि पेज ऐसा क्यों दिखता है, टूटने पर उसे ठीक कर सकते हैं, और परीक्षा या इंटरव्यू में बिना मदद के जवाब दे सकते हैं। यही कौशल नौकरी दिलाता है — कॉपी किया हुआ जवाब नहीं।