HTML DOM குறிப்பு
உறுப்பு பண்புகள் மற்றும் முறைகள்.
புதுப்பிக்கப்பட்டது:
ஜனவரி 2026
உறுப்பு பண்புகள் மற்றும் முறைகள்
| பெயர் | விளக்கம் |
|---|---|
| accessKey | உறுப்பின் accesskey பண்புக்கூறை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| addEventListener() | உறுப்பில் ஒரு நிகழ்வு கையாளுநரை இணைக்கிறது |
| after() | ஒரு உறுப்புக்குப் பிறகு ஒன்று அல்லது அதற்கு மேற்பட்ட முனைகள் (உறுப்புகள்) அல்லது சரங்களைச் செருகுகிறது |
| append() | ஒரு உறுப்பின் கடைசி குழந்தைக்குப் பிறகு ஒன்று அல்லது பல முனைகள் (உறுப்பு) அல்லது சரங்களைச் சேர்க்கிறது (இணைக்கிறது) |
| appendChild() | ஒரு உறுப்பின் கடைசி குழந்தைக்குப் பிறகு ஒரு புதிய குழந்தை முனையைச் சேர்க்கிறது (இணைக்கிறது) |
| attributes | உறுப்பின் பண்புக்கூறுகளின் NamedNodeMap ஐத் திருப்பித் தருகிறது |
| before() | ஒரு உறுப்புக்கு முன் ஒன்று அல்லது அதற்கு மேற்பட்ட முனைகள் (உறுப்புகள்) அல்லது சரங்களைச் செருகுகிறது |
| blur() | உறுப்பிலிருந்து கவனத்தை அகற்றுகிறது |
| childElementCount | உறுப்பின் குழந்தை உறுப்புகளின் எண்ணிக்கையைத் திருப்பித் தருகிறது |
| childNodes | உறுப்பின் குழந்தை முனைகளின் NodeList ஐத் திருப்பித் தருகிறது |
| children | உறுப்பின் குழந்தை உறுப்புகளின் HTMLCollection ஐத் திருப்பித் தருகிறது |
| classList | உறுப்பின் வகுப்புப் பெயர்(களை) திருப்பித் தருகிறது |
| className | உறுப்பின் class பண்புக்கூறின் மதிப்பை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| click() | உறுப்பில் சுட்டி-கிளிக் செயலை உருவகப்படுத்துகிறது |
| clientHeight | உறுப்பின் உயரத்தைத் திருப்பித் தருகிறது, padding உட்பட |
| clientLeft | உறுப்பின் இடது எல்லையின் அகலத்தைத் திருப்பித் தருகிறது |
| clientTop | உறுப்பின் மேல் எல்லையின் அகலத்தைத் திருப்பித் தருகிறது |
| clientWidth | உறுப்பின் அகலத்தைத் திருப்பித் தருகிறது, padding உட்பட |
| cloneNode() | உறுப்பை நகலெடுக்கிறது |
| closest() | CSS தேர்ந்தெடுப்பாளருடன் பொருந்தும் அருகிலுள்ள உறுப்பைக் கண்டறிய DOM மரத்தைத் தேடுகிறது |
| compareDocumentPosition() | இரு உறுப்புகளின் ஆவண நிலையை ஒப்பிடுகிறது |
| contains() | ஒரு முனை மற்றொரு முனையின் வழித்தோன்றலாக இருந்தால் true ஐத் திருப்பித் தருகிறது |
| contentEditable | உறுப்பின் உள்ளடக்கம் திருத்தக்கூடியதா இல்லையா என்பதை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| dir | உறுப்பின் dir பண்புக்கூறின் மதிப்பை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| firstChild | உறுப்பின் முதல் குழந்தை முனையைத் திருப்பித் தருகிறது |
| firstElementChild | உறுப்பின் முதல் குழந்தை உறுப்பைத் திருப்பித் தருகிறது |
| focus() | உறுப்புக்கு கவனத்தைக் கொடுக்கிறது |
| getAttribute() | உறுப்பின் பண்புக்கூறின் மதிப்பைத் திருப்பித் தருகிறது |
| getAttributeNode() | பண்புக்கூறு முனையைத் திருப்பித் தருகிறது |
| getBoundingClientRect() | உறுப்பின் அளவு மற்றும் viewport உடன் தொடர்புடைய அதன் நிலையைத் திருப்பித் தருகிறது |
| getElementsByClassName() | கொடுக்கப்பட்ட வகுப்புப் பெயருடன் குழந்தை உறுப்புகளின் தொகுப்பைத் திருப்பித் தருகிறது |
| getElementsByTagName() | கொடுக்கப்பட்ட டேக் பெயருடன் குழந்தை உறுப்புகளின் தொகுப்பைத் திருப்பித் தருகிறது |
| hasAttribute() | உறுப்புக்கு கொடுக்கப்பட்ட பண்புக்கூறு இருந்தால் true ஐத் திருப்பித் தருகிறது |
| hasAttributes() | உறுப்புக்கு எந்த பண்புக்கூறுகள் இருந்தாலும் true ஐத் திருப்பித் தருகிறது |
| hasChildNodes() | உறுப்புக்கு எந்த குழந்தை முனைகள் இருந்தாலும் true ஐத் திருப்பித் தருகிறது |
| id | உறுப்பின் id பண்புக்கூறின் மதிப்பை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| innerHTML | உறுப்பின் உள்ளடக்கத்தை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| innerText | முனையின் உரை உள்ளடக்கத்தையும் அதன் வழித்தோன்றல்களையும் அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| insertAdjacentElement() | உறுப்புடன் தொடர்புடைய நிலையில் புதிய HTML உறுப்பைச் செருகுகிறது |
| insertAdjacentHTML() | உறுப்புடன் தொடர்புடைய நிலையில் HTML வடிவமைக்கப்பட்ட உரையைச் செருகுகிறது |
| insertAdjacentText() | உறுப்புடன் தொடர்புடைய நிலையில் உரையைச் செருகுகிறது |
| insertBefore() | இருக்கும் குழந்தை முனைக்கு முன் புதிய குழந்தை முனையைச் செருகுகிறது |
| isContentEditable | உறுப்பின் உள்ளடக்கம் திருத்தக்கூடியதாக இருந்தால் true ஐத் திருப்பித் தருகிறது |
| isDefaultNamespace() | கொடுக்கப்பட்ட namespaceURI இயல்புநிலையாக இருந்தால் true ஐத் திருப்பித் தருகிறது |
| isEqualNode() | இரு உறுப்புகள் சமமாக இருக்கிறதா எனச் சரிபார்க்கிறது |
| isSameNode() | இரு உறுப்புகள் ஒரே முனையா எனச் சரிபார்க்கிறது |
| isSupported() | பழையது (DEPRECATED) |
| lang | உறுப்பின் lang பண்புக்கூறின் மதிப்பை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| lastChild | உறுப்பின் கடைசி குழந்தை முனையைத் திருப்பித் தருகிறது |
| lastElementChild | உறுப்பின் கடைசி குழந்தை உறுப்பைத் திருப்பித் தருகிறது |
| matches() | உறுப்பு கொடுக்கப்பட்ட CSS தேர்ந்தெடுப்பாளரால் பொருத்தப்பட்டால் true ஐத் திருப்பித் தருகிறது |
| namespaceURI | உறுப்பின் namespace URI ஐத் திருப்பித் தருகிறது |
| nextSibling | அதே முனை மர நிலையில் அடுத்த முனையைத் திருப்பித் தருகிறது |
| nextElementSibling | அதே முனை மர நிலையில் அடுத்த உறுப்பைத் திருப்பித் தருகிறது |
| nodeName | முனையின் பெயரைத் திருப்பித் தருகிறது |
| nodeType | முனையின் முனை வகையைத் திருப்பித் தருகிறது |
| nodeValue | முனையின் மதிப்பை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| normalize() | உறுப்பில் அருகிலுள்ள உரை முனைகளை இணைத்து, வெற்று உரை முனைகளை அகற்றுகிறது |
| offsetHeight | உறுப்பின் உயரத்தைத் திருப்பித் தருகிறது, padding, border மற்றும் scrollbar உட்பட |
| offsetWidth | உறுப்பின் அகலத்தைத் திருப்பித் தருகிறது, padding, border மற்றும் scrollbar உட்பட |
| offsetLeft | உறுப்பின் கிடைமட்ட ஆஃப்செட் நிலையைத் திருப்பித் தருகிறது |
| offsetParent | உறுப்பின் ஆஃப்செட் கொள்கலனைத் திருப்பித் தருகிறது |
| offsetTop | உறுப்பின் செங்குத்து ஆஃப்செட் நிலையைத் திருப்பித் தருகிறது |
| outerHTML | உறுப்பின் உள்ளடக்கத்தை அமைக்கிறது அல்லது திருப்பித் தருகிறது (தொடக்க டேக் மற்றும் முடிவு டேக் உட்பட) |
| outerText | முனையின் வெளிப்புற உரை உள்ளடக்கத்தையும் அதன் வழித்தோன்றல்களையும் அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| ownerDocument | உறுப்புக்கான ரூட் உறுப்பை (ஆவண பொருள்) திருப்பித் தருகிறது |
| parentNode | உறுப்பின் பெற்றோர் முனையைத் திருப்பித் தருகிறது |
| parentElement | உறுப்பின் பெற்றோர் உறுப்பு முனையைத் திருப்பித் தருகிறது |
| previousSibling | அதே முனை மர நிலையில் முந்தைய முனையைத் திருப்பித் தருகிறது |
| previousElementSibling | அதே முனை மர நிலையில் முந்தைய உறுப்பைத் திருப்பித் தருகிறது |
| querySelector() | CSS தேர்ந்தெடுப்பாளர்(களுடன்) பொருந்தும் முதல் குழந்தை உறுப்பைத் திருப்பித் தருகிறது |
| querySelectorAll() | CSS தேர்ந்தெடுப்பாளர்(களுடன்) பொருந்தும் அனைத்து குழந்தை உறுப்புகளையும் திருப்பித் தருகிறது |
| remove() | DOM இலிருந்து ஒரு உறுப்பை அகற்றுகிறது |
| removeAttribute() | உறுப்பிலிருந்து பண்புக்கூறை அகற்றுகிறது |
| removeAttributeNode() | பண்புக்கூறு முனையை அகற்றுகிறது, மற்றும் அகற்றப்பட்ட முனையைத் திருப்பித் தருகிறது |
| removeChild() | உறுப்பிலிருந்து குழந்தை முனையை அகற்றுகிறது |
| removeEventListener() | addEventListener() முறையுடன் இணைக்கப்பட்ட நிகழ்வு கையாளுநரை அகற்றுகிறது |
| replaceChild() | உறுப்பில் குழந்தை முனையை மாற்றுகிறது |
| scrollHeight | உறுப்பின் முழு உயரத்தைத் திருப்பித் தருகிறது, padding உட்பட |
| scrollIntoView() | உலாவி சாளரத்தின் காட்சிப்பகுதிக்கு உறுப்பை ஸ்க்ரோல் செய்கிறது |
| scrollLeft | உறுப்பின் உள்ளடக்கம் கிடைமட்டமாக ஸ்க்ரோல் செய்யப்பட்ட பிக்சல்களின் எண்ணிக்கையை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| scrollTop | உறுப்பின் உள்ளடக்கம் செங்குத்தாக ஸ்க்ரோல் செய்யப்பட்ட பிக்சல்களின் எண்ணிக்கையை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| scrollWidth | உறுப்பின் முழு அகலத்தைத் திருப்பித் தருகிறது, padding உட்பட |
| setAttribute() | பண்புக்கூறின் மதிப்பை அமைக்கிறது அல்லது மாற்றுகிறது |
| setAttributeNode() | பண்புக்கூறு முனையை அமைக்கிறது அல்லது மாற்றுகிறது |
| style | உறுப்பின் style பண்புக்கூறின் மதிப்பை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| tabIndex | உறுப்பின் tabindex பண்புக்கூறின் மதிப்பை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| tagName | உறுப்பின் டேக் பெயரைத் திருப்பித் தருகிறது |
| textContent | முனையின் உரை உள்ளடக்கத்தையும் அதன் வழித்தோன்றல்களையும் அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| title | உறுப்பின் title பண்புக்கூறின் மதிப்பை அமைக்கிறது அல்லது திருப்பித் தருகிறது |
| toString() | உறுப்பை சரமாக மாற்றுகிறது |
ஊடாடும் உறுப்பு ஆர்ப்பாட்டம்
ஊடாடும் உறுப்பு:
DOM உறுப்பு ஆர்ப்பாட்டம்
இந்த உறுப்பின் பண்புகள் மற்றும் முறைகளைச் சோதிக்கவும்
உறுப்பு பண்புகளைச் சோதிக்கவும்:
மேலே உள்ள பொத்தான்களைக் கிளிக் செய்வதன் மூலம் உறுப்பு பண்புகள் மற்றும் முறைகளைச் சோதிக்கவும்
உதவிக்குறிப்பு:
ஒவ்வொரு HTML உறுப்பும் ஒரு பொருளாகும், மேலும் இந்த அட்டவணையில் பட்டியலிடப்பட்டுள்ள அனைத்து பண்புகள் மற்றும் முறைகளையும் கொண்டுள்ளது. இந்த பொருள்கள் நீங்கள் பயனருக்கு வலைப்பக்கத்தை ஊடாடும் மற்றும் இயங்கும் வகையில் மாற்ற அனுமதிக்கின்றன.
உறுப்புப் பகுப்புகள்
தேடல் மற்றும் தேர்வு
querySelector()
closest()
matches()
getElementsByClassName()
உறுப்புகளைக் கண்டறிந்து தேர்ந்தெடுப்பதற்கான முறைகள்
DOM மரத்தை கையாளுதல்
appendChild()
insertBefore()
removeChild()
replaceChild()
DOM கட்டமைப்பில் உறுப்புகளைச் சேர்க்க, அகற்ற அல்லது மாற்ற முறைகள்
உறுப்பு பண்புக்கூறுகள்
getAttribute()
setAttribute()
hasAttribute()
removeAttribute()
உறுப்புப் பண்புக்கூறுகளைக் கையாளுவதற்கான முறைகள்
அளவு மற்றும் நிலை
clientWidth
offsetHeight
scrollTop
getBoundingClientRect()
உறுப்பு பரிமாணங்கள் மற்றும் நிலைகளைப் பெறுவதற்கான பண்புகள்
குடும்ப உறவுகள்
parentNode
children
firstChild
nextSibling
DOM மரத்தில் உறுப்புகளுக்கிடையிலான உறவுகளைப் பெறுவதற்கான பண்புகள்
நிகழ்வு கையாளுதல்
addEventListener()
removeEventListener()
click()
focus()
நிகழ்வுகளைக் கையாளுவதற்கான முறைகள்
மிக முக்கியமான முறைகள்
முக்கியமான குறிப்பு:
பின்வரும் முறைகள் நவீன வலை அபிவிருத்தியில் மிகவும் அடிக்கடி பயன்படுத்தப்படுகின்றன:
- querySelector() / querySelectorAll() - CSS தேர்ந்தெடுப்பாளர்களைப் பயன்படுத்தி உறுப்புகளைத் தேர்ந்தெடுக்கவும்
- addEventListener() / removeEventListener() - நிகழ்வு கையாளுதலுக்கு
- classList வணிகம் - வகுப்புகளைக் கையாளுவதற்கு (add, remove, toggle, contains)
- setAttribute() / getAttribute() - பண்புக்கூறுகளைக் கையாளுவதற்கு
- innerHTML / textContent - உறுப்பு உள்ளடக்கத்தை மாற்றுவதற்கு
இந்த முறைகள் பரிந்துரைக்கப்பட்டவை மற்றும் அனைத்து நவீன உலாவிகளாலும் ஆதரிக்கப்படுகின்றன.