പേജിലെ പ്രവർത്തനവും ചലനാത്മകവുമായ മാറ്റങ്ങൾക്കുള്ള പ്രധാന ഉപകരണം DOM (ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ) ആണ് - XML/HTML പ്രമാണങ്ങൾക്കായി ഉപയോഗിക്കുന്ന ഒരു ഒബ്ജക്റ്റ് മോഡൽ.
DOM മോഡൽ അനുസരിച്ച്, ഒരു പ്രമാണം ഒരു ശ്രേണിയാണ്.
ഓരോ HTML ടാഗും ഒരു പ്രത്യേക നോഡ് എലമെൻ്റ് ഉണ്ടാക്കുന്നു, ഓരോ ടെക്‌സ്‌റ്റും ഒരു ടെക്സ്റ്റ് എലമെൻ്റ് ഉണ്ടാക്കുന്നു.
ലളിതമായി പറഞ്ഞാൽ, ടാഗുകളുടെ ഒരു ട്രീ എന്ന നിലയിൽ ഒരു ഡോക്യുമെൻ്റിൻ്റെ പ്രതിനിധാനമാണ് DOM. ഈ ട്രീ രൂപപ്പെടുന്നത് ടാഗുകളുടെയും പേജിൻ്റെ ടെക്സ്റ്റ് ശകലങ്ങളുടെയും ഒരു നെസ്റ്റഡ് ഘടനയാണ്, അവ ഓരോന്നും പ്രത്യേക നോഡ് രൂപപ്പെടുത്തുന്നു.
ഏറ്റവും ലളിതമായ DOMഅടുത്ത ഡോക്യുമെൻ്റിനായി നമുക്ക് ആദ്യം DOM ട്രീ നിർമ്മിക്കാം.
തലക്കെട്ട്: മികച്ച പ്രമാണം
ഏറ്റവും പുറം ടാഗ് ആണ്, അതിനാൽ മരം അവിടെ നിന്ന് വളരാൻ തുടങ്ങുന്നു.
അകത്ത് രണ്ട് നോഡുകൾ ഉണ്ട്: കൂടാതെ - അവ ചൈൽഡ് നോഡുകളായി മാറുന്നു.
ടാഗ് ഫോം മൂലക നോഡുകൾ(ഘടക നോഡ്). വാചകം അവതരിപ്പിച്ചു ടെക്സ്റ്റ് നോഡുകൾ(ടെക്സ്റ്റ് നോഡ്). രണ്ടും DOM ട്രീയിലെ തുല്യ നോഡുകളാണ്.
കൂടുതൽ സങ്കീർണ്ണമായ ഉദാഹരണംഇനി കൂടുതൽ സുപ്രധാനമായ ഒരു പേജ് നോക്കാം:
മൂസിനെക്കുറിച്ച് മൂസിനെക്കുറിച്ചുള്ള സത്യം.
ശ്രേണിയുടെ മൂല ഘടകം html ആണ്. അദ്ദേഹത്തിന് രണ്ട് പിൻഗാമികളുണ്ട്. ആദ്യത്തേത് തല, രണ്ടാമത്തേത് ശരീരം. കൂടാതെ, ഓരോ നെസ്റ്റഡ് ടാഗും മുകളിലുള്ള ടാഗിൻ്റെ ഒരു കുട്ടിയാണ്:
ഈ ചിത്രത്തിൽ, നീല നോഡ് ഘടകങ്ങളെ സൂചിപ്പിക്കുന്നു, കറുപ്പ് ടെക്സ്റ്റ് ഘടകങ്ങളെ സൂചിപ്പിക്കുന്നു.
നീല നോഡ് ഘടകങ്ങൾ - HTML ടാഗുകൾ ഉപയോഗിച്ചാണ് ട്രീ രൂപപ്പെടുന്നത്.
നിങ്ങൾ ഒരു HTML പേജിൽ നേരിട്ട് വരച്ചാൽ ഒരു വൃക്ഷം എങ്ങനെയിരിക്കും:
വഴിയിൽ, ഈ ചിത്രത്തിലെ ട്രീ വൈറ്റ്‌സ്‌പേസ് പ്രതീകങ്ങൾ മാത്രം ഉൾക്കൊള്ളുന്ന വാചകം കണക്കിലെടുക്കുന്നില്ല. ഉദാഹരണത്തിന്, അത്തരമൊരു ടെക്സ്റ്റ് നോഡ് ഉടൻ തന്നെ വരണം. അത്തരം "ശൂന്യമായ" നോഡുകൾ അടങ്ങിയിട്ടില്ലാത്ത ഒരു DOM എന്ന് വിളിക്കുന്നു "സാധാരണമാക്കിയ".
കുറച്ചുകൂടി സങ്കീർണ്ണമായ ഒരു പ്രമാണം നോക്കാം.
ഡോക്യുമെൻ്റ് ഡാറ്റ
- ശ്രദ്ധയോടെ
- വിവരങ്ങൾ
മുകളിലെ ടാഗ് html ആണ്, അതിന് കുട്ടികളുടെ തലയും ശരീരവും ഉണ്ട്, അങ്ങനെ പലതും. ഇത് ഒരു ടാഗ് ട്രീയിൽ കലാശിക്കുന്നു:
ആട്രിബ്യൂട്ടുകൾ
ഈ ഉദാഹരണത്തിൽ, നോഡുകൾക്ക് ഇനിപ്പറയുന്ന ആട്രിബ്യൂട്ടുകൾ ഉണ്ട്: ശൈലി , ക്ലാസ് , ഐഡി . പൊതുവായി പറഞ്ഞാൽ, ആട്രിബ്യൂട്ടുകളും DOM-ൽ നോഡുകളായി കണക്കാക്കപ്പെടുന്നു, അവ വ്യക്തമാക്കുന്ന DOM ഘടകമാണ്.
എന്നിരുന്നാലും, വെബ് പ്രോഗ്രാമിംഗിൽ, അവർ സാധാരണയായി ഈ കാടിലേക്ക് ആഴ്ന്നിറങ്ങില്ല, കൂടാതെ ആട്രിബ്യൂട്ടുകൾ ഒരു DOM നോഡിൻ്റെ പ്രോപ്പർട്ടികൾ മാത്രമായി കണക്കാക്കുന്നു, അത് ഞങ്ങൾ പിന്നീട് കാണുന്നത് പോലെ, പ്രോഗ്രാമറുടെ അഭ്യർത്ഥനപ്രകാരം സജ്ജീകരിക്കാനും മാറ്റാനും കഴിയും.
യഥാർത്ഥത്തിൽ, ഇതൊരു രഹസ്യമാണ്, എന്നാൽ DOCTYPE ഒരു DOM നോഡ് കൂടിയാണ്, ഇത് HTML-ൻ്റെ ഇടതുവശത്തുള്ള DOM ട്രീയിൽ സ്ഥിതിചെയ്യുന്നു (ഈ വസ്തുത ചിത്രത്തിൽ മറച്ചിരിക്കുന്നു).
പി.എസ്. തീർച്ചയായും ഇത് രഹസ്യത്തെക്കുറിച്ചുള്ള ഒരു തമാശയാണ്, പക്ഷേ എല്ലാവർക്കും അതിനെക്കുറിച്ച് ശരിക്കും അറിയില്ല. അത്തരം അറിവ് എവിടെ ഉപയോഗപ്രദമാകും എന്ന് ചിന്തിക്കാൻ പ്രയാസമാണ് ...
വ്യത്യസ്ത ബ്രൗസറുകളിൽ നോർമലൈസേഷൻHTML പാഴ്‌സ് ചെയ്യുമ്പോൾ, ഇൻ്റർനെറ്റ് എക്സ്പ്ലോറർ ഉടനടി സൃഷ്ടിക്കുന്നു നോർമലൈസ് ചെയ്തുശൂന്യമായ വാചകത്തിൽ നിന്ന് നോഡുകൾ സൃഷ്ടിക്കാത്ത DOM.
ഫയർഫോക്സിന് വ്യത്യസ്തമായ അഭിപ്രായമുണ്ട്, അത് ഓരോ ടെക്സ്റ്റ് ശകലത്തിൽ നിന്നും ഒരു DOM ഘടകം സൃഷ്ടിക്കുന്നു.
അതിനാൽ, ഫയർഫോക്സിൽ ഈ പ്രമാണത്തിൻ്റെ ട്രീ ഇതുപോലെ കാണപ്പെടുന്നു:
ചിത്രത്തിൽ, സംക്ഷിപ്തതയ്ക്കായി, ടെക്സ്റ്റ് നോഡുകൾ ഒരു ഹാഷ് ഉപയോഗിച്ച് സൂചിപ്പിച്ചിരിക്കുന്നു. ശരീരത്തിൽ 3 കുട്ടികൾക്കു പകരം 7 കുട്ടികളുണ്ട്.
ഓപ്പറയ്ക്കും അഭിമാനിക്കാൻ ചിലതുണ്ട്. അവൾക്ക് "അവനിൽ നിന്ന് തന്നെ" ഒരു അധിക ശൂന്യമായ ഘടകം ചേർക്കാൻ കഴിയും.
ഇത് കാണുന്നതിന്, ഡോക്യുമെൻ്റ് തുറക്കുക. ടെക്സ്റ്റ് നോഡുകൾ ഉൾപ്പെടെ ഡോക്യുമെൻ്റ്.ബോഡിയുടെ ചൈൽഡ് നോഡുകളുടെ എണ്ണം ഇത് നൽകുന്നു.
IE-യ്ക്ക് 3, Firefox-ന് 7, Opera-യ്ക്ക് 8 (!?) എന്നിങ്ങനെയാണ് എനിക്ക് ലഭിക്കുന്നത്.
പ്രായോഗികമായി, ഈ പൊരുത്തക്കേട് വലിയ പ്രശ്നങ്ങൾ സൃഷ്ടിക്കുന്നില്ല, പക്ഷേ നിങ്ങൾ അതിനെക്കുറിച്ച് അറിഞ്ഞിരിക്കണം. ഉദാഹരണത്തിന്, ട്രീ നോഡുകൾ എണ്ണുന്ന കാര്യത്തിൽ വ്യത്യാസം പ്രകടമാകാം.
DOM നൽകുന്ന സാധ്യതകൾഎന്തുകൊണ്ട്, മനോഹരമായ ഡ്രോയിംഗുകൾക്ക് പുറമേ, നമുക്ക് ഒരു ശ്രേണി DOM ആവശ്യമാണ്?
വളരെ ലളിതം:
ഓരോ DOM ഘടകവും ഒരു ഒബ്ജക്റ്റാണ് കൂടാതെ അതിൻ്റെ ഉള്ളടക്കങ്ങൾ കൈകാര്യം ചെയ്യുന്നതിനും മാതാപിതാക്കളെയും കുട്ടികളെയും ആക്സസ് ചെയ്യുന്നതിനും പ്രോപ്പർട്ടികൾ നൽകുന്നു.
ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് DOM കൃത്രിമത്വത്തിന് ഉപയോഗിക്കുന്നു.
പ്രമാണം ഉപയോഗിച്ച്, നിങ്ങൾക്ക് ആവശ്യമുള്ള ട്രീ ഘടകം നേടാനും അതിൻ്റെ ഉള്ളടക്കം മാറ്റാനും കഴിയും.
ഉദാഹരണത്തിന്, ഈ കോഡിന് ol ടാഗ് ഉള്ള ആദ്യ ഘടകം ലഭിക്കുന്നു, രണ്ട് ലിസ്റ്റ് ഘടകങ്ങൾ തുടർച്ചയായി നീക്കം ചെയ്യുന്നു, തുടർന്ന് അവയെ വിപരീത ക്രമത്തിൽ ചേർക്കുന്നു:
Var ol = document.getElementsByTagName("ol") var hiter = ol.removeChild(ol.firstChild) var kovaren = ol.removeChild(ol.firstChild) ol.appendChild(kovaren) ol.appendChild(hiter)
അത്തരമൊരു സ്ക്രിപ്റ്റ് എങ്ങനെ പ്രവർത്തിക്കുന്നു എന്നതിൻ്റെ ഒരു ഉദാഹരണത്തിനായി, മൂസ് പേജിലെ വാചകത്തിൽ ക്ലിക്കുചെയ്യുക
പഴയ ട്യൂട്ടോറിയലുകളിലും സ്ക്രിപ്റ്റുകളിലും, document.write എന്നതിൽ വിളിച്ച് ഒരു പേജിൻ്റെ HTML കോഡ് നേരിട്ട് പരിഷ്ക്കരിക്കുന്നത് നിങ്ങൾക്ക് കാണാൻ കഴിയും.
ആധുനിക സ്ക്രിപ്റ്റുകളിൽ, ഈ രീതി മിക്കവാറും ഉപയോഗിക്കാറില്ല;
document.write ഒഴിവാക്കുക.. നിങ്ങൾ എന്താണ് ചെയ്യുന്നതെന്ന് നിങ്ങൾക്ക് ശരിക്കും അറിയാമെങ്കിൽ ഒഴികെ (നിങ്ങൾ എന്തിനാണ് ട്യൂട്ടോറിയൽ വായിക്കുന്നത് - നിങ്ങൾ ഇതിനകം ഒരു ഗുരുവാണ്)
DOM ഘടകങ്ങളുടെ ആക്സസ് രീതികളും സവിശേഷതകളും നമുക്ക് അടുത്തറിയാം.
ഘടകങ്ങൾ ആക്സസ് ചെയ്യുന്നുഎല്ലാ DOM ആക്‌സസുകളും പരിഷ്‌ക്കരണങ്ങളും ഡോക്യുമെൻ്റ് ഒബ്‌ജക്റ്റിൽ നിന്നാണ് ഉത്ഭവിക്കുന്നത്.
നമുക്ക് മരത്തിൻ്റെ മുകളിൽ നിന്ന് തുടങ്ങാം.
document.documentElementമുകളിലെ ടാഗ്. ശരിയായ HTML പേജിൻ്റെ കാര്യത്തിൽ, ഇത് .
പ്രമാണം.ശരീരംപ്രമാണത്തിൽ ഉണ്ടെങ്കിൽ ടാഗ് ചെയ്യുക (ആയിരിക്കണം).
ഇനിപ്പറയുന്ന ഉദാഹരണം, ഒരു ബട്ടണിൽ ക്ലിക്ക് ചെയ്യുമ്പോൾ, document.documentElement, document.body ഒബ്ജക്റ്റുകൾ എന്നിവയുടെ ടെക്സ്റ്റ് പ്രാതിനിധ്യം നൽകും. എല്ലായിടത്തും ഒബ്ജക്റ്റുകൾ ഒരുപോലെയാണെങ്കിലും സ്ട്രിംഗ് തന്നെ ബ്രൗസറിനെ ആശ്രയിച്ചിരിക്കുന്നു.
ഫംഗ്ഷൻ go() (അലേർട്ട്(document.documentElement) അലർട്ട്(document.body) )
DOM ഘടകങ്ങളുടെ തരങ്ങൾDOM-ലെ എല്ലാ ഘടകത്തിനും ഒരു തരം ഉണ്ട്. അതിൻ്റെ നമ്പർ elem.nodeType ആട്രിബ്യൂട്ടിൽ സംഭരിച്ചിരിക്കുന്നു
മൊത്തത്തിൽ, DOM-ൽ 12 തരം ഘടകങ്ങൾ ഉണ്ട്.
സാധാരണയായി ഒന്ന് മാത്രമേ ഉപയോഗിക്കൂ: Node.ELEMENT_NODE, അതിൻ്റെ നമ്പർ 1 ആണ്. ഈ തരത്തിലുള്ള ഘടകങ്ങൾ HTML ടാഗുകളുമായി പൊരുത്തപ്പെടുന്നു.
ചിലപ്പോൾ Node.TEXT_NODE തരവും ഉപയോഗപ്രദമാണ്, ഇത് 3 ന് തുല്യമാണ്. ഇവ ടെക്സ്റ്റ് ഘടകങ്ങളാണ്.
ജാവാസ്ക്രിപ്റ്റ് പ്രോഗ്രാമിംഗിൽ മറ്റ് തരങ്ങൾ ഉപയോഗിക്കുന്നില്ല.
ഇനിപ്പറയുന്ന ഉദാഹരണം, ഒരു ബട്ടണിൽ ക്ലിക്കുചെയ്യുമ്പോൾ, document.documentElement തരങ്ങളും തുടർന്ന് document.body നോഡിൻ്റെ അവസാന കുട്ടിയുടെ തരവും പ്രിൻ്റ് ചെയ്യും. ഇതൊരു ടെക്സ്റ്റ് നോഡാണ്.
ഫംഗ്ഷൻ go() ( alert(document.documentElement.nodeType) അലർട്ട്(document.body.lastChild.nodeType) ) വാചകം
ഉദാഹരണംഉദാഹരണത്തിന്, മുകളിൽ വലത് കോണിൽ ഒരു നോഡ് ടൈപ്പ് നമ്പറുള്ള ഒരു ഫ്രെയിമിൽ ദൃശ്യമാകുന്ന ഓരോ ഘടകങ്ങളും ചുറ്റപ്പെട്ടിട്ടുണ്ടെങ്കിൽ മുകളിലെ ഉദാഹരണത്തിൽ നിന്നുള്ള ഡോക്യുമെൻ്റ് ഒരു ബ്രൗസറിൽ ഇങ്ങനെയായിരിക്കും.
...ഡാറ്റ
- ശ്രദ്ധയോടെ
- വിവരങ്ങൾ
ശരീരത്തിനുള്ളിലെ മൂലകങ്ങൾ മാത്രമാണ് ഇവിടെ കാണിക്കുന്നത്, കാരണം അവ മാത്രമേ പേജിൽ പ്രദർശിപ്പിച്ചിട്ടുള്ളൂ. ടൈപ്പ് 1 (ടാഗുകൾ) ഘടകങ്ങൾക്ക്, ടെക്സ്റ്റ് ഘടകങ്ങൾക്ക് (ടൈപ്പ് 3) അനുബന്ധ ടാഗ് ബ്രാക്കറ്റിൽ സൂചിപ്പിച്ചിരിക്കുന്നു, ഒരു സംഖ്യയുണ്ട്.
ശിശു ഘടകങ്ങൾഡോക്യുമെൻ്റ്.ബോഡിയുടെ എല്ലാ കുട്ടികളിലൂടെയും ഇനിപ്പറയുന്ന ഉദാഹരണം ലൂപ്പ് ചെയ്യുന്നു.
വേണ്ടി(var i=0; i BODY
ശൈലിഈ പ്രോപ്പർട്ടി ശൈലി നിയന്ത്രിക്കുന്നു. ഇത് CSS-ൽ ഒരു ശൈലി ക്രമീകരിക്കുന്നതിന് സമാനമാണ്.
ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് element.style.width സജ്ജമാക്കാൻ കഴിയും:
ഈ ബട്ടണിൻ്റെ ഉറവിട കോഡ്:
ഒരു പൊതു റീപ്ലേസ്‌മെൻ്റ് റൂൾ ഉണ്ട് - ഒരു CSS ആട്രിബ്യൂട്ടിൽ ഹൈഫനുകൾ ഉണ്ടെങ്കിൽ, സ്റ്റൈൽ സജ്ജീകരിക്കുന്നതിന് നിങ്ങൾ അവയെ വലിയക്ഷരങ്ങൾ ഉപയോഗിച്ച് മാറ്റിസ്ഥാപിക്കേണ്ടതുണ്ട്.
ഉദാഹരണത്തിന്, z-ഇൻഡക്സ് പ്രോപ്പർട്ടി 1000 ആയി സജ്ജീകരിക്കുന്നതിന്, നിങ്ങൾ സജ്ജീകരിക്കേണ്ടതുണ്ട്:
Element.style.zIndex = 1000
ആന്തരിക HTMLഒരു സമയത്ത് ഈ പ്രോപ്പർട്ടി ഐഇയിൽ മാത്രമേ പിന്തുണച്ചിരുന്നുള്ളൂ. ഇപ്പോൾ എല്ലാ ആധുനിക ബ്രൗസറുകളും ഇതിനെ പിന്തുണയ്ക്കുന്നു.
നോഡിനുള്ളിലെ എല്ലാ HTML കോഡുകളും ഇതിൽ അടങ്ങിയിരിക്കുന്നു, അത് മാറ്റാവുന്നതാണ്.
ഒരു പേജിൻ്റെ ഉള്ളടക്കം ചലനാത്മകമായി മാറ്റുന്നതിനാണ് innerHTML പ്രോപ്പർട്ടി പ്രധാനമായും ഉപയോഗിക്കുന്നത്, ഉദാഹരണത്തിന്:
Document.getElementById("അടിക്കുറിപ്പ്").innerHTML = "ബൈ!"
ഒരുപക്ഷേ innerHTML ആണ് ഏറ്റവും സാധാരണയായി ഉപയോഗിക്കുന്ന DOM എലമെൻ്റ് പ്രോപ്പർട്ടികൾ.
ക്ലാസ്സിൻ്റെ പേര്ഈ പ്രോപ്പർട്ടി മൂലകത്തിൻ്റെ ക്ലാസ് വ്യക്തമാക്കുന്നു. ഇത് "ക്ലാസ്" html ആട്രിബ്യൂട്ടിനോട് പൂർണ്ണമായും സമാനമാണ്.
Elem.className = "newclass"
onclick, onkeypress, onfocus...കൂടാതെ "ഓൺ..." എന്ന് തുടങ്ങുന്ന മറ്റ് പ്രോപ്പർട്ടികൾ അനുബന്ധ ഇവൻ്റുകൾക്കായി സ്റ്റോർ ഹാൻഡ്‌ലർ ഫംഗ്ഷനുകൾ. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് ഒരു ഓൺക്ലിക്ക് ഇവൻ്റ് ഹാൻഡ്‌ലർ നൽകാം.
ഈ പ്രോപ്പർട്ടികളെയും ഇവൻ്റ് ഹാൻഡ്‌ലറുകളെയും കുറിച്ചുള്ള കൂടുതൽ വിവരങ്ങൾക്ക്, കാണുക
വിഷയം ശരിക്കും സങ്കീർണ്ണമാണ്. പക്ഷേ, അവർ പറയുന്നതുപോലെ, പിശാച് വരച്ചതുപോലെ ഭയങ്കരനല്ല. ഇവിടെയാണ് എനിക്ക് ഏറ്റവും കടുപ്പമേറിയ നട്ട് ലഭിക്കുന്നത്: കഴിയുന്നത്ര ദഹിപ്പിക്കാവുന്ന "പെയിൻറിംഗ്" എന്ന ഈ സൂപ്പർ ടാസ്ക്ക്, പക്ഷേ പൂർണ്ണമായും പ്രാകൃതമല്ല. ഇതുവരെ, ഞാൻ വായിച്ച എല്ലാ മെറ്റീരിയലുകളും അമൂർത്തമോ പ്രാകൃതമോ ആണ്.
എന്താണ് DOMDOM എന്നതിൻ്റെ ചുരുക്കെഴുത്ത് ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ(ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ).
HTML, XHTML, XML ഡോക്യുമെൻ്റുകളുടെ ഉള്ളടക്കം ആക്സസ് ചെയ്യുന്നതിനുള്ള ഒരു പ്രോഗ്രാമിംഗ് ഇൻ്റർഫേസാണ് DOM, അതായത്, HTML, XHTML, XML ടാഗുകളും ആട്രിബ്യൂട്ടുകളും കൂടാതെ CSS ശൈലികളും പ്രോഗ്രാമിംഗ് ഒബ്ജക്റ്റുകളായി പ്രതിനിധീകരിക്കുന്നു. ജാവാസ്ക്രിപ്റ്റും മറ്റ് വെബ് പ്രോഗ്രാമിംഗ് ഭാഷകളും ഈ മോഡലിൽ പ്രവർത്തിക്കുന്നു.
ഒരു ചെറിയ ചരിത്രം
4 DOM ലെവലുകൾ ഉണ്ട് (0, 1, 2, 3).
ലെവൽ 0 (1996) ൽ ലെവൽ 1-ന് മുമ്പുണ്ടായിരുന്ന DOM മോഡലുകൾ ഉൾപ്പെടുന്നു. ഇവ പ്രധാനമായും ശേഖരങ്ങളാണ്: document.images, document.forms, document.layers, document.all. ഈ മോഡലുകൾ ഔപചാരികമായി W3C പ്രസിദ്ധീകരിച്ച DOM സ്പെസിഫിക്കേഷനുകളല്ല. പകരം, സ്റ്റാൻഡേർഡൈസേഷൻ പ്രക്രിയ ആരംഭിക്കുന്നതിന് മുമ്പ് നിലനിന്നിരുന്നതിനെക്കുറിച്ചുള്ള വിവരങ്ങളെ അവ പ്രതിനിധീകരിക്കുന്നു.
ലെവൽ 1 (1997) ൽ XML ഡോക്യുമെൻ്റുകൾ പ്രോസസ്സ് ചെയ്യുന്നതിനുള്ള അടിസ്ഥാന പ്രവർത്തനങ്ങളും ഉൾപ്പെടുത്തിയിട്ടുണ്ട്: വ്യക്തിഗത നോഡുകളിൽ പ്രവർത്തിക്കാനുള്ള നിരവധി മാർഗങ്ങൾ, XML പ്രോസസ്സിംഗ് നിർദ്ദേശങ്ങൾക്കൊപ്പം പ്രവർത്തിക്കുക തുടങ്ങിയവ.
കൂടാതെ, വ്യക്തിഗത HTML ഘടകങ്ങൾ കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന നിരവധി പ്രത്യേക ഇൻ്റർഫേസുകൾ DOM ലെവൽ 1-ൽ അടങ്ങിയിരിക്കുന്നു. ഉദാഹരണത്തിന്, നിങ്ങൾക്ക് HTML പട്ടികകൾ, ഫോമുകൾ, സെലക്ഷൻ ലിസ്റ്റുകൾ മുതലായവ ഉപയോഗിച്ച് പ്രവർത്തിക്കാൻ കഴിയും.
DOM ലെവൽ 2 (2002) നിരവധി പുതിയ സവിശേഷതകൾ ചേർത്തു.
DOM ലെവൽ 1-ന് നെയിംസ്‌പേസുകൾക്കുള്ള പിന്തുണയില്ലെങ്കിലും, XML പ്രമാണങ്ങൾ തയ്യാറാക്കുന്നതിനും പ്രോസസ്സ് ചെയ്യുന്നതിനുമുള്ള ആവശ്യകതകളുമായി ബന്ധപ്പെട്ട നെയിംസ്‌പെയ്‌സുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള രീതികൾ DOM ലെവൽ 2 ഇൻ്റർഫേസുകളിൽ അടങ്ങിയിരിക്കുന്നു.
കൂടാതെ, DOM ലെവൽ 2 ഇവൻ്റുകൾ പിന്തുണയ്ക്കുന്നു.
ലെവൽ 2 ആണ് DOM സ്പെസിഫിക്കേഷൻ്റെ നിലവിലെ ലെവൽ, എന്നാൽ ലെവൽ 3 സ്പെസിഫിക്കേഷൻ്റെ ചില വിഭാഗങ്ങൾ W3C ശുപാർശ ചെയ്യുന്നു.
DOM ലെവൽ 3 എന്നത് DOM ലെവൽ 2-ൻ്റെ പ്രവർത്തനക്ഷമത വർദ്ധിപ്പിക്കുന്ന സ്പെസിഫിക്കേഷൻ്റെ ഒരു വർക്കിംഗ് ഡ്രാഫ്റ്റാണ്. ഈ സ്പെസിഫിക്കേഷൻ്റെ ഏറ്റവും പ്രധാനപ്പെട്ട സവിശേഷതകളിലൊന്ന് നിരവധി DOM എക്സ്റ്റൻഷനുകൾക്കൊപ്പം പ്രവർത്തിക്കാനുള്ള കഴിവാണ്.
"സോഫ്റ്റ്വെയർ ഇൻ്റർഫേസ്" എന്താണ് അർത്ഥമാക്കുന്നത്?
ഇൻ്റർഫേസ് എന്ന ഇംഗ്ലീഷ് പദത്തെ "കോൺടാക്റ്റ് ഏരിയ" എന്ന് വിവർത്തനം ചെയ്യാം. ഒരു കമ്പ്യൂട്ടർ, ഏകദേശം പറഞ്ഞാൽ, രണ്ട് കാര്യങ്ങൾ മാത്രമേ മനസ്സിലാക്കൂ: ശൂന്യമായ ബിറ്റും പൂരിപ്പിച്ച ബിറ്റും. ഒരു കമ്പ്യൂട്ടർ "സംസാരിക്കുന്ന" ഭാഷയെ, അനന്തമായ എണ്ണം വ്യത്യസ്ത കോമ്പിനേഷനുകൾ നൽകുന്ന പൂജ്യങ്ങളുടെയും ഒന്നിൻ്റെയും അനന്തമായ സ്ട്രിംഗായി കണക്കാക്കാം.
ഏതൊരു പ്രോഗ്രാം കോഡും കമ്പ്യൂട്ടർ പ്രവർത്തിക്കുന്ന ഈ "പൂജ്യം, വണ്ണുകൾ" എന്നിവയുടെ പ്രോഗ്രാമർക്ക് മനസ്സിലാക്കാവുന്ന ഒരു വ്യാഖ്യാനമാണ്. അതിനാൽ, ഏതൊരു പ്രോഗ്രാമിംഗ് ഭാഷയും ഒരു മനുഷ്യ-മെഷീൻ ഇൻ്റർഫേസ് ആണ്.
മറ്റ് കമ്പ്യൂട്ടർ ആപ്ലിക്കേഷനുകൾ പോലെ തന്നെ ബ്രൗസറുകളും പ്രവർത്തിക്കുന്നു. അവർ HTML, XML, CSS കോഡുകൾ, JavaScript, PHP, Perl മുതലായവയെ "പൂജ്യം, ഒന്ന്" എന്നിങ്ങനെ വ്യാഖ്യാനിക്കുന്നു. ഈ ബഹുഭാഷയെ നേരിടാൻ ഒരു പൊതുവേദി ആവശ്യമാണ്. ഈ പ്ലാറ്റ്ഫോം DOM ആണ് - ഒരു നിർദ്ദിഷ്ട പ്രോഗ്രാമിംഗ് ഭാഷയെയോ മാർക്ക്അപ്പിനെയോ ആശ്രയിക്കാത്ത ഒരു സ്പെസിഫിക്കേഷൻ. വെബ് പേജുകൾ സൃഷ്ടിക്കുന്നതുമായി ബന്ധപ്പെട്ട നിരവധി ജനപ്രിയ പ്രോഗ്രാമിംഗ് ഭാഷകളിൽ ഉപയോഗിക്കാൻ കഴിയുന്ന ഒരു ഇൻ്റർഫേസാണിത്, കൂടാതെ DOM ഒബ്ജക്റ്റുകൾ മനസ്സിലാക്കാനും വ്യാഖ്യാനിക്കാനും കഴിയും.
DOM, ബ്രൗസറുകൾ
DOM, JavaScript എന്നിവ
JavaScript-ൽ, DOM ഒബ്ജക്റ്റുകളുടെ ശ്രേണിപരമായ ഗോവണിയുടെ മുകൾഭാഗം, ഈ ഇൻ്റർഫേസിലേക്കുള്ള ഒരുതരം “കണ്ടക്ടർ” ഒരു ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റാണ്, കൂടാതെ DOM ഒബ്ജക്റ്റുകൾ അതിൻ്റെ പ്രോപ്പർട്ടികൾ, അതിൻ്റെ ഗുണവിശേഷതകൾ മുതലായവയായി മാറുന്നു. അവയെ DOM നോഡുകൾ എന്നും വിളിക്കുന്നു.
DOM നോഡുകൾDOM ലെവൽ 2ൽ 12 തരം നോഡുകൾ ഉണ്ട്. ഓരോ DOM നോഡ് തരത്തിനും ഒരു അദ്വിതീയ നാമമുള്ള സ്ഥിരാങ്കം നൽകിയിരിക്കുന്നു. മിക്ക നോഡുകളും XML-ൽ പ്രവർത്തിക്കാൻ രൂപകൽപ്പന ചെയ്തിട്ടുള്ളതാണ്. നമ്മൾ ചെയ്യുന്ന HTML - JavaScript അസംബ്ലിയിൽ, 5 തരം മാത്രമേ ഉപയോഗിക്കാൻ കഴിയൂ. എന്നാൽ ഈ "മഞ്ഞുമലയുടെ അഗ്രം" പോലും ഒന്നോ രണ്ടോ പാഠങ്ങളിൽ ഉൾക്കൊള്ളാൻ കഴിയാത്ത വളരെ "പടരുന്ന വൃക്ഷം" ആണ്.
W3C DOM സ്പെസിഫിക്കേഷനിൽ നിർവചിച്ചിരിക്കുന്ന നോഡ് തരം കോൺസ്റ്റൻ്റുകളുടെ പൂർണ്ണ സെറ്റ് (HTML - JavaScript-ന് ലഭ്യമായ നോഡുകൾ നീല നിറത്തിൽ ഹൈലൈറ്റ് ചെയ്തിരിക്കുന്നു):
സ്ഥിരമായ പേര് |
അർത്ഥം |
വിവരണം |
നോഡ്.ELEMENT_NODE |
എലമെൻ്റ് നോഡ് (ഡോക്യുമെൻ്റിൻ്റെ റൂട്ട് എലമെൻ്റ് നൽകുന്നു, HTML പ്രമാണങ്ങൾക്ക് ഇത് HTML ഘടകം ആണ്) |
|
നോഡ്.ATTRIBUTE_NODE |
ആട്രിബ്യൂട്ട് നോഡ് (ഒരു XML അല്ലെങ്കിൽ HTML പ്രമാണ ഘടകത്തിൻ്റെ ആട്രിബ്യൂട്ട് നൽകുന്നു) |
|
ടെക്സ്റ്റ് നോഡ് (#ടെക്സ്റ്റ്) |
||
നോഡ്.CDATA_SECTION_NODE |
CDATA സെക്ഷൻ നോഡ് (XML: പ്രതീക ഡാറ്റ പ്രദർശിപ്പിക്കുന്നതിനുള്ള ഒരു ഇതര വാക്യഘടന) |
|
നോഡ്.ENTITY_REFERENCE_NODE |
||
നോഡ്.ENTITY_NODE |
പാർട്ടീഷൻ നോഡ് |
|
നോഡ്.PROCESSING_INSTRUCTION_NODE |
XML ഡയറക്റ്റീവ് നോഡ് |
|
നോഡ്.COMMENT_NODE |
കമൻ്റ് നോഡ് |
|
നോഡ്.DOCUMENT_NODE |
ഡോക്യുമെൻ്റ് നോഡ് (ഡോക്യുമെൻ്റ് ഉള്ളടക്കം ആക്സസ് ചെയ്യുന്നതിനും അതിൻ്റെ ഘടകങ്ങൾ സൃഷ്ടിക്കുന്നതിനുമുള്ള അടിസ്ഥാനം) |
|
നോഡ്.DOCUMENT_TYPE_NODE |
ഡോക്യുമെൻ്റ് തരം നോഡ് (ഈ ഡോക്യുമെൻ്റിൻ്റെ തരം നൽകുന്നു, അതായത് ഡോക്‌ടൈപ്പ് ടാഗിൻ്റെ മൂല്യം) |
|
നോഡ്.DOCUMENT_FRAGMENT_NODE |
ഡോക്യുമെൻ്റ് ഫ്രാഗ്‌മെൻ്റ് നോഡ് (ഡോക്യുമെൻ്റ് ട്രീയുടെ ഭാഗം എക്‌സ്‌ട്രാക്റ്റുചെയ്യൽ, ഒരു പുതിയ ഡോക്യുമെൻ്റ് ശകലം സൃഷ്ടിക്കൽ, ഒരു നോഡിൻ്റെ ചൈൽഡ് ആയി ഒരു ശകലം ചേർക്കൽ മുതലായവ) |
|
നോഡ്.NOTATION_NODE |
നോട്ടേഷൻ നോഡ്* |
* പാഴ്‌സ് ചെയ്യാത്ത വിഭാഗങ്ങളുടെ ഫോർമാറ്റ്, നൊട്ടേഷൻ ആട്രിബ്യൂട്ട് ഉള്ള ഘടകങ്ങളുടെ ഫോർമാറ്റ് അല്ലെങ്കിൽ നിർദ്ദേശം അഭിസംബോധന ചെയ്ത ആപ്ലിക്കേഷൻ പ്രോഗ്രാം എന്നിവ തിരിച്ചറിയുന്ന പേരുകളാണ് നോട്ടേഷനുകൾ.
(ഇത് വ്യക്തമല്ലേ? എനിക്കിപ്പോഴും ഉറപ്പില്ല.)
DOM-ലെ ഡോക്യുമെൻ്റ് ഘടന
< title>എല്ലാ പ്രമാണ വസ്തുക്കളും DOM നോഡുകളാണ്. നമുക്ക് ഒരു അടിസ്ഥാന പ്രമാണം നോക്കാം:DOM തലക്കെട്ട്
ഖണ്ഡിക വാചകം
അതിൻ്റെ DOM ട്രീയുടെ ഒരു ഡയഗ്രം ഇതാ:
ഓരോ നോഡിനും ചൈൽഡ് നോഡുകൾ ഉണ്ടായിരിക്കാം (അമ്പടയാളങ്ങൾ അവയിലേക്ക് നയിക്കുന്നു). ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് - ഡോക്യുമെൻ്റ് ട്രീയുടെ അടിസ്ഥാനം - ഒരു നോഡ് കൂടിയാണ്, പക്ഷേ ഇതിന് ഒരു പാരൻ്റ് നോഡ് ഇല്ല കൂടാതെ മറ്റ് നോഡുകൾക്ക് ഇല്ലാത്ത നിരവധി ഗുണങ്ങളും രീതികളും ഉണ്ട്. ഇതിന് ഒരു ചൈൽഡ് നോഡ് ഉണ്ട്: ഘടകം.
ഒരു മൂലകത്തിന് രണ്ട് ചൈൽഡ് നോഡുകൾ ഉണ്ട്: കൂടാതെ, അവയിൽ അടങ്ങിയിരിക്കുന്ന എല്ലാ ഘടകങ്ങളും കുട്ടികളായി മാറുന്നു.
ശ്രദ്ധ!
DOM തലക്കെട്ട്
."ഘടകം", "ടാഗ്" എന്നിവ പര്യായമല്ല. ഒരു ടാഗ് ഒരു മാർക്ക്അപ്പ് അടയാളമാണ്: - ഇവ രണ്ട് വ്യത്യസ്ത ടാഗുകളാണ്. ഈ ടാഗുകളാൽ അടയാളപ്പെടുത്തിയിരിക്കുന്ന ഒരു വസ്തുവാണ് ഒരു ഘടകം:
ഘടകങ്ങൾ, കൂടാതെ
ഉള്ളിൽ വാചകം അടങ്ങിയിരിക്കുന്നു. ഇത് അവരുടെ ചൈൽഡ് ടെക്സ്റ്റ് നോഡുകളാണ്. മൂലകത്തിന് ഒരു ആട്രിബ്യൂട്ടും ഉണ്ട്: align="center" . ആട്രിബ്യൂട്ട് നോഡുകൾ അവ അടങ്ങിയിരിക്കുന്ന മൂലകങ്ങളുടെ ചൈൽഡ് നോഡുകൾ കൂടിയാണ്.
DOM ട്രീ നോഡുകളുമായി പ്രവർത്തിക്കുമ്പോൾ, അവയുടെ ഗുണങ്ങളും രീതികളും ഉപയോഗിക്കുന്നു.നോഡുകളുടെ ചില സവിശേഷതകൾ
ചെറിയ ആമുഖം
ഞാൻ ഒരിക്കൽ കൂടി ആവർത്തിക്കുന്നു: ഞങ്ങൾ സ്ക്രിപ്റ്റുകളിൽ പേജ് ഘടകങ്ങൾ ആക്സസ് ചെയ്യുമ്പോൾ, ഞങ്ങൾ ജാവാസ്ക്രിപ്റ്റ് ഭാഷയിൽ മാത്രമല്ല, അതിൽ ഉൾച്ചേർത്ത DOM ഇൻ്റർഫേസുമായും ഇടപെടുന്നു. ചിലപ്പോൾ നിങ്ങൾ ഇതിനെക്കുറിച്ച് ബോധവാന്മാരായിരിക്കണം, ചിലപ്പോൾ "ഞങ്ങൾ ഗദ്യത്തിലാണ് സംസാരിക്കുന്നത്" എന്ന് നിങ്ങൾക്ക് മറക്കാം.
ഈ രീതിയിൽ DOM ഒബ്ജക്റ്റ് മോഡലിൽ നിന്ന് ഞങ്ങൾ ഇതിനകം ചില ഗുണങ്ങളും രീതികളും ഉപയോഗിച്ചിട്ടുണ്ട്. അതിനാൽ, കാലാകാലങ്ങളിൽ ഞാൻ മുൻ പാഠങ്ങളിലേക്കുള്ള ലിങ്കുകൾ നൽകും.
ഈ പാഠത്തിൽ, എല്ലാ ബ്രൗസറുകളിലെയും എല്ലാ നോഡുകളുടെയും എല്ലാ ഗുണങ്ങളും പരിഗണിച്ച് ഞങ്ങൾ "അക്കാദമിക്" റൂട്ടിലേക്ക് പോകില്ല. ആദ്യം, അവയിൽ ഏറ്റവും പ്രായോഗികവും "സംഘർഷരഹിതവുമായ" പരിചയപ്പെടാം.
അതുകൊണ്ടാണ് ഞങ്ങൾ പതിവുപോലെ "പ്രധാന പ്രോപ്പർട്ടികൾ" ഉപയോഗിച്ച് ആരംഭിക്കാത്തത്: nodeName, nodeValue.
ടാഗ് നെയിം
മൂലകത്തിൻ്റെ ടാഗിൻ്റെ പേര് അടങ്ങിയ ഒരു സ്ട്രിംഗ് നൽകുന്നു. എല്ലാ ടാഗ് നെയിം മൂല്യങ്ങളിലും വലിയക്ഷരങ്ങൾ മാത്രമേ അടങ്ങിയിട്ടുള്ളൂ.
വാക്യഘടനഘടകംഉദാഹരണം
.tagName
ടാഗ് നെയിം പ്രോപ്പർട്ടി പരിശോധിക്കുന്നു document.write(document.getElementById("ടെസ്റ്റ് ടാഗ് നെയിം"
).tagName)
ഫലം
ടാഗ് നെയിം പ്രോപ്പർട്ടി പരിശോധിക്കുന്നു
ആന്തരിക HTML
മൂലകത്തിൻ്റെ ഉള്ളടക്കത്തിലേക്ക് പ്രവേശനം നൽകുന്നു. ടെക്സ്റ്റ് ഉള്ളടക്കം മാത്രമല്ല, ഘടകത്തിനുള്ളിൽ സ്ഥിതി ചെയ്യുന്ന എല്ലാ HTML ടാഗുകളും വ്യക്തമാക്കുന്നു.
ഈ പ്രോപ്പർട്ടി വായനയ്ക്ക് മാത്രമല്ല, ഉള്ളടക്കം മാറ്റുന്നതിനും കൂടിയാണ്.
കുറിപ്പ്
IE-യിൽ, innerHTML എന്നത് നിരവധി ഘടകങ്ങൾക്ക് വായിക്കാൻ മാത്രം: എല്ലാ പട്ടിക ഘടകങ്ങളും ഒഴികെ
ഉദാഹരണത്തിന്, ഒരു ഘടകവുമില്ലാതെ ഞങ്ങൾ ഒരു ശൂന്യമായ പട്ടിക സൃഷ്ടിച്ചു
IE ഒരു "അജ്ഞാത റൺടൈം പിശക്" എറിയുകയും മറ്റ് ബ്രൗസറുകൾ ഒട്ടിക്കൽ നടത്തുകയും ചെയ്യും.
അതേ സമയം, ഒരു മൂലകത്തിൻ്റെ നിലവിലുള്ള ഉള്ളടക്കം ഞങ്ങൾ അന്വേഷിക്കുകയാണെങ്കിൽ
മൂലകത്തിൻ്റെ ടാഗിൻ്റെ പേര് അടങ്ങിയ ഒരു സ്ട്രിംഗ് നൽകുന്നു. എല്ലാ ടാഗ് നെയിം മൂല്യങ്ങളിലും വലിയക്ഷരങ്ങൾ മാത്രമേ അടങ്ങിയിട്ടുള്ളൂ.
വാക്യഘടന.innerHTML = "അസൈൻ ചെയ്ത വാചകം"ഉദാഹരണം
|
ചേർക്കാനുള്ള ഖണ്ഡിക // ഈ ഫംഗ്ഷൻ വാചകം വായിക്കുകയും തന്നിരിക്കുന്ന ഖണ്ഡികയിലേക്ക് തിരുകുകയും ചെയ്യുന്നു. ഫംഗ്ഷൻ testRead() ( document.getElementById( "ലക്ഷ്യം").innerHTML = document.getElementById( "testInnerHTML").innerHTML } // ഈ ഫംഗ്ഷൻ തന്നിരിക്കുന്ന ഖണ്ഡികയുടെ വാചകം മാറ്റുന്നു. ഫംഗ്ഷൻ testChange() ( document.getElementById( "ലക്ഷ്യം").innerHTML = "ടെക്‌സ്‌റ്റിൻ്റെ നിറം മാറ്റുകയും മാറ്റുകയും ചെയ്യുക" } // ഈ ഫംഗ്ഷൻ പ്രോപ്പർട്ടി അതിൻ്റെ യഥാർത്ഥ സ്ഥാനത്തേക്ക് തിരികെ നൽകുന്നു. ഫംഗ്ഷൻ testReset() ( document.getElementById( "ലക്ഷ്യം").innerHTML = "ചേർക്കാനുള്ള ഖണ്ഡിക" } |
ആന്തരിക HTML പ്രോപ്പർട്ടി പരിശോധിക്കുന്നു
ചേർക്കാനുള്ള ഖണ്ഡിക
ഈ പാഠത്തിൽ, DOM എന്താണെന്നും അത് എന്തിനാണ് ആവശ്യമുള്ളതെന്നും അത് എങ്ങനെ നിർമ്മിക്കപ്പെടുന്നുവെന്നും നോക്കാം.
എന്താണ് DOM?ഒരു ബ്രൗസർ ഒരു പേജ് അഭ്യർത്ഥിക്കുകയും സെർവറിൽ നിന്നുള്ള പ്രതികരണമായി അതിൻ്റെ ഉറവിട HTML കോഡ് ലഭിക്കുകയും ചെയ്യുമ്പോൾ, അത് ആദ്യം അത് പാഴ്‌സ് ചെയ്യണം. HTML കോഡ് വിശകലനം ചെയ്യുകയും പാഴ്‌സ് ചെയ്യുകയും ചെയ്യുന്ന പ്രക്രിയയിൽ, ബ്രൗസർ അതിനെ അടിസ്ഥാനമാക്കി ഒരു DOM ട്രീ നിർമ്മിക്കുന്നു.
ഈ പ്രവർത്തനവും മറ്റ് നിരവധി പ്രവർത്തനങ്ങളും പൂർത്തിയാക്കിയ ശേഷം, ബ്രൗസർ പേജ് റെൻഡർ ചെയ്യാൻ തുടങ്ങുന്നു. ഈ പ്രക്രിയയിൽ, തീർച്ചയായും, അവൻ ഇതിനകം തന്നെ അദ്ദേഹം സൃഷ്ടിച്ച DOM ട്രീ ഉപയോഗിക്കുന്നു, അല്ലാതെ യഥാർത്ഥ HTML കോഡ് അല്ല.
സെർവറിൽ നിന്ന് ലഭിക്കുന്ന HTML കോഡിനെ അടിസ്ഥാനമാക്കി കമ്പ്യൂട്ടറിൻ്റെ മെമ്മറിയിൽ ബ്രൗസർ സൃഷ്ടിക്കുന്ന ഒരു ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡലാണ് DOM.
ലളിതമായി പറഞ്ഞാൽ, HTML കോഡ് ഒരു പേജിൻ്റെ ടെക്‌സ്‌റ്റാണ്, കൂടാതെ ബ്രൗസർ അതിൻ്റെ ടെക്സ്റ്റ് പാഴ്‌സ് ചെയ്യുമ്പോൾ സൃഷ്ടിച്ച അനുബന്ധ ഒബ്ജക്റ്റുകളുടെ ഒരു കൂട്ടമാണ് DOM.
Chrome-ൽ, ബ്രൗസറിന് ലഭിക്കുന്ന പേജിൻ്റെ ഉറവിട കോഡ് "വെബ് ഡെവലപ്പർ ടൂളുകൾ" പാനലിലെ "ഉറവിടം" ടാബിൽ കാണാൻ കഴിയും.
Chrome-ന് അത് സൃഷ്ടിക്കുന്ന DOM ട്രീ കാണാൻ കഴിയുന്ന ഒരു ടൂൾ ഇല്ല. എന്നാൽ HTML കോഡിൻ്റെ രൂപത്തിൽ ഈ DOM ട്രീയുടെ ഒരു പ്രാതിനിധ്യം ഉണ്ട്, അത് "ഘടകങ്ങൾ" ടാബിൽ ലഭ്യമാണ്. ഈ DOM പ്രാതിനിധ്യം തീർച്ചയായും, ഒരു വെബ് ഡെവലപ്പർക്ക് പ്രവർത്തിക്കാൻ കൂടുതൽ സൗകര്യപ്രദമാണ്. അതിനാൽ, ഒരു ട്രീ ഘടനയായി DOM-നെ പ്രതിനിധീകരിക്കുന്ന ഒരു ഉപകരണവുമില്ല.
ഈ മോഡലിലെ ഒബ്ജക്റ്റുകൾ എച്ച്ടിഎംഎൽ (ടാഗുകൾ, ടെക്സ്റ്റ് ഉള്ളടക്കം, അഭിപ്രായങ്ങൾ മുതലായവ) പ്രമാണം ഉൾപ്പെടെയുള്ള മിക്കവാറും എല്ലാത്തിൽ നിന്നും രൂപപ്പെട്ടതാണ്. HTML ഘടകങ്ങൾ കോഡിൽ പരസ്പരം ആപേക്ഷികമായി എങ്ങനെ സ്ഥാപിക്കുന്നു എന്നതിനെ അടിസ്ഥാനമാക്കിയാണ് മോഡലിലെ ഈ വസ്തുക്കൾ തമ്മിലുള്ള ബന്ധം രൂപപ്പെടുന്നത്.
ഈ സാഹചര്യത്തിൽ, ഡോക്യുമെൻ്റിൻ്റെ രൂപീകരണത്തിനു ശേഷമുള്ള DOM മാറ്റാൻ കഴിയും. DOM മാറുമ്പോൾ, ബ്രൗസർ ഏതാണ്ട് തൽക്ഷണം പേജ് ചിത്രം വീണ്ടും വരയ്ക്കുന്നു. തൽഫലമായി, ഞങ്ങളുടെ പേജ് റെൻഡറിംഗ് എല്ലായ്പ്പോഴും DOM-ന് സമാനമാണ്.
DOM പ്രോഗ്രാമായി വായിക്കാനും മാറ്റാനും, ബ്രൗസർ ഞങ്ങൾക്ക് ഒരു DOM API അല്ലെങ്കിൽ മറ്റൊരു രീതിയിൽ പറഞ്ഞാൽ, ഒരു പ്രോഗ്രാമിംഗ് ഇൻ്റർഫേസ് നൽകുന്നു. ലളിതമായി പറഞ്ഞാൽ, DOM API എന്നത് വിവിധ ഒബ്‌ജക്റ്റുകളുടെയും അവയുടെ ഗുണങ്ങളുടെയും രീതികളുടെയും ഒരു വലിയ ശേഖരമാണ്, അത് നമുക്ക് DOM വായിക്കാനും മാറ്റാനും ഉപയോഗിക്കാം.
DOM-ൽ പ്രവർത്തിക്കാൻ, മിക്ക കേസുകളിലും JavaScript ഉപയോഗിക്കുന്നു, കാരണം... ഇന്ന് ബ്രൗസറിൽ സ്ക്രിപ്റ്റുകൾ എക്സിക്യൂട്ട് ചെയ്യാൻ കഴിയുന്ന ഒരേയൊരു പ്രോഗ്രാമിംഗ് ഭാഷയാണിത്.
എന്തുകൊണ്ടാണ് ഞങ്ങൾക്ക് DOM API ആവശ്യമായി വരുന്നത്?
ഞങ്ങൾക്ക് ഇത് ആവശ്യമാണ്, അതിനാൽ ഈച്ചയിൽ പേജ് മാറ്റാൻ ജാവാസ്ക്രിപ്റ്റ് ഉപയോഗിക്കാം, അതായത്. അതിനെ ചലനാത്മകവും സംവേദനാത്മകവുമാക്കുക.
DOM API ഞങ്ങൾക്ക് (ഡെവലപ്പർമാർ) ധാരാളം രീതികൾ നൽകുന്നു, അതിലൂടെ ഞങ്ങൾക്ക് പേജിലെ എല്ലാം മാറ്റാനും ഉപയോക്താവുമായി സംവദിക്കാനും കഴിയും. ആ. സങ്കീർണ്ണമായ ഇൻ്റർഫേസുകൾ, ഫോമുകൾ, പ്രോസസ്സ് ഉപയോക്തൃ പ്രവർത്തനങ്ങൾ, പേജിലെ വിവിധ ഘടകങ്ങൾ ചേർക്കുക, നീക്കം ചെയ്യുക, അവയുടെ ഉള്ളടക്കങ്ങൾ, പ്രോപ്പർട്ടികൾ (ആട്രിബ്യൂട്ടുകൾ) എന്നിവയും അതിലേറെയും മാറ്റാൻ ഈ സോഫ്റ്റ്വെയർ ഇൻ്റർഫേസ് ഞങ്ങളെ അനുവദിക്കുന്നു.
ഇക്കാലത്ത്, DOM-ൽ പ്രവർത്തിക്കാത്ത സാഹചര്യങ്ങളുള്ള സൈറ്റുകളൊന്നും വെബിൽ പ്രായോഗികമായി ഇല്ല.ഒരു പേജിൻ്റെ HTML കോഡ് എന്താണ് ഉൾക്കൊള്ളുന്നത്?
ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ പഠിക്കുന്നതിന് മുമ്പ്, ഒരു വെബ് പേജിൻ്റെ (HTML പ്രമാണം) സോഴ്സ് കോഡ് എന്താണെന്ന് നിങ്ങൾ ആദ്യം ഓർക്കണം.
ഒരു വെബ് പേജിൻ്റെ സോഴ്സ് കോഡിൽ ടാഗുകൾ, ആട്രിബ്യൂട്ടുകൾ, അഭിപ്രായങ്ങൾ, ടെക്സ്റ്റ് എന്നിവ അടങ്ങിയിരിക്കുന്നു. HTML-ൻ്റെ അടിസ്ഥാന വാക്യഘടനയാണ് ടാഗുകൾ. അവയിൽ ഭൂരിഭാഗവും ജോടിയാക്കിയിരിക്കുന്നു. ഈ സാഹചര്യത്തിൽ, അവയിലൊന്ന് തുറക്കുകയും മറ്റൊന്ന് അടയ്ക്കുകയും ചെയ്യുന്നു. അത്തരത്തിലുള്ള ഒരു ജോടി ടാഗുകൾ ഒരു HTML ഘടകം ഉണ്ടാക്കുന്നു. HTML ഘടകങ്ങൾക്ക് അധിക പാരാമീറ്ററുകൾ ഉണ്ടാകാം - ആട്രിബ്യൂട്ടുകൾ.
ഒരു ഡോക്യുമെൻ്റിൽ, ചില മാർക്ക്അപ്പ് സൃഷ്ടിക്കുന്നതിന്, ചില ഘടകങ്ങൾ മറ്റുള്ളവയ്ക്കുള്ളിൽ സ്ഥിതിചെയ്യുന്നു. തൽഫലമായി, ഒരു HTML പ്രമാണത്തെ പരസ്പരം കൂട്ടിയിണക്കിയ HTML ഘടകങ്ങളുടെ ഒരു കൂട്ടമായി പ്രതിനിധീകരിക്കാൻ കഴിയും.
ഒരു ഉദാഹരണമായി, ഇനിപ്പറയുന്ന HTML കോഡ് പരിഗണിക്കുക:
പേജ് ശീർഷകം ലേഖന ശീർഷകം ലേഖന വിഭാഗം
ഈ കോഡിൽ, റൂട്ട് ഘടകം html ആണ്. അതിൽ തലയും ശരീരവും അടങ്ങിയിരിക്കുന്നു. ഹെഡ് എലമെൻ്റിൽ ഒരു ശീർഷകം അടങ്ങിയിരിക്കുന്നു, ബോഡിയിൽ ഒരു h1, ഒരു div എന്നിവ അടങ്ങിയിരിക്കുന്നു. div മൂലകത്തിൽ h2, p എന്നിവ അടങ്ങിയിരിക്കുന്നു.
HTML കോഡ് അടിസ്ഥാനമാക്കി ബ്രൗസർ ഒരു DOM ട്രീ നിർമ്മിക്കുന്നത് എങ്ങനെയെന്ന് നോക്കാം.
ഒരു ഡോക്യുമെൻ്റിൻ്റെ DOM ട്രീ എങ്ങനെയാണ് നിർമ്മിച്ചിരിക്കുന്നത്?മുകളിൽ വിവരിച്ചതുപോലെ, HTML ഘടകങ്ങളെയും പേജ് സോഴ്സ് കോഡിൻ്റെ മറ്റ് എൻ്റിറ്റികളെയും അടിസ്ഥാനമാക്കി ബ്രൗസർ ഒരു ട്രീ നിർമ്മിക്കുന്നു. ഈ പ്രക്രിയ നടത്തുമ്പോൾ, പരസ്പരം ഉള്ളിലെ മൂലകങ്ങളുടെ നെസ്റ്റിംഗ് കണക്കിലെടുക്കുന്നു.
തൽഫലമായി, ബ്രൗസർ തത്ഫലമായുണ്ടാകുന്ന DOM ട്രീ അതിൻ്റെ പ്രവർത്തനത്തിൽ മാത്രമല്ല, JavaScript വഴി സൗകര്യപ്രദമായ പ്രവർത്തനത്തിനായി ഞങ്ങൾക്ക് ഒരു API നൽകുന്നു.
DOM നിർമ്മിക്കുമ്പോൾ, ഈ ഭാഷയുടെ HTML ഘടകങ്ങൾ, ടെക്സ്റ്റ്, അഭിപ്രായങ്ങൾ, മറ്റ് എൻ്റിറ്റികൾ എന്നിവയിൽ നിന്ന് ബ്രൗസർ ഒബ്ജക്റ്റുകൾ (DOM ട്രീ നോഡുകൾ) സൃഷ്ടിക്കുന്നു.
മിക്ക കേസുകളിലും, വെബ് ഡെവലപ്പർമാർക്ക് HTML ഘടകങ്ങളിൽ നിന്ന് രൂപംകൊണ്ട ഒബ്‌ജക്റ്റുകളിൽ (നോഡുകൾ) മാത്രമേ താൽപ്പര്യമുള്ളൂ.
അതേ സമയം, ബ്രൗസർ HTML ഘടകങ്ങളിൽ നിന്ന് ഒബ്ജക്റ്റുകൾ സൃഷ്ടിക്കുക മാത്രമല്ല, അവ ഓരോന്നും കോഡിലെ മറ്റൊന്നുമായി എങ്ങനെ ബന്ധപ്പെട്ടിരിക്കുന്നു എന്നതിനെ ആശ്രയിച്ച് ചില കണക്ഷനുകൾ ഉപയോഗിച്ച് അവയെ പരസ്പരം ബന്ധിപ്പിക്കുകയും ചെയ്യുന്നു.
ചില മൂലകങ്ങളിൽ നേരിട്ട് ഉള്ള മൂലകങ്ങൾ അതുമായി ബന്ധപ്പെട്ട് കുട്ടികളാണ്. അവൻ ഓരോരുത്തർക്കും ഒരു രക്ഷിതാവാണ്. കൂടാതെ, ഈ ഘടകങ്ങളെല്ലാം പരസ്പര ബന്ധത്തിൽ സഹോദരങ്ങൾ (സഹോദരങ്ങൾ) ആണ്.
മാത്രമല്ല, HTML-ൽ, ഏതൊരു ഘടകത്തിനും എല്ലായ്പ്പോഴും ഒരു രക്ഷകർത്താവ് ഉണ്ടായിരിക്കും (അത് നേരിട്ട് സ്ഥിതിചെയ്യുന്ന HTML ഘടകം). HTML-ൽ, ഒരു ഘടകത്തിന് ഒന്നിലധികം രക്ഷിതാക്കൾ ഉണ്ടാകരുത്. html ഘടകം മാത്രമാണ് അപവാദം. അവന് രക്ഷിതാവില്ല.
ബ്രൗസർ നിർമ്മിക്കുന്നതിനനുസരിച്ച് ഒരു DOM ട്രീ ലഭിക്കുന്നതിന്, നിങ്ങൾ എല്ലാ ഘടകങ്ങളും പരസ്പരം അവരുടെ ബന്ധത്തെ ആശ്രയിച്ച് "ക്രമീകരിക്കേണ്ടതുണ്ട്".
DOM ട്രീയുടെ നിർമ്മാണം മുകളിൽ നിന്ന് താഴേക്ക് നടക്കുന്നു.
ഈ സാഹചര്യത്തിൽ, DOM ട്രീയുടെ റൂട്ട് എല്ലായ്പ്പോഴും പ്രമാണം തന്നെയാണ് (ഡോക്യുമെൻ്റ് നോഡ്). അടുത്തതായി, HTML കോഡിൻ്റെ ഘടനയെ ആശ്രയിച്ചാണ് മരം നിർമ്മിച്ചിരിക്കുന്നത്.
ഉദാഹരണത്തിന്, ഞങ്ങൾ മുകളിൽ നോക്കിയ HTML കോഡിന് ഇനിപ്പറയുന്ന DOM ട്രീ ഉണ്ടായിരിക്കും:
ഈ മരത്തിൻ്റെ ഏറ്റവും മുകളിൽ ഡോക്യുമെൻ്റ് നോഡ് ഉണ്ട്. ഈ നോഡ് html-മായി ബന്ധപ്പെട്ടിരിക്കുന്നു, അത് അതിൻ്റെ കുട്ടിയാണ്. html നോഡ് രൂപപ്പെടുന്നത് html (...) മൂലകമാണ്. തല(...), ബോഡി(...) നോഡുകൾക്ക് html-മായി ഒരു രക്ഷാകർതൃ ബന്ധമുണ്ട്. പരസ്പര ബന്ധത്തിൽ, അവർ സഹോദരങ്ങളാണ്, കാരണം ഒരു രക്ഷിതാവ് ഉണ്ട്. ഹെഡ് നോഡ് തലക്കെട്ടുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു (lt;title>...), അത് അതിൻ്റെ കുട്ടിയാണ്. h1, div നോഡുകൾ ശരീരവുമായി ബന്ധപ്പെട്ടിരിക്കുന്നു, അത് അവയുടെ രക്ഷിതാവാണ്. div നോഡ് h2(...), p() എന്നിവയുമായി ബന്ധിപ്പിച്ചിരിക്കുന്നു, അവർ അതിൻ്റെ കുട്ടികളാണ്.
മുകളിൽ സൂചിപ്പിച്ചതുപോലെ, ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് (നോഡ്) ഉപയോഗിച്ചാണ് മരം ആരംഭിക്കുന്നത്. html (...) മൂലകം രൂപീകരിച്ച ഒരു ചൈൽഡ് നോഡ് ഇതിന് ഉണ്ട്. തല(...) ശരീര(...) ഘടകങ്ങൾ html-ൽ ഉള്ളതിനാൽ അതിൻ്റെ കുട്ടികളാണ്. അടുത്തതായി, തലക്കെട്ടിൻ്റെ പാരൻ്റ് ആണ് ഹെഡ് നോഡ് (lt;title>...). h1, div ഘടകങ്ങൾ ശരീരത്തിനുള്ളിൽ കൂടുകൂട്ടിയിരിക്കുന്നു, അതായത് അവർ അതിൻ്റെ കുട്ടികളാണ്. div നേരിട്ട് h2 (...), p () എന്നീ ഘടകങ്ങൾ ഉൾക്കൊള്ളുന്നു. ഇതിനർത്ഥം അവയിൽ ഓരോന്നിൻ്റെയും div നോഡ് പാരൻ്റ് ആണെന്നാണ്.
HTML കോഡ് അടിസ്ഥാനമാക്കി ഒരു ബ്രൗസറിൽ DOM ട്രീ നിർമ്മിക്കുന്നത് എത്ര എളുപ്പമാണ്.
DOM ട്രീ എങ്ങനെയാണ് നിർമ്മിച്ചതെന്ന് നിങ്ങൾ അറിയേണ്ടത് എന്തുകൊണ്ട്?
ഒന്നാമതായി, നിങ്ങൾ എന്തെങ്കിലും മാറ്റാൻ ആഗ്രഹിക്കുന്ന അന്തരീക്ഷത്തെക്കുറിച്ചുള്ള ഒരു ധാരണയാണിത്. രണ്ടാമതായി, DOM-ൽ പ്രവർത്തിക്കുമ്പോൾ മിക്ക പ്രവർത്തനങ്ങളും ആവശ്യമായ ഘടകങ്ങൾ തിരയുന്നതിലേക്ക് (തിരഞ്ഞെടുക്കുന്നു) വരുന്നു. DOM ട്രീയുടെ ഘടനയും നോഡുകൾ തമ്മിലുള്ള ബന്ധവും അറിയാതെ, അതിൽ ഒരു പ്രത്യേക ഘടകം കണ്ടെത്തുന്നത് വളരെ ബുദ്ധിമുട്ടായിരിക്കും.വ്യായാമം ചെയ്യുക
ചിത്രത്തിൽ കാണിച്ചിരിക്കുന്ന DOM ട്രീയെ അടിസ്ഥാനമാക്കി, HTML കോഡ് സൃഷ്ടിക്കുക.
സ്റ്റാൻഡേർഡ് ബിൽറ്റ്-ഇൻ JavaScript ഒബ്ജക്റ്റുകളുടെ എല്ലാ ഗുണങ്ങളുടെയും രീതികളുടെയും വിവരണങ്ങൾ റഫറൻസിൽ അടങ്ങിയിരിക്കുന്നു.ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ
ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM) XML-നുള്ള ഒരു ആപ്ലിക്കേഷൻ പ്രോഗ്രാമിംഗ് ഇൻ്റർഫേസ് (API) ആണ്, അത് HTML-നൊപ്പം പ്രവർത്തിക്കാൻ വിപുലീകരിച്ചിരിക്കുന്നു.
DOM-ൽ, എല്ലാ പേജ് ഉള്ളടക്കവും (ഘടകങ്ങളും വാചകവും) നോഡുകളുടെ ഒരു ശ്രേണിയായി പ്രതിനിധീകരിക്കുന്നു. ഇനിപ്പറയുന്ന കോഡ് പരിഗണിക്കുക:
ലളിതമായ പേജ്
ഹലോ വേൾഡ്!
നോഡുകളുടെ ഒരു ശ്രേണിയായി DOM ഉപയോഗിച്ച് ഈ കോഡ് പ്രതിനിധീകരിക്കാം:
ഒരു ഡോക്യുമെൻ്റിനെ നോഡുകളുടെ ട്രീ ആയി പ്രതിനിധീകരിക്കുന്നതിലൂടെ, ഒരു വെബ് പേജിൻ്റെ ഉള്ളടക്കത്തിലും ഘടനയിലും ഡവലപ്പർമാർക്ക് DOM API പൂർണ്ണ നിയന്ത്രണം നൽകുന്നു.
DOM-ൻ്റെ ട്രീ ഘടന വിവരിക്കുമ്പോൾ, ഫാമിലി ട്രീകളിൽ നിന്ന് കടമെടുത്ത ടെർമിനോളജി ഉപയോഗിക്കുന്നു.
അതിനാൽ, നൽകിയിരിക്കുന്ന നോഡിന് മുകളിൽ നേരിട്ട് സ്ഥിതിചെയ്യുന്ന നോഡിനെ ഈ നോഡിൻ്റെ പാരൻ്റ് എന്ന് വിളിക്കുന്നു. തന്നിരിക്കുന്ന നോഡിന് താഴെ ഒരു ലെവലിൽ സ്ഥിതിചെയ്യുന്ന നോഡുകളെ ഈ നോഡിൻ്റെ കുട്ടികൾ എന്ന് വിളിക്കുന്നു. ഒരേ തലത്തിലുള്ളതും ഒരേ മാതാപിതാക്കളുള്ളതുമായ നോഡുകളെ സഹോദരങ്ങൾ എന്ന് വിളിക്കുന്നു. തന്നിരിക്കുന്ന നോഡിന് താഴെയുള്ള എത്ര ലെവലുകൾ വേണമെങ്കിലും സ്ഥിതി ചെയ്യുന്ന നോഡുകളെ അതിൻ്റെ കുട്ടികൾ എന്ന് വിളിക്കുന്നു. ഒരു നിശ്ചിത നോഡിന് മുകളിൽ എത്ര ലെവലുകൾ ഉണ്ടെങ്കിലും മാതാപിതാക്കൾ, മുത്തശ്ശി, മറ്റ് നോഡുകൾ എന്നിവയെ അതിൻ്റെ പൂർവ്വികർ എന്ന് വിളിക്കുന്നു.
ഡോക്യുമെൻ്റ്, എലമെൻ്റ്, ഇവൻ്റ്, നോഡ്‌ലിസ്റ്റ് ഒബ്ജക്റ്റുകൾ എന്നിവയുടെ വിവരണങ്ങൾ DOM റഫറൻസിൽ അടങ്ങിയിരിക്കുന്നു, അവയുടെ രീതികളുടെയും ഗുണവിശേഷതകളുടെയും വിവരണങ്ങൾ ഉൾപ്പെടെ:BOM (ഇംഗ്ലീഷിൽ നിന്ന് വിവർത്തനം ചെയ്ത ബ്രൗസർ ഒബ്ജക്റ്റ് മോഡൽ - ബ്രൗസർ ഒബ്ജക്റ്റ് മോഡൽ) ബ്രൗസർ വിൻഡോയിലേക്ക് ആക്സസ് നൽകുകയും അതിനെയും അതിൻ്റെ ഘടകങ്ങളെയും കൈകാര്യം ചെയ്യാൻ നിങ്ങളെ അനുവദിക്കുകയും ചെയ്യുന്നു.
BOM-കൾ വെബ് പേജിൻ്റെ ഉള്ളടക്കത്തിൽ നിന്ന് സ്വതന്ത്രമായി ബ്രൗസർ പ്രവർത്തനത്തിലേക്ക് പ്രവേശനം നൽകുന്നു. BOM-ൻ്റെ വിഷയം രസകരവും സങ്കീർണ്ണവുമാണ്, കാരണം, ഒരു സ്പെസിഫിക്കേഷൻ്റെ ദീർഘകാല അഭാവം കാരണം, ബ്രൗസർ വെണ്ടർമാർക്ക് അവർക്ക് അനുയോജ്യമെന്ന് തോന്നുന്നതുപോലെ BOM വിപുലീകരിക്കാൻ സ്വാതന്ത്ര്യമുണ്ട്. ബ്രൗസറുകളിലുടനീളം സമാനമായ പല ഘടകങ്ങളും പരസ്പര അനുയോജ്യതയുടെ കാരണങ്ങളാൽ ഇന്നും പിന്തുടരുന്ന യഥാർത്ഥ മാനദണ്ഡങ്ങളായി മാറിയിരിക്കുന്നു. ജാവാസ്ക്രിപ്റ്റിൻ്റെ ഈ അടിസ്ഥാന വശങ്ങൾ സ്റ്റാൻഡേർഡ് ചെയ്യുന്നതിനായി, HTML5 സ്പെസിഫിക്കേഷനിൽ W3C കോർ BOM ഘടകങ്ങൾ നിർവചിച്ചു.
ഈ വിഭാഗം ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡലിന് (DOM) ഒരു ഹ്രസ്വ ആമുഖം നൽകുന്നു - എന്താണ് DOM, എങ്ങനെയാണ് HTML, XML ഡോക്യുമെൻ്റ് ഘടനകൾ നൽകിയിരിക്കുന്നത്, അവയുമായി എങ്ങനെ ഇടപഴകണം. ഈ വിഭാഗത്തിൽ പശ്ചാത്തല വിവരങ്ങളും ഉദാഹരണങ്ങളും അടങ്ങിയിരിക്കുന്നു.
എന്താണ് ഒരു ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM)?ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് മോഡൽ (DOM) എന്നത് HTML, XML പ്രമാണങ്ങൾക്കായുള്ള ഒരു പ്രോഗ്രാമിംഗ് ഇൻ്റർഫേസ് (API) ആണ്. DOM ഒരു ഡോക്യുമെൻ്റിൻ്റെ ഘടനാപരമായ പ്രാതിനിധ്യം നൽകുകയും ഡോക്യുമെൻ്റിൻ്റെ ഉള്ളടക്കം, ശൈലി, ഘടന എന്നിവ മാറ്റാൻ കഴിയുന്ന പ്രോഗ്രാമുകൾക്ക് ആ ഘടന എങ്ങനെ ആക്സസ് ചെയ്യാമെന്ന് നിർവചിക്കുകയും ചെയ്യുന്നു. ഗുണങ്ങളും രീതികളും ഉള്ള നോഡുകളുടെയും ഒബ്‌ജക്റ്റുകളുടെയും ഒരു ഘടനാപരമായ ഗ്രൂപ്പ് DOM കാഴ്ചയിൽ അടങ്ങിയിരിക്കുന്നു. അടിസ്ഥാനപരമായി, DOM ഒരു വെബ് പേജിനെ സ്ക്രിപ്റ്റിംഗ് ഭാഷകളിലേക്കോ പ്രോഗ്രാമിംഗ് ഭാഷകളിലേക്കോ ബന്ധിപ്പിക്കുന്നു.
ഒരു വെബ് പേജ് ഒരു പ്രമാണമാണ്. ബ്രൗസർ വിൻഡോയിലും HTML കോഡിലും പ്രമാണം അവതരിപ്പിക്കാനാകും. ഏതായാലും ഒരേ പ്രമാണം തന്നെ. ഈ പ്രമാണത്തെ പ്രതിനിധീകരിക്കാനും സംഭരിക്കാനും കൈകാര്യം ചെയ്യാനും DOM മറ്റൊരു മാർഗം നൽകുന്നു. ഒരു വെബ് പേജിൻ്റെ ഒബ്ജക്റ്റ്-ഓറിയൻ്റഡ് പ്രാതിനിധ്യത്തെ DOM പൂർണ്ണമായി പിന്തുണയ്ക്കുന്നു, ഇത് JavaScript പോലുള്ള ഒരു സ്ക്രിപ്റ്റിംഗ് ഭാഷ ഉപയോഗിച്ച് അത് പരിഷ്ക്കരിക്കുന്നത് സാധ്യമാക്കുന്നു.
DOM എങ്ങനെയാണ് ആക്സസ് ചെയ്യുന്നത്?DOM കൈകാര്യം ചെയ്യാൻ നിങ്ങൾ പ്രത്യേകമായി ഒന്നും ചെയ്യേണ്ടതില്ല. വ്യത്യസ്ത ബ്രൗസറുകൾക്ക് DOM-ൻ്റെ വ്യത്യസ്ത നിർവ്വഹണങ്ങൾ ഉണ്ട്, കൂടാതെ ഈ നിർവ്വഹണങ്ങൾ യഥാർത്ഥ DOM സ്റ്റാൻഡേർഡിന് അനുസൃതമായ വ്യത്യാസങ്ങൾ കാണിക്കുന്നു (ഈ ഡോക്യുമെൻ്റേഷനിൽ പ്രവേശിക്കുന്നത് ഒഴിവാക്കാൻ ഞങ്ങൾ ശ്രമിച്ച വിഷയം), എന്നാൽ വെബ് പേജുകൾ പരസ്പര പ്രവർത്തനക്ഷമമാക്കാൻ ഓരോ ബ്രൗസറും വ്യത്യസ്ത DOM ഉപയോഗിക്കുന്നു സ്ക്രിപ്റ്റിംഗ് ഭാഷകൾക്കൊപ്പം.
എലമെൻ്റ് ഉപയോഗിച്ച് ഒരു സ്ക്രിപ്റ്റ് സൃഷ്‌ടിക്കുന്നതിലൂടെയോ സ്ക്രിപ്റ്റ് ലോഡുചെയ്യുന്നതിനുള്ള വെബ്‌പേജിൽ നിർദ്ദേശങ്ങൾ ഉൾപ്പെടുത്തുന്നതിലൂടെയോ, നിങ്ങൾക്ക് ഉടൻ തന്നെ ആപ്ലിക്കേഷൻ പ്രോഗ്രാമിംഗ് ഇൻ്റർഫേസ് (API) ഉപയോഗിച്ച് ആരംഭിക്കാം, ഒന്നുകിൽ പ്രമാണവുമായി സംവദിക്കാനോ അല്ലെങ്കിൽ പിൻഗാമികളെ നേടാനോ. ആ പ്രമാണം, അതായത്. പേജിലെ വിവിധ ഘടകങ്ങൾ. നിങ്ങളുടെ DOM പ്രോഗ്രാമിംഗ് ഒരു ഒബ്ജക്റ്റ് ഫംഗ്ഷൻ ഉപയോഗിച്ച് ഒരു സന്ദേശം പ്രിൻ്റുചെയ്യുന്നത് പോലെ ലളിതമാണ്, അല്ലെങ്കിൽ ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ കാണിച്ചിരിക്കുന്നതുപോലെ പുതിയ ഉള്ളടക്കം സൃഷ്ടിക്കുന്ന കൂടുതൽ സങ്കീർണ്ണമായ DOM രീതികൾ ഉപയോഗിക്കുക:
ഇനിപ്പറയുന്ന ഉദാഹരണത്തിൽ, ഒരു ഘടകത്തിനുള്ളിൽ JavaScript കോഡ് നിർവചിച്ചിരിക്കുന്നു, പ്രമാണം ലോഡ് ചെയ്യുമ്പോൾ (മുഴുവൻ DOM ഉപയോഗത്തിന് ലഭ്യമാകുമ്പോൾ) ഈ കോഡ് ഒരു ഫംഗ്ഷൻ സജ്ജമാക്കുന്നു. ഈ ഫംഗ്ഷൻ ഒരു പുതിയ H1 ഘടകം സൃഷ്‌ടിക്കുകയും ആ ഘടകത്തിലേക്ക് ടെക്സ്റ്റ് ചേർക്കുകയും തുടർന്ന് ഡോക്യുമെൻ്റ് ട്രീയിലേക്ക് H1 ചേർക്കുകയും ചെയ്യുന്നു:
< html > < head > < script >// ഒരു ഡോക്യുമെൻ്റ് വിൻഡോ ലോഡ് ചെയ്യുമ്പോൾ ഈ ഫംഗ്ഷൻ സമാരംഭിക്കുക. onload = ഫംഗ്ഷൻ () ( // നിരവധി ഘടകങ്ങൾ സൃഷ്ടിക്കുന്നു // ഒരു ശൂന്യമായ HTML പേജിൽ തലക്കെട്ട് = പ്രമാണം. createElement( "h1" ) ; heading_text = പ്രമാണം. createTextNode( "Big Head!" ) ; heading. appendChild( heading_text ) ; പ്രമാണം . ശരീരം. appendChild(തലക്കെട്ട്) ;< body >പ്രധാനപ്പെട്ട ഡാറ്റ തരങ്ങൾഈ വിഭാഗം വിവിധ തരങ്ങളെയും വസ്തുക്കളെയും ലളിതവും ആക്സസ് ചെയ്യാവുന്നതുമായ രീതിയിൽ സംക്ഷിപ്തമായി വിവരിക്കാൻ ഉദ്ദേശിച്ചുള്ളതാണ്. നിങ്ങൾ ശ്രദ്ധിക്കേണ്ട API-യിൽ ഉപയോഗിക്കുന്ന നിരവധി വ്യത്യസ്ത ഡാറ്റാ തരങ്ങളുണ്ട്. ലാളിത്യത്തിനായി, ഈ വിഭാഗത്തിലെ ഉദാഹരണ വാക്യഘടന സാധാരണയായി നോഡുകളെ എലമെൻ്റ് s എന്നും നോഡുകളുടെ നിരകളെ നോഡ്‌ലിസ്റ്റ് s (അല്ലെങ്കിൽ ലളിതമായി എലമെൻ്റ് s) എന്നും നോഡ് ആട്രിബ്യൂട്ടുകളെ ആട്രിബ്യൂട്ട് s എന്നും സൂചിപ്പിക്കുന്നു.
ഈ ഡാറ്റ തരങ്ങളുടെ ഒരു ഹ്രസ്വ വിവരണമുള്ള ഒരു പട്ടിക ചുവടെയുണ്ട്.
| പ്രമാണം | ഒരു അംഗം ടൈപ്പ് ഡോക്യുമെൻ്റിൻ്റെ ഒരു ഒബ്ജക്റ്റ് തിരികെ നൽകുമ്പോൾ (ഉദാഹരണത്തിന്, മൂലകത്തിൻ്റെ ഉടമ ഡോക്യുമെൻ്റ് പ്രോപ്പർട്ടി അത് പരാമർശിക്കുന്ന പ്രമാണം തിരികെ നൽകുന്നു), ആ ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് അതിൻ്റെ സ്വന്തം റൂട്ട് ഒബ്ജക്റ്റാണ്. DOM ഡോക്യുമെൻ്റ് റഫറൻസ് വിഭാഗം ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റിനെ വിവരിക്കുന്നു. ഘടകം |
| ഘടകം | DOM API-യിലെ ഒരു അംഗം തിരികെ നൽകിയ ഒരു ഘടകം അല്ലെങ്കിൽ തരം മൂലകത്തിൻ്റെ നോഡ് സൂചിപ്പിക്കുന്നു. document.createElement() രീതി ഒരു നോഡിലേക്ക് ഒരു റഫറൻസ് നൽകുന്നു എന്ന് പറയുന്നതിന് പകരം, ഈ ഘടകം DOM-ൽ സൃഷ്ടിച്ച ഒരു ഘടകത്തെ തിരികെ നൽകുന്നു എന്ന് ഞങ്ങൾ പറയും. എലമെൻ്റ് ഒബ്ജക്റ്റുകൾ DOM എലമെൻ്റ് ഇൻ്റർഫേസും കൂടുതൽ പൊതുവായ നോഡ് ഇൻ്റർഫേസും നടപ്പിലാക്കുന്നു. രണ്ട് ഇൻ്റർഫേസുകളും ഈ സഹായത്തിൽ ഉൾപ്പെടുത്തിയിട്ടുണ്ട്. നോഡ് ലിസ്റ്റ് |
| നോഡ് ലിസ്റ്റ് |
Document.getElementsByTagName() രീതി നൽകിയത് പോലെയുള്ള ഘടകങ്ങളുടെ ഒരു നിര. ഒരു അറേയിലെ നിർദ്ദിഷ്ട ഘടകങ്ങൾ രണ്ട് തരത്തിൽ സൂചിക വഴി ആക്സസ് ചെയ്യുന്നു:
ഈ രീതികൾ തുല്യമാണ്. ആദ്യ രീതിയിൽ, ഇനം() ആണ് നോഡ്‌ലിസ്റ്റ് ഒബ്‌ജക്റ്റിൻ്റെ ഏക രീതി. ലിസ്റ്റിലെ രണ്ടാമത്തെ മൂല്യം ലഭിക്കുന്നതിന് രണ്ടാമത്തേത് സാധാരണ അറേ വാക്യഘടന ഉപയോഗിക്കുന്നു. |
| ആട്രിബ്യൂട്ട് | ഒരു API അംഗം ആട്രിബ്യൂട്ട് തിരികെ നൽകുമ്പോൾ (ഉദാഹരണത്തിന്, createAttribute() രീതി) അത് ആട്രിബ്യൂട്ടുകൾക്കായി ഒരു പ്രത്യേക (ചെറിയെങ്കിലും) ഇൻ്റർഫേസ് നൽകുന്ന ഒരു ഒബ്‌ജക്റ്റിൻ്റെ റഫറൻസായിരിക്കും. ആട്രിബ്യൂട്ടുകൾ ഘടകങ്ങൾ പോലെ തന്നെ DOM-ലെ നോഡുകളാണ്, എന്നിരുന്നാലും നിങ്ങൾ അവ അങ്ങനെ അപൂർവ്വമായി ഉപയോഗിച്ചേക്കാം. |
| നോഡ്മാപ്പ് എന്ന് പേരിട്ടു | nameNodeMap ഒരു അറേയ്ക്ക് സമാനമാണ്, എന്നാൽ മൂലകങ്ങൾ പേര് അല്ലെങ്കിൽ സൂചിക ഉപയോഗിച്ച് ആക്സസ് ചെയ്യപ്പെടുന്നു. സൂചിക വഴിയുള്ള ആക്സസ് ലിസ്റ്റിംഗിൻ്റെ സൗകര്യത്തിന് മാത്രമാണ്, കാരണം ഘടകങ്ങൾക്ക് പട്ടികയിൽ ഒരു പ്രത്യേക ക്രമം ഇല്ല. ഈ ഡാറ്റാ തരത്തിന് ഈ ആവശ്യത്തിനായി ഒരു ഇനം() രീതി ഉണ്ട്, നിങ്ങൾക്ക് പേരിട്ടിരിക്കുന്ന നോഡ്മാപ്പിൽ നിന്ന് ഇനങ്ങൾ ചേർക്കാനും നീക്കം ചെയ്യാനും കഴിയും |
ഒബ്‌ജക്‌റ്റുകളെക്കുറിച്ചും DOM ശ്രേണി കൈകാര്യം ചെയ്യാൻ നിങ്ങൾക്ക് ഉപയോഗിക്കാനാകുന്ന യഥാർത്ഥ കാര്യങ്ങളെക്കുറിച്ചുമുള്ള ട്യൂട്ടോറിയലാണിത്. ഇത് എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് മനസിലാക്കുന്നത് അതിശയിപ്പിക്കുന്ന നിരവധി സ്ഥലങ്ങളുണ്ട്. ഉദാഹരണത്തിന്, ഒരു HTML ഫോം ഘടകത്തെ പ്രതിനിധീകരിക്കുന്ന ഒരു ഒബ്ജക്റ്റ് അതിൻ്റെ നെയിം പ്രോപ്പർട്ടി HTMLFormElement ഇൻ്റർഫേസിൽ നിന്നും അതിൻ്റെ className പ്രോപ്പർട്ടി HTMLElement ഇൻ്റർഫേസിൽ നിന്നും എടുക്കുന്നു. രണ്ട് സാഹചര്യങ്ങളിലും, നിങ്ങൾ ആഗ്രഹിക്കുന്ന പ്രോപ്പർട്ടി ആ രൂപത്തിലുള്ള ഒബ്‌ജക്റ്റിലാണ്.
കൂടാതെ, ഒബ്‌ജക്‌റ്റുകളും അവ DOM-ൽ നടപ്പിലാക്കുന്ന ഇൻ്റർഫേസുകളും തമ്മിലുള്ള ബന്ധം ആശ്ചര്യപ്പെടുത്തുന്നതാണ്, കൂടാതെ DOM-ൽ നിലവിലുള്ള ഇൻ്റർഫേസുകളെയും അവ എങ്ങനെ ആക്സസ് ചെയ്യാം എന്നതിനെ കുറിച്ചും ഈ വിഭാഗം കുറച്ച് പറയാൻ ശ്രമിക്കുന്നു.
ഇൻ്റർഫേസുകളും വസ്തുക്കളുംപല വസ്തുക്കളും ഒന്നിലധികം ഇൻ്റർഫേസുകളിൽ നിന്നുള്ള പ്രവർത്തനങ്ങൾ നടപ്പിലാക്കുന്നു. ടേബിൾ ഒബ്ജക്റ്റ്, ഉദാഹരണത്തിന്, createCaption, insertRow പോലുള്ള രീതികൾ ഉൾപ്പെടുന്ന ഒരു പ്രത്യേക ഒന്ന് നടപ്പിലാക്കുന്നു. എന്നാൽ ഇതൊരു പട്ടികയായതിനാൽ, ഇത് ഒരു HTML ഘടകം കൂടിയാണ്, വിഭാഗത്തിൽ വിവരിച്ചിരിക്കുന്ന എലമെൻ്റ് ഇൻ്റർഫേസ് പട്ടിക നടപ്പിലാക്കുന്നു. അവസാനമായി, ഒരു HTML ഘടകം (DOM അർത്ഥത്തിൽ) ഒരു HTML അല്ലെങ്കിൽ XML പേജിനുള്ള ഒബ്ജക്റ്റ് മോഡൽ നിർമ്മിക്കുന്ന ട്രീയിലെ ഒരു നോഡായതിനാൽ, ഒരു ടേബിൾ എലമെൻ്റ് എലമെൻ്റ് ഉരുത്തിരിഞ്ഞുവന്ന കൂടുതൽ പൊതുവായ നോഡ് ഇൻ്റർഫേസും നടപ്പിലാക്കുന്നു.
Var പട്ടിക = document.getElementById("table"); var tableAttrs = table.attributes; // നോഡ്/എലമെൻ്റ് ഇൻ്റർഫേസ് (var i = 0; i< tableAttrs.length; i++) { // HTMLTableElement interface: border attribute if(tableAttrs[i].nodeName.toLowerCase() == "border") table.border = "1"; } // HTMLTableElement interface: summary attribute table.summary = "note: increased border";
DOM-ലെ പ്രധാന ഇൻ്റർഫേസുകൾDOM-ലെ ഏറ്റവും സാധാരണമായ നിരവധി ഇൻ്റർഫേസുകൾ ഈ വിഭാഗം പട്ടികപ്പെടുത്തുന്നു. ഈ API രീതികൾ എന്താണ് ചെയ്യുന്നതെന്ന് വിവരിക്കുകയല്ല, DOM ഉപയോഗിക്കുമ്പോൾ നിങ്ങൾ പലപ്പോഴും കാണുന്ന രീതികളെയും സവിശേഷതകളെയും കുറിച്ച് നിങ്ങൾക്ക് ചില ചിന്തകൾ നൽകാനാണ് ആശയം. ഈ സഹായത്തിൻ്റെ അവസാനഭാഗത്തുള്ള വിഭാഗത്തിലെ മിക്ക ഉദാഹരണങ്ങളിലും API-യുടെ ഈ പൊതുവായ ഭാഗങ്ങൾ ഉപയോഗിക്കുന്നു.
ഡോക്യുമെൻ്റ്, വിൻഡോ എന്നിവ DOM പ്രോഗ്രാമിംഗിൽ നിങ്ങൾ പലപ്പോഴും ഉപയോഗിക്കുന്ന ഇൻ്റർഫേസുകളുള്ള ഒബ്ജക്റ്റുകളാണ്. ലളിതമായി പറഞ്ഞാൽ, വിൻഡോ ഒബ്ജക്റ്റ് ഒരു ബ്രൗസർ പോലെയുള്ള ഒന്നിനെ പ്രതിനിധീകരിക്കുന്നു, കൂടാതെ ഡോക്യുമെൻ്റ് ഒബ്ജക്റ്റ് ഡോക്യുമെൻ്റിൻ്റെ റൂട്ടിനെ പ്രതിനിധീകരിക്കുന്നു. പൊതുവായ നോഡ് ഇൻ്റർഫേസിൽ നിന്ന് മൂലകം അവകാശമാക്കുന്നു, കൂടാതെ ഈ ഇൻ്റർഫേസുകൾ ഒരുമിച്ച് വ്യക്തിഗത ഘടകങ്ങളിൽ പ്രയോഗിക്കാൻ കഴിയുന്ന നിരവധി രീതികളും ഗുണങ്ങളും നൽകുന്നു. മുമ്പത്തെ കേസിലെ ടേബിൾ ഒബ്ജക്റ്റ് ഉദാഹരണത്തിലെന്നപോലെ, ഈ ഘടകങ്ങൾ ഉൾക്കൊള്ളുന്ന ഡാറ്റ തരങ്ങളുമായി പ്രവർത്തിക്കുന്നതിന് ഈ ഘടകങ്ങൾക്ക് പ്രത്യേക ഇൻ്റർഫേസുകളും ഉണ്ടായിരിക്കാം.
DOM ഉപയോഗിക്കുന്ന പ്രോഗ്രാമിംഗ് വെബിലും XML പേജുകളിലും ഉപയോഗിക്കുന്ന പൊതുവായ API അംഗങ്ങളുടെ ഒരു ചെറിയ ലിസ്റ്റ് ചുവടെയുണ്ട്:
- parentNode.appendChild(നോഡ്)
നിങ്ങളുടെ വികസനത്തിൽ ഉപയോഗിക്കാവുന്ന ഓരോ ഇൻ്റർഫേസിനും ഉദാഹരണങ്ങൾ ഈ പ്രമാണത്തിൽ അടങ്ങിയിരിക്കുന്നു. ചില സന്ദർഭങ്ങളിൽ, ഘടകത്തിലെ DOM-ലേക്ക് ആക്സസ് ഉള്ള പൂർണ്ണമായ വെബ് പേജുകളാണ് ഉദാഹരണങ്ങൾ, ഫോമിൽ സ്ക്രിപ്റ്റ് പ്രവർത്തിപ്പിക്കുന്നതിന് ആവശ്യമായ ഘടകങ്ങളും DOM പ്രവർത്തനങ്ങൾ നടത്തുന്ന HTML ഘടകങ്ങളും ലിസ്റ്റുചെയ്യുന്നു. ഇത് സംഭവിക്കുമ്പോൾ, നിങ്ങൾക്ക് ഒരു പുതിയ HTML ഡോക്യുമെൻ്റിലേക്ക് ഉദാഹരണം പകർത്തി ഒട്ടിക്കാനും അത് സംരക്ഷിക്കാനും നിങ്ങളുടെ ബ്രൗസറിൽ പ്രവർത്തിപ്പിക്കാനും കഴിയും.
എന്നിരുന്നാലും, ഉദാഹരണങ്ങൾ കൂടുതൽ സംക്ഷിപ്തമായ കേസുകളുണ്ട്. HTML ഘടകങ്ങളുമായി ഇൻ്റർഫേസുകൾ എങ്ങനെ ഇടപഴകുന്നു എന്നതിൻ്റെ അടിസ്ഥാനകാര്യങ്ങൾ കാണിക്കുന്ന ഉദാഹരണങ്ങൾ പ്രവർത്തിപ്പിക്കുന്നതിന്, നിങ്ങൾക്ക് ഒരു ടെസ്റ്റ് പേജ് തയ്യാറാക്കാം, അതിൽ നിങ്ങൾ സ്ക്രിപ്റ്റുകൾക്കുള്ളിൽ ഫംഗ്ഷനുകൾ സ്ഥാപിക്കും. ഇനിപ്പറയുന്ന വളരെ ലളിതമായ വെബ് പേജിൽ നിങ്ങൾക്ക് ഇൻ്റർഫേസ് പരിശോധിക്കാൻ ഫംഗ്ഷനുകൾ സ്ഥാപിക്കാൻ കഴിയുന്ന ഒരു ഹെഡർ ഘടകം അടങ്ങിയിരിക്കുന്നു. ആട്രിബ്യൂട്ടുകളുള്ള നിരവധി ഘടകങ്ങൾ പേജിൽ അടങ്ങിയിരിക്കുന്നു, അത് തിരികെ നൽകാനോ സജ്ജമാക്കാനോ അല്ലെങ്കിൽ മറ്റൊരു രീതിയിൽ പറഞ്ഞാൽ കൃത്രിമം കാണിക്കാനോ ബ്രൗസറിൽ നിന്ന് ആവശ്യമുള്ള ഫംഗ്ഷനുകൾ വിളിക്കുന്നതിന് ആവശ്യമായ ഉപയോക്തൃ ഇൻ്റർഫേസ് അടങ്ങിയതുമാണ്.
നിങ്ങൾക്ക് താൽപ്പര്യമുള്ള DOM ഇൻ്റർഫേസുകൾ പരിശോധിക്കുന്നതിനും ബ്രൗസറുകളിൽ അവ എങ്ങനെ പ്രവർത്തിക്കുന്നുവെന്ന് കാണുന്നതിനും നിങ്ങൾക്ക് ഈ ടെസ്റ്റ് പേജോ സമാനമായതോ ഉപയോഗിക്കാം. നിങ്ങൾക്ക് ടെസ്റ്റ്() ഫംഗ്‌ഷൻ്റെ ഉള്ളടക്കങ്ങൾ ആവശ്യാനുസരണം അപ്ഡേറ്റ് ചെയ്യാനോ കൂടുതൽ ബട്ടണുകൾ സൃഷ്‌ടിക്കാനോ അല്ലെങ്കിൽ ആവശ്യമുള്ള ഘടകങ്ങൾ ചേർക്കാനോ കഴിയും.
< html > < head > < title >DOM ടെസ്റ്റുകൾ< script type = " application/javascript" >ഫംഗ്ഷൻ setBodyAttr (attr, മൂല്യം) (എങ്കിൽ (പ്രമാണം. ബോഡി) eval ("document.body." + attr+ "="" + value+ """ ) ; മറ്റുള്ളവ പിന്തുണയ്ക്കുന്നില്ല () ; )< body > < div style =" margin : .5 in; height : 400 ; " > < p > < b > < tt >വാചകം< form > < select onChange = " setBodyAttr(" text" , this.options.value);" > < option value = "കറുപ്പ്" >കറുപ്പ്< option value = "കടുംനീല" >കടുംനീല< p > < b > < tt >bgColor< select onChange = " setBodyAttr(" bgColor" , this.options.value);" > < option value = "വെള്ള" >വെള്ള< option value = "ഇളം ചാരനിറം" >ചാരനിറം< p > < b > < tt >ലിങ്ക്< select onChange = " setBodyAttr(" link" , this.options.value);" > < option value = "നീല" >നീല< option value = "പച്ച" >പച്ച< small > < a href = " http://www.brownhen.com/dom_api_top.html" id = " sample" >(സാമ്പിൾ ലിങ്ക്)< br > < form > < input type = " button" value = "പതിപ്പ്" onclick = " ver()" />ഒരു പേജിൽ നിരവധി ഇൻ്റർഫേസുകൾ പരിശോധിക്കുന്നതിന്, വെബ് പേജിൻ്റെ നിറങ്ങൾ മാറ്റുന്ന പ്രോപ്പർട്ടികളുടെ ഒരു കൂട്ടം, ബട്ടണുകൾ, ടെക്സ്റ്റ് ഫീൽഡുകൾ, മറ്റ് ഘടകങ്ങൾ എന്നിവയുടെ മുഴുവൻ "കൺസോൾ" ഉപയോഗിച്ച് നിങ്ങൾക്ക് സമാനമായ ഒരു വെബ് പേജ് സൃഷ്ടിക്കാൻ കഴിയും. ടെസ്റ്റിംഗിനായി ഇൻ്റർഫേസുകളെ എങ്ങനെ ഒരുമിച്ച് കൂട്ടാം എന്നതിനെക്കുറിച്ചുള്ള ഒരു ആശയം ഇനിപ്പറയുന്ന സ്ക്രീൻഷോട്ട് നൽകുന്നു
ഈ ഉദാഹരണത്തിൽ, DOM-ൽ നിന്ന് ആക്സസ് ചെയ്യാവുന്ന വെബ് പേജിൻ്റെ ഭാഗങ്ങൾ ഡ്രോപ്പ്ഡൗൺ മെനു ചലനാത്മകമായി അപ്ഡേറ്റ് ചെയ്യുന്നു (ഉദാഹരണത്തിന്, പശ്ചാത്തല നിറം, ലിങ്ക് നിറം, ടെക്സ്റ്റ് നിറം). എന്നിരുന്നാലും, ടെസ്റ്റ് പേജുകൾ വികസിപ്പിക്കുമ്പോൾ, ഇൻ്റർഫേസുകൾ പരിശോധിക്കുന്നത്, നിങ്ങൾ വായിച്ചതുപോലെ, DOM-ൽ എങ്ങനെ ഫലപ്രദമായി പ്രവർത്തിക്കാമെന്ന് പഠിക്കുന്നതിൻ്റെ ഒരു പ്രധാന ഭാഗമാണ്.
