HTML DOM: ஆவண பொருள் மாதிரியை எவ்வாறு பயன்படுத்துவது

இந்த கட்டுரை உங்களுக்கு HTML DOM, ஆவண பொருள் மாதிரி பற்றிய விரிவான மற்றும் விரிவான அறிவை எடுத்துக்காட்டுகளுடன் வழங்கும்.

ஒரு ஆவண பொருள் குறிக்கிறது அந்த சாளரத்தில் காட்டப்படும் ஆவணம். ஆவணப் பொருள் அணுகல் மற்றும் ஆவண உள்ளடக்கத்தை மாற்ற அனுமதிக்கும் பிற பொருள்களைக் குறிக்கும் பல்வேறு பண்புகளைக் கொண்டுள்ளது. இந்த கட்டுரையில், HTML DOM ஐப் புரிந்துகொள்வோம்.



pl sql online free கற்றுக்கொள்ளுங்கள்

HTML DOM கருத்து

ஆவணப்படுத்தப்பட்ட உள்ளடக்கத்தை அணுகும் மற்றும் மாற்றியமைக்கும் முறை அழைக்கப்படுகிறது ஆவண பொருள் மாதிரி , அல்லது DOM. பொருள்கள் ஒரு படிநிலையில் ஒழுங்கமைக்கப்பட்டுள்ளன. இந்த படிநிலை அமைப்பு ஒரு வலை ஆவணத்தில் உள்ள பொருட்களின் அமைப்புக்கு பொருந்தும்.



  • சாளர பொருள் & கழித்தல் வரிசைக்கு மேல். இது பொருள் வரிசைக்கு மிக உயர்ந்த உறுப்பு.
  • ஆவண பொருள் & கழித்தல் ஒரு சாளரத்தில் ஏற்றப்படும் ஒவ்வொரு HTML ஆவணமும் ஆவண பொருளாக மாறும். ஆவணத்தில் பக்கத்தின் உள்ளடக்கங்கள் உள்ளன.
  • படிவ பொருள் & கழித்தல்… குறிச்சொற்களில் இணைக்கப்பட்டுள்ள அனைத்தும் படிவ பொருளை அமைக்கிறது.
  • படிவக் கட்டுப்பாட்டு கூறுகள் & கழித்தல் படிவப் பொருள் உரை புலங்கள், பொத்தான்கள், ரேடியோ பொத்தான்கள் மற்றும் தேர்வுப்பெட்டிகள் போன்ற அனைத்து பொருள்களுக்கும் வரையறுக்கப்பட்டுள்ளது.

HTML DOM என்றால் என்ன

ஆவண பொருள் மாதிரி என்பது ஆவணங்களுக்கான நிரலாக்க API ஆகும். பொருள் மாதிரியானது அது மாதிரியாக இருக்கும் ஆவணங்களின் கட்டமைப்பை ஒத்திருக்கிறது. உதாரணமாக, ஒரு HTML ஆவணத்திலிருந்து எடுக்கப்பட்ட இந்த அட்டவணையை கவனியுங்கள்:

 
நிழல் தோப்பு ஏலியன்
ஓவர் தி ரிவர், சார்லி டோரியன்

HTML DOM என்ன இல்லை

இந்த பிரிவு ஆவண பொருள் மாதிரியைப் போன்ற துல்லியமான புரிதலைக் கொடுக்கும் வகையில் வடிவமைக்கப்பட்டுள்ளது.



ஆவண பொருள் மாதிரி டைனமிக் HTML ஆல் வலுவாக பாதிக்கப்பட்டது என்றாலும், நிலை 1 இல், இது டைனமிக் HTML அனைத்தையும் செயல்படுத்தாது. குறிப்பாக, நிகழ்வுகள் இன்னும் வரையறுக்கப்படவில்லை. நிலை 1 என்பது ஆவணத்தின் வலுவான, நெகிழ்வான மாதிரியை வழங்குவதன் மூலம் இந்த வகையான செயல்பாட்டுக்கு உறுதியான அடித்தளத்தை அமைப்பதற்காக வடிவமைக்கப்பட்டுள்ளது.

ஆவண பொருள் மாதிரி ஒரு பைனரி விவரக்குறிப்பு அல்ல. ஒரே மொழியில் எழுதப்பட்ட ஆவண பொருள் மாதிரி நிரல்கள் இயங்குதளங்களில் இணக்கமான மூலக் குறியீடாக இருக்கும், ஆனால் ஆவண பொருள் மாதிரி எந்த வகையான பைனரி இயங்குதளத்தையும் வரையறுக்காது.

ஆவண பொருள் மாதிரி என்பது எக்ஸ்எம்எல் அல்லது HTML க்கு பொருள்களைத் தொடரும் ஒரு வழி அல்ல. எக்ஸ்எம்எல்லில் பொருள்கள் எவ்வாறு குறிப்பிடப்படலாம் என்பதைக் குறிப்பிடுவதற்குப் பதிலாக, எக்ஸ்எம்எல் மற்றும் HTML ஆவணங்கள் எவ்வாறு பொருள்களாக குறிப்பிடப்படுகின்றன என்பதை ஆவண பொருள் மாதிரி குறிப்பிடுகிறது, இதனால் அவை பொருள் சார்ந்த நிரல்களில் பயன்படுத்தப்படலாம்.



