What Is the DOM?

DOM ဆိုတာ ဘာလဲ?

DOM ဆိုတာ Document Object Model ရဲ့ အတိုကောက်ပဲ ဖြစ်ပါတယ်။ ရှုပ်ထွေးတဲ့ စာတွေ့ ရှင်းလင်းချက်တွေကို ခဏထားလိုက်ပါ။ ရိုးရိုးရှင်းရှင်းလေးပဲ နားလည်အောင် အရင်ကြည့်ရအောင်။

သင် ရေးသားလိုက်တဲ့ HTML Code တွေကို Browser (Chrome, Safari စသည်) က ဖတ်ရှုပြီးတဲ့အခါ၊ အဲ့ဒီ Code တွေကို သူ့ရဲ့ Memory ထဲမှာ Tree (သစ်ပင်ပုံစံ) Structure တစ်ခုအနေနဲ့ တည်ဆောက်လိုက်ပါတယ်။ အဲ့ဒီလို တည်ဆောက်ထားတဲ့ ဖွဲ့စည်းပုံ ကြီးကိုပဲ DOM လို့ ခေါ်ဆိုတာ ဖြစ်ပါတယ်။

Javascript ဟာ HTML ဖိုင်ကို သွားပြီး တိုက်ရိုက် မပြင်ပါဘူး။ အဲ့ဒီအစား Browser ထဲမှာ တည်ဆောက်ထားတဲ့ DOM Tree ကြီးကို လှမ်းပြီး ပြုပြင် ပြောင်းလဲမှုတွေ လုပ်တာပါ။ DOM Tree ကြီး ပြောင်းလဲသွားတာနဲ့ တပြိုင်နက် Browser မျက်နှာပြင်မှာ မြင်ရတဲ့ ပုံစံတွေကလည်း အလိုအလျောက် လိုက်ပါ ပြောင်းလဲသွားမှာ ဖြစ်ပါတယ်။

Tree Structure (အပင်ပုံစံ ဖွဲ့စည်းပုံ)

အောက်ပါ HTML Code လေးကို နမူနာ ကြည့်ကြည့်ပါ။

<html>
  <body>
    <h1>Hello</h1>
    <p>World</p>
  </body>
</html>

အထက်ပါ HTML ကို Browser က ဖတ်ပြီးတဲ့အခါ DOM Tree အနေနဲ့ ဒီလိုမျိုး ဖွဲ့စည်းသွားပါမယ်။

document (အမြစ် - Root)
- <html> (ပင်စည် - Trunk)
  - <body> (ကိုင်းခက် - Branch)
    - <h1> -> “Hello” (အရွက် - Leaf)
    - <p> -> “World” (အရွက် - Leaf)

JavaScript ကနေ ဒီ DOM Tree ထဲက h1, p စတဲ့ Element တွေကို လှမ်းခေါ်ပြီး သူတို့ရဲ့ စာသားတွေ ပြောင်းတာ၊ အရောင်တွေ ပြောင်းတာ၊ ဒါမှမဟုတ် ဖျက်ပစ်တာတွေ လုပ်လို့ ရပါတယ်။ အဲ့ဒီလို လုပ်ဆောင်ခြင်းကို DOM Manipulation (DOM အား ပြုပြင်ကစားခြင်း) လို့ ခေါ်ဆိုပါတယ်။