JavaScript DOM

Document Object Model

JavaScript-ல் ஒரு HTML பக்கத்தில் இருக்கும் எலிமெண்ட்டுகளைக் கண்டறியவும் (Access), மாற்றவும் DOM (Document Object Model) Methods பயன்படுகின்றன.

1.Modern Methods
இன்று பெரும்பாலும் இந்த இரண்டு முறைகள் மட்டுமே போதுமானவை. இவை CSS Selector-களைப் பயன்படுத்துவதால் மிகவும் சக்திவாய்ந்தவை.

querySelector():
கொடுக்கப்பட்ட CSS Selector-க்கு பொருந்தும் முதல் எலிமெண்ட்டை மட்டும் இது தரும்.

Real Time உதாரணம்: "நீல நிற சட்டை அணிந்து, கையில் பேக் வைத்திருக்கும் முதல் நபரை அழைத்து வா" என்று சொல்வது.
மனித உதாரணம்: நீங்கள் பல நிபந்தனைகளைச் சொல்கிறீர்கள். ஆனால் அந்த நிபந்தனைக்கு ஒத்துப்போகும் முதல் நபரை மட்டும் அழைத்து வருவார்கள்.

document.querySelector(".நீல-சட்டை .பேக்-வைத்திருப்பவர்")

querySelectorAll():
கொடுக்கப்பட்ட Selector-க்கு பொருந்தும் அனைத்து எலிமெண்ட்டுகளையும் ஒரு NodeList-ஆகத் தரும்.

Real Time உதாரணம்: "மொட்டை மாடியில் நின்று கொண்டிருக்கும் அனைத்து ஆண்களையும் அழைத்து வா" என்று சொல்வது.
மனித உதாரணம்: ஒரு குறிப்பிட்ட இடத்தில், ஒரு குறிப்பிட்ட நிபந்தனையில் இருக்கும் அனைவரையும் ஒரு பட்டியலாக (List) எடுப்பது.

document.querySelectorAll("#மொட்டை-மாடி .ஆண்கள்")

2. Legacy Methods
இவை பழைய முறைகள் என்றாலும், குறிப்பிட்ட தேவைகளுக்கு (Performance-க்காக) இப்போதும் பயன்படுத்தப்படுகின்றன.

getElementById():
ஒரு குறிப்பிட்ட ID கொண்ட எலிமெண்ட்டை மட்டும் எடுக்க உதவும். இது மிகவும் வேகமானது.

Real Time உதாரணம்: ஒருவரிடம் "அப்பார்ட்மெண்டில் கதவு எண் 404-ல் இருப்பவரை அழைத்து வா" என்று சொல்வது போன்றது.
மனித உதாரணம்: ஒரு பெரிய கூட்டத்தில் ஒரு குறிப்பிட்ட நபரை அவரது ஆதார் எண் அல்லது வீட்டு எண் சொல்லி அழைப்பது. அந்த எண் ஒருவருக்கு மட்டுமே இருக்கும்.

document.getElementById("வீட்டு-எண்-404")

getElementsByClassName():
ஒரு குறிப்பிட்ட Class பெயர் கொண்ட அனைத்து எலிமெண்ட்டுகளையும் HTMLCollection-ஆகத் தரும்.

Real Time உதாரணம்: "இந்த அப்பார்ட்மெண்டில் 'நீல நிற சட்டை' அணிந்திருக்கும் அனைவரையும் அழைத்து வா" என்று சொல்வது.
மனித உதாரணம்: ஒரு யூனிஃபார்ம் அணிந்த ஒரு குழுவை அழைப்பது. பல பேர் நீல நிற சட்டை அணிந்திருக்கலாம். அவர்கள் அனைவரும் ஒரு குழுவாக வருவார்கள்.

document.getElementsByClassName("நீல-சட்டை")

getElementsByTagName():
HTML Tag பெயரைக் கொண்டு (உதாரணம்: div, h1) எலிமெண்ட்டுகளை எடுக்க உதவும்.

Real Time உதாரணம்: "அப்பார்ட்மெண்டில் இருக்கும் அனைத்து 'குழந்தைகளையும்' அழைத்து வா" என்று சொல்வது.
மனித உதாரணம்: ஒரு குறிப்பிட்ட வகை மனிதர்களை அழைப்பது. இதில் ஏழை, பணக்காரர் என்ற வித்தியாசம் இல்லை, 'குழந்தை' என்ற பொதுவான வகை மட்டுமே கணக்கில் கொள்ளப்படும்.

document.getElementsByTagName("குழந்தை")

3. உறவுமுறை மூலம் அணுகுதல் (Traversal Methods):
ஏற்கனவே ஒரு எலிமெண்ட் உங்கள் கையில் இருந்தால், அதன் (Properties) குடும்ப உறுப்பினர்களை (Parent, Child, Sibling) இதன் மூலம் அணுகலாம்.

parentElement: அதன் மேலடுக்கு (Parent) எலிமெண்ட்டை அணுக.
children: அதற்குள் இருக்கும் அனைத்து நேரடிச் சிறு எலிமெண்ட்டுகளை (Child Elements) அணுக.

firstElementChild / lastElementChild: முதல் அல்லது கடைசிச் சிறு எலிமெண்ட்டை அணுக.

nextElementSibling / previousElementSibling: அதற்கு அடுத்து அல்லது முன்பு இருக்கும் அதே நிலையில் உள்ள (Sibling) எலிமெண்ட்டை அணுக.

Examples:
இப்போது நீங்கள் 'அருண்' என்பவரைப் பிடித்துவிட்டீர்கள். அவரை வைத்து மற்றவர்களை எப்படி அணுகுவது?

• parentElement (தந்தை/தாய்): "அருணின் அப்பாவைக் கூப்பிடு." அருண்.parentElement
• children (குழந்தைகள்): "அருணின் பிள்ளைகளை அழை." அருண்.children
• nextElementSibling (தம்பி/தங்கை): "அருணுக்கு அடுத்த வீட்டில் இருக்கும் அவரது தம்பியை அழை." அருண்.nextElementSibling
• previousElementSibling (அண்ணன்/அக்கா): "அருணுக்கு முந்தைய வீட்டில் இருக்கும் அவரது அண்ணனை அழை." அருண்.previousElementSibling

4.முக்கியமான குறிப்புகள்:

• querySelectorAll தரும் NodeList-ல் நீங்கள் நேரடியாக .forEach() பயன்படுத்தலாம்.ஆனால் getElementsByClassName தரும் HTMLCollection-ல் .forEach() வேலை செய்யாது (அதை Array.from() மூலம் மாற்ற வேண்டும்).
• Performance: getElementById என்பது querySelector ஐ விடச் சற்று வேகமானது. ஆனால் நவீன பிரவுசர்களில் இந்த வித்தியாசம் மிகக் குறைவு.
• Dynamic Access: புராஜெக்ட்டுகளில் ரியாக்டிவ் ஆக எலிமெண்ட்டுகளை மாற்ற querySelector முறையையே அதிகம் பயன்படுத்துங்கள், ஏனெனில் இது நெகிழ்வானது (Flexible).
• React அல்லது Angular பயன்படுத்துபவர் என்பதால், நேரடியாக DOM-ஐ அணுகுவதைத் தவிர்த்து Refs (React-ல் useRef, Angular-ல் @ViewChild) பயன்படுத்துவதே சிறந்த முறையாகும். ஆனால் Vanilla JS அல்லது Blog எழுதும் போது மேலே சொன்ன முறைகள் அவசியம்.