HTML DOM இல்லை

ஆவண பொருள் மாதிரி தரவு கட்டமைப்புகளின் தொகுப்பு அல்ல, இது இடைமுகங்களைக் குறிப்பிடும் ஒரு பொருள் மாதிரி. இந்த ஆவணத்தில் பெற்றோர் / குழந்தை உறவுகளைக் காட்டும் வரைபடங்கள் இருந்தாலும், இவை நிரலாக்க இடைமுகங்களால் வரையறுக்கப்பட்ட தர்க்கரீதியான உறவுகள், எந்தவொரு குறிப்பிட்ட உள் தரவு கட்டமைப்புகளின் பிரதிநிதித்துவங்கள் அல்ல.

ஆவண பொருள் மாதிரி எக்ஸ்எம்எல் அல்லது HTML இன் “உண்மையான உள் சொற்பொருளை” வரையறுக்கவில்லை. அந்த மொழிகளின் சொற்பொருள் மொழிகளால் வரையறுக்கப்படுகிறது.

ஆவண பொருள் மாதிரி என்பது இந்த சொற்பொருள்களை மதிக்க வடிவமைக்கப்பட்ட ஒரு நிரலாக்க மாதிரி. நீங்கள் எக்ஸ்எம்எல் மற்றும் HTML ஆவணங்களை எழுதும் விதத்தில் ஆவண பொருள் மாதிரியில் எந்தவிதமான மாற்றங்களும் இல்லை, இந்த மொழிகளில் எழுதக்கூடிய எந்தவொரு ஆவணமும் ஆவண பொருள் மாதிரியில் குறிப்பிடப்படலாம்.

ஆவண பொருள் மாதிரி, அதன் பெயர் இருந்தபோதிலும், உபகரண பொருள் மாதிரி (COM) க்கு போட்டியாளர் அல்ல. COM, CORBA போன்றது, இடைமுகங்கள் மற்றும் பொருள்களைக் குறிப்பிடுவதற்கான ஒரு மொழி சுயாதீனமான வழியாகும். ஆவண பொருள் மாதிரி என்பது HTML மற்றும் XML ஆவணங்களை நிர்வகிக்க வடிவமைக்கப்பட்ட இடைமுகங்கள் மற்றும் பொருள்களின் தொகுப்பாகும். DOM இருக்கலாம்COM அல்லது CORBA போன்ற மொழி-சுயாதீன அமைப்புகளைப் பயன்படுத்தி செயல்படுத்தப்படுகிறது, இந்த ஆவணத்தில் குறிப்பிடப்பட்டுள்ள ஜாவா அல்லது ECMAScript பிணைப்புகள் போன்ற மொழி சார்ந்த பிணைப்புகளைப் பயன்படுத்தி இது செயல்படுத்தப்படலாம்.

ஆவண பொருள் மாதிரி எங்கிருந்து வந்தது

ஜாவாஸ்கிரிப்ட் ஸ்கிரிப்டுகள் மற்றும் ஜாவா புரோகிராம்கள் வலை உலாவிகளில் சிறியதாக இருக்க அனுமதிக்க ஆவண பொருள் மாதிரி ஒரு விவரக்குறிப்பாக உருவானது. டைனமிக் HTML என்பது ஆவண பொருள் மாதிரியின் உடனடி மூதாதையராக இருந்தது, மேலும் இது முதலில் உலாவிகளின் அடிப்படையில் பெரும்பாலும் கருதப்பட்டது.

இருப்பினும், ஆவண பொருள் மாதிரி பணிக்குழு உருவாக்கப்பட்டபோது, ​​இது HTML அல்லது எக்ஸ்எம்எல் தொகுப்பாளர்கள் மற்றும் ஆவண களஞ்சியங்கள் உள்ளிட்ட பிற களங்களில் விற்பனையாளர்களால் இணைந்தது. இதன் விளைவாக எக்ஸ்எம்எல் உருவாக்கப்படுவதற்கு முன்பு இந்த விற்பனையாளர்களில் பலர் எஸ்ஜிஎம்எல் உடன் பணிபுரிந்தனர், ஆவண பொருள் மாதிரி எஸ்ஜிஎம்எல் தோப்புகள் மற்றும் ஹைடைம் தரநிலையால் பாதிக்கப்பட்டுள்ளது. இந்த விற்பனையாளர்களில் சிலர் வழங்குவதற்காக ஆவணங்களுக்காக தங்கள் சொந்த பொருள் மாதிரிகளையும் உருவாக்கியுள்ளனர்எஸ்ஜிஎம்எல் / எக்ஸ்எம்எல் எடிட்டர்கள் அல்லது ஆவண களஞ்சியங்களுக்கான நிரலாக்க API கள், இந்த பொருள் மாதிரிகள் ஆவண பொருள் மாதிரியையும் பாதித்துள்ளன.

