Lesson – 75 : Introduction to the Document Object Model (DOM)

વેબ ડેવલપમેન્ટમાં DOM એટલે Document Object Model, જે વેબ પેજને પ્રોગ્રામિંગ ભાષાઓ દ્વારા નિયંત્રિત કરવા માટેનો મોડલ છે. HTML પેજ બ્રાઉઝરમાં ખુલ્યા પછી તે એક ઓબ્જેક્ટના વૃક્ષ (Tree Structure) માં બદલાય છે જેને DOM કહેવામાં આવે છે.

---

💡 DOM શું છે?

DOM એ HTML અથવા XML ડોક્યુમેન્ટનું પ્રોગ્રામિંગ પ્રતિનિધિત્વ (representation) છે.
એમાં દરેક HTML ટૅગ એક ઑબ્જેક્ટ (node) રૂપે ગણે છે, જેમ કે:

• Document

• HTML

• Head

• Body

• h1, p, div, img વગેરે ટૅગ

• Text nodes

• Attributes

DOM તમને વેબ પેજ સાથે કોડ દ્વારા ઇન્ટરેક્ટ કરવાની ક્ષમતા આપે છે.

---

🏗 DOM કેવી રીતે કામ કરે છે?

જ્યારે વેબ પેજ લોડ થાય છે ત્યારે બ્રાઉઝર HTML ને વાંચીને એક DOM Tree Structure બનાવે છે.
આ વૃક્ષમાં:

• સર્વોચ્ચ લેવલનો નોડ → document

• તેમાં → html

• html માં → head અને body

• body માં → અન્ય બધા elements

JavaScript આ DOM વૃક્ષમાં જઈને elements ને શોધી શકે છે અને તેમને બદલાવી શકે છે.

---

🧩 DOMનાં મુખ્ય ભાગો

1️⃣ Document Object

આ આખા વેબ પેજનું પ્રતિનિધિત્વ કરે છે.
ઉદાહરણ:

2️⃣ Elements

HTML ટૅગ્સ જેવા કે <p>, <h1>, <div>
ઉદાહરણ:

3️⃣ Attributes

HTML ટેગના ગુણધર્મો: id, class, src, href
ઉદાહરણ:

4️⃣ Text Nodes

ટૅગની અંદર લખેલું ટેક્સ્ટ જ text node છે.

---

🎯 DOMનો મુખ્ય ઉપયોગ

✔ વેબ પેજને બદલવો

✔ CSS બદલવું

✔ નવો HTML ઉમેરવો

✔ ઇવેન્ટ હેન્ડલિંગ

---

🌳 DOM Tree Structure નો સરળ આકાર (Diagram)

આ રીતે બ્રાઉઝર દરેક ટૅગની વચ્ચે parent-child સબંધ બનાવે છે.

---

🔍 DOM સાથે JavaScript નું સંબંધ

JavaScript નો મુખ્ય હિસ્સો DOM સાથે કામ કરવાનો છે.
JavaScript DOM દ્વારા વેબ પેજને:

• વાંચી શકે છે

• શોધી શકે છે

• બદલાવી શકે છે

• ઘટકો ઉમેરવા/દૂર કરી શકે છે

• ઇવેન્ટ્સ હેન્ડલ કરી શકે છે

DOM વગર JavaScript વેબ પેજને બદલી શકતું નથી.