Theory
JS પાનાને 'જુએ' છે કેવી રીતે?
તમને જોઈએ છે કે કોઈ નોંધણી કરે એ જ ક્ષણે FestConnect નું 'Seats left: 30' પાનું ફરી load કર્યા વગર 29 થઈ જાય. પણ તમારું JavaScript એક વસ્તુ છે અને HTML બીજી. Code પાનાની અંદર પહોંચીને વાપરનાર જે આંકડો જોઈ રહ્યો છે એ કેવી રીતે બદલે?
જવાબ છે DOM. જ્યારે browser તમારું HTML load કરે છે, ત્યારે એ એને ફક્ત ચીતરતું નથી, એ તમારાં tags નું પ્રતિબિંબ પાડતું જીવતું objects નું વૃક્ષ બાંધે છે. JavaScript એ વૃક્ષ સાથે વાત કરે છે.
Theory
તમારાં tags નું વંશવૃક્ષ
તમારું HTML અંદરોઅંદર ગોઠવાય છે: <body> માં <div> છે, જેમાં <h1> અને <p> છે. DOM એ ગોઠવણને વંશવૃક્ષ માં ફેરવે છે: body એ માતાપિતા છે, div એનું સંતાન, અને અંદરનાં h1 તથા p ભાઈબંધો. દરેક tag એવો object-node બને છે જેની તરફ તમે ચીંધીને એને સુધારી શકો. આખું વૃક્ષ એક જ મૂળ object પરથી લટકે છે: document.
Theory
DOM, ઔપચારિક રીતે
Document Object Model (DOM) એ browser નું પાનાનું memory માંનું નિરૂપણ છે, objects ના વૃક્ષ તરીકે, દરેક tag દીઠ એક node, અને એનું મૂળ છે `document`.
મુખ્ય વિચારો:
- એ memory માંનું જીવતું પાનું છે, .html file નહીં. DOM સુધારવાથી પડદો તરત સુધરે છે; disk પરની file ક્યારેય બદલાતી નથી.
- દરેક element ના node ને એવા ગુણધર્મો હોય છે જે તમે વાંચો અને ગોઠવો:
textContent(એનું લખાણ),innerHTML(અંદરનું HTML),value(ખાનાની સામગ્રી),style(inline CSS),className,id.
Practical
બેઠકોની ગણતરી વાંચવી અને બદલવી
<p id="seats">Seats left: 30</p>
<script>
// grab the node (methods are the next lesson)
let el = document.getElementById("seats");
// READ a property
console.log(el.textContent); // "Seats left: 30"
// CHANGE properties: the page updates instantly
el.textContent = "Seats left: 29";
el.style.color = "crimson";
// innerHTML can inject tags (use with care)
el.innerHTML = "Seats left: <b>29</b>";
</script>
<!-- the seats.html file on disk still says 30; only the
live DOM in this browser changed. -->This example runs in Gri-Learn on the web, where you can edit it and see the output.
Think first
ફેરફાર ક્યાં ગયો?
તમારું script el.textContent = "Seats left: 29" ગોઠવે છે અને પાનું 29 દેખાડે છે. તમે .html file ને editor માં ખોલો છો અને એ હજી 30 જ કહે છે. શું એ bug છે? ખરેખર શું બદલાયું એ સમજાવો.
Show the answer
એ bug નથી. JavaScript એ DOM બદલ્યું, એટલે કે browser ની memory માં રહેલી પાનાની જીવતી નકલ, એટલે પડદો 29 પર સુધર્યો. Disk પરની file એ મૂળ સ્રોત છે અને DOM ના સુધારાથી એ ક્યારેય ફરી લખાતી નથી, એટલે એ હજી 30 જ કહે છે. પાનું refresh કરો અને એ file માંથી DOM ફરી બાંધે છે, અને ફરી 30 દેખાડે છે. DOM એ ચાલતું પાનું છે; file એ નકશો છે.
Quiz
તમને કોઈ પણ HTML ના tag નું અર્થઘટન થયા વગર 'Seats left: 29' સાદું લખાણ element માં મૂકવું છે. કયો ગુણધર્મ સલામત પસંદગી છે?
- textContent, જે મૂલ્યને સાદા લખાણ તરીકે ગણે છે
- innerHTML, જે મૂલ્યને HTML તરીકે વાંચે છે
- value, જે ફક્ત form નાં ખાનાં માટે છે
- style, જે CSS ગોઠવે છે
Show the answer
textContent, જે મૂલ્યને સાદા લખાણ તરીકે ગણે છે
textContent એ element નું લખાણ શબ્દશઃ ગોઠવે છે, tag નું અર્થઘટન કર્યા વગર, જે સાદા લખાણ માટે સલામત અને સાચું છે (A). innerHTML એના મૂલ્યને HTML તરીકે વાંચે છે, એટલે એ શક્તિશાળી છે પણ વાપરનારના input સાથે જોખમી (એ અણગમતાં tags/scripts ઘુસાડી શકે) (B). value એ inputs જેવાં form નાં નિયંત્રણો માટે છે, <p> માટે નહીં (C). style એ CSS ગોઠવે છે, સામગ્રી નહીં (D). જ્યાં સુધી તમને ખાસ HTML ઉમેરવું ન હોય, ત્યાં સુધી textContent પસંદ કરો.
Watch out
DOM ના ખ્યાલના ફાંદા
1. 'એણે HTML ની file બદલી': ના. DOM ના સુધારા memory માંનું જીવતું પાનું બદલે છે, સ્રોતની file નહીં. આ સામાન્ય ગેરસમજ છે.
2. વાપરનારના input સાથે innerHTML: અવિશ્વસનીય લખાણને innerHTML તરીકે ઘુસાડવાથી ખરાબ HTML/scripts ચાલી શકે છે (XSS નું જોખમ). વાપરનારે આપેલા લખાણ માટે textContent વાપરો.
3. DOM ના વૃક્ષને કોરી HTML ની string સાથે ગૂંચવવું: DOM એ ગુણધર્મોવાળાં objects છે, string ની પદ્ધતિઓથી શોધાય એવું લખાણ નહીં.
Theory
આગળ: સાચો node કેવી રીતે પકડવો
તમે document.getElementById("seats") ને node પકડતાં જોયું છે, પણ શોધનારી પદ્ધતિઓનું કુટુંબ કેવી રીતે કામ કરે છે એ નહીં. હવે પછીનો પાઠ DOM ની પદ્ધતિઓ આવરે છે, getElementById, getElementsByName, અને જૂનાં write/writeln, જેથી તમે કોઈ પણ element ના ગુણધર્મ વાંચતાં કે બદલતાં પહેલાં એના સુધી ભરોસાપાત્ર રીતે પહોંચી શકો. અહીં ખ્યાલ, આગળ પદ્ધતિઓ, પછી Unit 5 એ બધું interactive બનાવે છે.
Summary
Key takeaways
- DOM એ browser નું પાનાને દર્શાવતું memory માંનું જીવતું objects નું વૃક્ષ છે, દરેક tag દીઠ એક node, અને મૂળ document.
- DOM સુધારવાથી પડદો તરત સુધરે છે પણ disk પરની .html file ક્યારેય બદલાતી નથી.
- Element ના ગુણધર્મો: textContent (લખાણ), innerHTML (અંદરનું HTML), value (form નાં ખાનાં), style (inline CSS), className, id.
- સાદા અને વાપરનારે આપેલા લખાણ માટે innerHTML કરતાં textContent પસંદ કરો (innerHTML tags/scripts ઘુસાડી શકે).
- Nodes માતાપિતા/સંતાન/ભાઈબંધ તરીકે સંબંધ ધરાવે છે, વંશવૃક્ષની જેમ.
- Memory hook: DOM એ ચાલતું પાનું છે, file એ નકશો.