HTML DOM இன் பண்புகள்

ஆவணப் பொருளால் அணுகக்கூடிய மற்றும் மாற்றியமைக்கக்கூடிய ஆவணப் பொருட்களின் பண்புகளைப் பார்ப்போம்.

DOM-Graph
  1. சாளர பொருள்: சாளர பொருள் எப்போதும் வரிசைக்கு மேலே இருக்கும்.
  2. ஆவண பொருள்: ஒரு HTML ஆவணம் ஒரு சாளரத்தில் ஏற்றப்படும் போது, ​​அது ஒரு ஆவண பொருளாக மாறும்.
  3. படிவம் பொருள்: இது குறிப்பிடப்படுகிறது வடிவம் குறிச்சொற்கள்.
  4. இணைப்பு பொருள்கள்: இது குறிப்பிடப்படுகிறது இணைப்பு குறிச்சொற்கள்.
  5. நங்கூரம் பொருள்கள்: இது குறிப்பிடப்படுகிறது a href குறிச்சொற்கள்.
  6. படிவக் கட்டுப்பாட்டு கூறுகள்: படிவத்தில் உரை புலங்கள், பொத்தான்கள், ரேடியோ பொத்தான்கள் மற்றும் தேர்வுப்பெட்டிகள் போன்ற பல கட்டுப்பாட்டு கூறுகள் இருக்கலாம்.

முறைகள் ஆவண பொருள் :

  1. எழுது (“சரம்”): கொடுக்கப்பட்ட சரத்தை ஆவணத்தில் எழுதுகிறார்.
  2. getElementById (): கொடுக்கப்பட்ட ஐடி மதிப்பைக் கொண்ட உறுப்பை வழங்குகிறது.
  3. getElementsByName (): கொடுக்கப்பட்ட பெயர் மதிப்பைக் கொண்ட அனைத்து உறுப்புகளையும் வழங்குகிறது.
  4. getElementsByTagName (): கொடுக்கப்பட்ட குறிச்சொல் பெயரைக் கொண்ட அனைத்து உறுப்புகளையும் வழங்குகிறது.
  5. getElementsByClassName (): கொடுக்கப்பட்ட வர்க்கப் பெயரைக் கொண்ட அனைத்து உறுப்புகளையும் வழங்குகிறது.

HTML கூறுகளைக் கண்டறிதல்

நீங்கள் ஜாவாஸ்கிரிப்ட் மூலம் HTML கூறுகளை அணுக விரும்பினால், முதலில் உறுப்புகளைக் கண்டுபிடிக்க வேண்டும்.

இதைச் செய்ய இரண்டு வழிகள் உள்ளன:

  • ஐடி மூலம் HTML கூறுகளைக் கண்டறிதல்
  • குறிச்சொல் பெயரால் HTML கூறுகளைக் கண்டறிதல்
  • வகுப்பு பெயரால் HTML கூறுகளைக் கண்டறிதல்

ஐடி மூலம் HTML உறுப்பைக் கண்டறிதல்

DOM இல் ஒரு HTML உறுப்பைக் கண்டுபிடிப்பதற்கான எளிதான வழி, உறுப்பு ஐடியைப் பயன்படுத்துவதன் மூலம்.

உதாரணமாக

குறிச்சொல் பெயரால் HTML கூறுகளைக் கண்டறிதல்

இந்த எடுத்துக்காட்டு ஐடி = ”பிரதான” உடன் உறுப்பைக் கண்டறிந்து, பின்னர் அனைத்தையும் கண்டுபிடிக்கும்

“பிரதான” உள்ளே உள்ள கூறுகள்:

இதன் மூலம், இந்த HTML DOM கட்டுரையின் முடிவுக்கு வருகிறோம். HTML DOM, ஆவண பொருள் மாதிரியின் பல்வேறு அம்சங்களைப் பற்றி நீங்கள் புரிந்து கொண்டீர்கள் என்று நம்புகிறேன்.

எங்கள் பாருங்கள் இது பயிற்றுவிப்பாளர் தலைமையிலான நேரடி பயிற்சி மற்றும் நிஜ வாழ்க்கை திட்ட அனுபவத்துடன் வருகிறது. இந்த பயிற்சி பின்-முனை மற்றும் முன்-வலை வலை தொழில்நுட்பங்களுடன் பணிபுரியும் திறன்களில் நீங்கள் தேர்ச்சி பெறுகிறது. வலை அபிவிருத்தி, jQuery, கோணல், நோட்ஜெஸ், எக்ஸ்பிரஸ்ஜேஎஸ் மற்றும் மோங்கோடிபி பற்றிய பயிற்சி இதில் அடங்கும்.

எங்களுக்கு ஒரு கேள்வி கிடைத்ததா? 'HTML படங்கள்' வலைப்பதிவின் கருத்துகள் பிரிவில் இதைக் குறிப்பிடவும், நாங்கள் உங்களைத் தொடர்புகொள்வோம்.