Theory
सही element पकड़ना
FestConnect का seat counter update करने के लिए आपको DOM tree में वह एक <p> ढूँढना है। एक student ने कौन सा year चुना यह पढ़ने के लिए, आपको year नाम के सभी radios चाहिए और check करना है कौन सा selected है।
वे दो अलग काम हैं: अपनी unique id से एक element लाइए, या अपने shared name से elements का एक group लाइए। DOM हर एक के लिए एक method देता है, plus पुराने methods की एक pair (write, writeln) जो जानने में काम की हैं और misuse करना आसान।
Theory
Roll number बनाम class का नाम
एक student को roll number से ढूँढना आपको exactly एक व्यक्ति देता है: ids unique होती हैं, getElementById जैसी। एक class name पुकारना ('सभी second years, खड़े हो जाइए') आपको एक group देता है: वह getElementsByName है, जो एक collection return करता है जिसे आप फिर एक-एक करके देखते हैं। एक अकेला result है; दूसरा एक list है जिस पर आपको iterate करना ज़रूरी है।
Theory
Methods
- `document.getElementById("seats")`: उस id वाला एक element return करता है, या कोई भी न हो तो null।
- `document.getElementsByName("year")`: उस name वाले सभी elements का एक collection return करता है (एक radio group), जिसे आप index (
[0]) करते हैं या loop करते हैं। - `document.write(text)` / `writeln(text)`: text सीधे page में लिखते हैं।
writelnएक newline जोड़ता है। सिर्फ़ initial load के दौरान safe।
Modern relatives: getElementsByClassName, और querySelector (CSS selector से पहला match)।
Practical
एक update कीजिए, एक group पढ़िए
<p id="seats">Seats left: 30</p>
<input type="radio" name="year" value="1">
<input type="radio" name="year" value="2" checked>
<script>
// ONE element by id
let seats = document.getElementById("seats");
seats.textContent = "Seats left: 29";
// a GROUP by name: loop to find the checked one
let years = document.getElementsByName("year");
let chosen = "";
for (let i = 0; i < years.length; i++) {
if (years[i].checked) chosen = years[i].value;
}
console.log("Year chosen: " + chosen); // "2"
// document.write is fine here (during load), but calling it
// after load would ERASE the whole page:
// document.write("hi"); // avoid after load
</script>This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
एक node या एक list?
getElementById("seats") आपको सीधे .textContent लिखने देता है, पर getElementsByName("year")[0].value को [0] चाहिए। फ़र्क़ क्यों, और अगर आप group पर index भूल जाएँ तो क्या होता है?
Show the answer
getElementById एक single element return करता है, तो आप इसकी properties सीधे इस्तेमाल करते हैं। getElementsByName शायद कई elements का एक collection (एक NodeList) return करता है, तो आपको एक index ([0]) से एक चुनना है या loop करना है। Index भूलिए और आप पूरे collection पर .value पढ़ने की कोशिश करते हैं, जो undefined है, क्योंकि एक list का कोई .value नहीं होता; सिर्फ़ इसके items का होता है। Single बनाम group तय करता है क्या आप index करते हैं।
Quiz
एक student एक button के click handler के अंदर `document.write("Thanks for registering")` जोड़ता है। Click पर, पूरा FestConnect page ग़ायब हो जाता है और सिर्फ़ वह text दिखाता है। क्यों?
- Page load होने के बाद document.write पूरे document को overwrite कर देता है
- किसी भी document.write से पहले getElementById चाहिए
- Button को इसके बजाय getElementsByName चाहिए था
- document.write सिर्फ़ numbers print कर सकता है, text नहीं
Show the answer
Page load होने के बाद document.write पूरे document को overwrite कर देता है
document.write document stream में लिखता है; एक बार page load ख़त्म होने पर, इसे call करना पूरे document को reopen और overwrite करता है, नए text को दिखाने के लिए सब कुछ मिटाते हुए (A)। यह getElementById (B) या getElementsByName (C) से unrelated है, और यह text ठीक print करता है (D)। Lesson: load के बाद कभी document.write इस्तेमाल मत कीजिए। Page का हिस्सा update करने के लिए, id से एक element पकड़िए और इसके बजाय textContent set कीजिए।
Watch out
DOM method traps
1. Load के बाद document.write page मिटा देता है। इसे सिर्फ़ initial load demos में इस्तेमाल कीजिए; updates के लिए, एक element target कीजिए और textContent/innerHTML set कीजिए।
2. id ग़लत होने या script बहुत जल्दी चलने पर getElementById null return करता है: फिर .textContent throw करता है। id और script placement check कीजिए (Unit 3)।
3. एक collection को एक element समझना: getElementsByName (और getElementsByClassName) lists return करते हैं; उन्हें index या loop कीजिए, list पर सीधे .value call मत कीजिए।
Theory
Interactivity के लिए सब तैयार है
अब आप कोई भी element ढूँढ सकते हैं (methods), इसे पढ़ और बदल सकते हैं (properties), और user को react कर सकते हैं (events, Unit 3)। Unit 5 उन्हें साथ जोड़ता है: submit पर triggered एक register() function जो इन methods से form पढ़ता है, इसे validate करता है, seat counter update करता है, और या तो redirect करता है या एक error दिखाता है। FestConnect जल्दी ही जीवंत होने वाला है।
Summary
Key takeaways
- getElementById(id) उस id वाला single element return करता है, या null।
- getElementsByName(name) एक collection return करता है (एक radio group जैसा); इसे index [i] या loop कीजिए।
- document.write / writeln page में text डालते हैं; load के बाद इन्हें call करना पूरा document overwrite करता है।
- एक loaded page का हिस्सा update करने के लिए, id से एक element पकड़िए और textContent/innerHTML set कीजिए, document.write नहीं।
- Modern relatives: getElementsByClassName, querySelector (पहला CSS match)।
- Memory hook: id एक roll number है (एक), name एक class call है (एक group)।