Theory
સાચું element પકડવું
FestConnect ની બેઠકોની ગણતરી સુધારવા તમારે DOM ના વૃક્ષમાં એ એક <p> શોધવું પડે. Student એ કયું વર્ષ પસંદ કર્યું એ વાંચવા તમારે year નામનાં બધાં radios જોઈએ અને કયું પસંદ થયું છે એ તપાસવું પડે.
એ બે જુદાં કામ છે: અનન્ય id થી એક element લાવવું, કે વહેંચાયેલા નામથી elements નું જૂથ લાવવું. DOM દરેક માટે એક પદ્ધતિ આપે છે, વત્તા પદ્ધતિઓની જૂની જોડ (write, writeln) જે જાણવી કામની છે અને ખોટી રીતે વાપરવી સહેલી.
Theory
Roll number સામે વર્ગનું નામ
Roll number થી student શોધવાથી તમને બરાબર એક જ વ્યક્તિ મળે છે: ids અનન્ય હોય છે, જેમ કે getElementById. વર્ગનું નામ પોકારવાથી ('બધા બીજા વર્ષવાળા ઊભા થાઓ') તમને જૂથ મળે છે: એ છે getElementsByName, જે એવો સંગ્રહ પાછો આપે છે જેમાં તમે પછી એક પછી એક જાઓ છો. એક એકલું પરિણામ છે; બીજું એવી યાદી છે જેના પર તમારે ફરવું પડે.
Theory
પદ્ધતિઓ
- `document.getElementById("seats")`: એ id વાળું એક element પાછું આપે છે, કે એવું કોઈ ન હોય તો null.
- `document.getElementsByName("year")`: એ નામવાળાં બધાં elements નો સંગ્રહ પાછો આપે છે (radio નું જૂથ), જેને તમે index કરો (
[0]) કે એના પર ફરો. - `document.write(text)` / `writeln(text)`: લખાણ સીધું પાનામાં લખે છે.
writelnનવી લીટી ઉમેરે છે. ફક્ત શરૂઆતના load દરમિયાન સલામત.
આધુનિક સગાં: getElementsByClassName, અને querySelector (CSS ના selector થી પહેલો મેળ).
Practical
એકને સુધારો, જૂથ વાંચો
<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 કે યાદી?
getElementById("seats") તમને સીધું .textContent લખવા દે છે, પણ getElementsByName("year")[0].value ને [0] જોઈએ છે. ભેદ કેમ, અને જૂથ પર index ભૂલી જાઓ તો શું થાય?
Show the answer
getElementById એ એક જ element પાછું આપે છે, એટલે તમે એના ગુણધર્મો સીધા વાપરો છો. getElementsByName એ કદાચ અનેક elements નો સંગ્રહ (NodeList) પાછો આપે છે, એટલે તમારે index ([0]) થી એક પસંદ કરવું પડે કે એના પર ફરવું પડે. Index ભૂલી જાઓ તો તમે આખા સંગ્રહ પર .value વાંચવાનો પ્રયત્ન કરો છો, જે undefined છે, કારણ કે યાદીને .value હોતું જ નથી; ફક્ત એની વસ્તુઓને હોય છે. એક સામે જૂથ એ નક્કી કરે છે કે તમે index કરો કે નહીં.
Quiz
એક student બટન ના click ના handler ની અંદર `document.write("Thanks for registering")` ઉમેરે છે. Click કરતાં આખું FestConnect નું પાનું અદૃશ્ય થઈને ફક્ત એ લખાણ દેખાય છે. શા માટે?
- પાનું load થઈ ગયા પછીનું document.write આખા document પર લખી નાખે છે
- કોઈ પણ document.write પહેલાં getElementById જરૂરી છે
- બટનને એને બદલે getElementsByName જોઈતું હતું
- document.write ફક્ત આંકડા છાપી શકે છે, લખાણ નહીં
Show the answer
પાનું load થઈ ગયા પછીનું document.write આખા document પર લખી નાખે છે
document.write એ document ના પ્રવાહમાં લખે છે; પાનું load થઈ ગયા પછી એને બોલાવવાથી એ આખું document ફરી ખોલીને એના પર લખી નાખે છે, અને બધું ભૂંસીને ફક્ત નવું લખાણ દેખાડે છે (A). એને getElementById (B) કે getElementsByName (C) સાથે કશું લેવાદેવા નથી, અને એ લખાણ બરાબર છાપે છે (D). પાઠ: load પછી document.write ક્યારેય ન વાપરો. પાનાનો ભાગ સુધારવા, id થી element પકડીને એનું textContent ગોઠવો.
Watch out
DOM ની પદ્ધતિના ફાંદા
1. Load પછીનું document.write પાનું ભૂંસી નાખે છે. એને ફક્ત શરૂઆતના load ના demos માં વાપરો; સુધારા માટે element ને નિશાન બનાવીને textContent/innerHTML ગોઠવો.
2. id ખોટું હોય કે script બહુ વહેલું ચાલ્યું હોય તો getElementById એ null પાછું આપે છે: પછી .textContent ભૂલ ફેંકે છે. id અને script ની જગ્યા તપાસો (Unit 3).
3. સંગ્રહને એક element ગણવો: getElementsByName (અને getElementsByClassName) યાદીઓ પાછી આપે છે; એમને index કરો કે એમના પર ફરો, યાદી પર જ .value ન બોલાવો.
Theory
Interactivity માટે બધું તૈયાર છે
તમે હવે કોઈ પણ element શોધી શકો છો (પદ્ધતિઓ), એને વાંચી અને બદલી શકો છો (ગુણધર્મો), અને વાપરનારને પ્રતિભાવ આપી શકો છો (events, Unit 3). Unit 5 એમને ભેગાં બાંધે છે: submit પર ચાલતું register() નું function જે આ પદ્ધતિઓથી form વાંચે છે, એને validate કરે છે, બેઠકોની ગણતરી સુધારે છે, અને કાં તો બીજા પાના પર મોકલે છે કાં તો ભૂલ દેખાડે છે. FestConnect જીવતું થવાની અણી પર છે.
Summary
Key takeaways
- getElementById(id) એ id વાળું એક જ element પાછું આપે છે, કે null.
- getElementsByName(name) એ સંગ્રહ પાછો આપે છે (જેમ કે radio નું જૂથ); [i] થી index કરો કે એના પર ફરો.
- document.write / writeln પાનામાં લખાણ ઠાલવે છે; load પછી એમને બોલાવવાથી આખા document પર લખાઈ જાય છે.
- Load થયેલા પાનાનો ભાગ સુધારવા, id થી element પકડીને textContent/innerHTML ગોઠવો, document.write નહીં.
- આધુનિક સગાં: getElementsByClassName, querySelector (પહેલો CSS નો મેળ).
- Memory hook: id એ roll number છે (એક), name એ વર્ગનો પોકાર (જૂથ).