DOM' டோக்கன் பட்டியல் ” இறுதிப் பயனரால் அவர்களின் தேவைகளுக்கு ஏற்ப அணுகக்கூடிய பல பண்புகள் அல்லது முறைகள் உள்ளன. இந்தப் பட்டியலினால் வழங்கப்பட்ட பண்புகள் மற்றும் முறைகள் வழங்கப்பட்ட தரவுத் தொகுப்புகளில் குறிப்பிட்ட செயல்பாடுகளைச் செய்து அதற்கேற்ப முடிவை வழங்கும். இது ஒரு வரிசையைப் போன்றது, ஏனெனில் இது பல்வேறு உறுப்பினர்களைக் கொண்டுள்ளது, இது அவர்களின் குறியீட்டால் தேர்ந்தெடுக்கப்படலாம் மற்றும் ஒரு வரிசையைப் போலவே முதல் குறியீடானது ' 0 ”. ஆனால் நீங்கள் 'போன்ற முறைகளைப் பயன்படுத்த முடியாது. பாப்()', 'புஷ்()' அல்லது 'சேர்() ”.
இந்த வலைப்பதிவு JavaScript மூலம் HTML DOMTokenList ஆப்ஜெக்ட்களின் செயல்பாட்டை விளக்குகிறது.
JavaScript HTML DOMTokenList ஆப்ஜெக்ட்களுடன் எவ்வாறு வேலை செய்வது?
HTML DOMTokenList தனியாக எதுவும் இல்லை மற்றும் அதன் மதிப்பு அதில் வசிக்கும் பண்புகள் மற்றும் முறைகள் காரணமாகும். இந்த பண்புகள் மற்றும் முறைகளை முறையான செயலாக்கத்துடன் விரிவாகப் பார்க்கலாம்.
முறை 1: சேர்() முறை
' கூட்டு ()” தேர்ந்தெடுக்கப்பட்ட உறுப்புடன் புதிய வகுப்புகள், பண்புகள் அல்லது எளிய டோக்கன்களை இணைக்கிறது அல்லது ஒதுக்குகிறது. அதன் தொடரியல் கீழே கூறப்பட்டுள்ளது:
htmlElement. கூட்டு ( oneOrMoreToken )
அதன் செயல்படுத்தல் பின்வரும் குறியீடு மூலம் செய்யப்படுகிறது:
< தலை >
< பாணி >
.fontSize{
எழுத்துரு அளவு: பெரியது;
}
.நிறம்{
பின்னணி நிறம்: கேடட்ப்ளூ;
நிறம்: வெண்புகை;
}
< / பாணி >
< / தலை >
< உடல் >
< h1 பாணி = 'நிறம்: கேடட்ப்ளூ;' > லினக்ஸ் < / h1 >
< பொத்தானை கிளிக் செய்யவும் = 'செயல்()' > சேர்ப்பான் < / பொத்தானை >
< ப > ஸ்டைலிங் பயன்படுத்த மேலே உள்ள பட்டனை அழுத்தவும் < / ப >
< div ஐடி = 'தேர்ந்தெடுக்கப்பட்டது' >
< ப > நான் தேர்ந்தெடுக்கப்பட்ட உரை. < / ப >
< / div >
< கையால் எழுதப்பட்ட தாள் >
செயல்பாடு செயல்() {
document.getElementById('தேர்ந்தெடுக்கப்பட்டது').classList.add('fontSize', 'color');
}
< / கையால் எழுதப்பட்ட தாள் >
< / உடல் >
மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:
- முதலில், இரண்டு CSS வகுப்புகளைத் தேர்ந்தெடுக்கவும். எழுத்துரு அளவு ' மற்றும் 'நிறம்' மற்றும் ' போன்ற சீரற்ற CSS பண்புகளை அவர்களுக்கு ஒதுக்கவும் எழுத்துரு அளவு', 'பின்னணி நிறம்' மற்றும் 'வண்ணம் ”.
- அடுத்து, “<ஐப் பயன்படுத்தி பொத்தான்களை உருவாக்கவும் பொத்தானை >' குறிச்சொல் '' ஐ அழைக்கிறது நடவடிக்கை ()' செயல்பாட்டைப் பயன்படுத்தி ' கிளிக் செய்யவும் ” நிகழ்வு கேட்பவர்.
- கூடுதலாக, ஒரு பெற்றோரை உருவாக்கவும் ' div 'உறுப்பு மற்றும் அதற்கு ஒரு ஐடியை ஒதுக்கவும்' தேர்ந்தெடுக்கப்பட்டது ” மற்றும் அதன் உள்ளே போலித் தரவைச் செருகவும்.
- அதன் பிறகு, வரையறுக்கவும் ' நடவடிக்கை ()” செயல்பாடு மற்றும் தேர்ந்தெடுக்கப்பட்ட உறுப்பின் குறிப்பை அதன் தனிப்பட்ட ஐடியை அணுகுவதன் மூலம் சேமிக்கவும்.
- இறுதியாக, பயன்படுத்தவும் ' வகுப்பு பட்டியல் 'வகுப்புகளை ஒதுக்க மற்றும் இணைக்க சொத்து' கூட்டு ()” முறை. பின்னர், இந்த முறை அடைப்புக்குறிக்குள் CSS வகுப்புகளை அனுப்பவும், அது தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கு இந்த வகுப்புகளைப் பயன்படுத்தும்.
மேலே உள்ள குறியீட்டைத் தொகுத்த பின் வெளியீடு இவ்வாறு உருவாக்கப்படுகிறது:
மேலே உள்ள gif ஆனது CSS வகுப்புகள் தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கு ' கூட்டு ()” முறை.
முறை 2: அகற்று() முறை
இந்த முறை கீழே உள்ள குறியீட்டில் செய்யப்பட்டுள்ளபடி, ஒன்று அல்லது அதற்கு மேற்பட்ட தேர்ந்தெடுக்கப்பட்ட உறுப்புகளில் இருந்து குறிப்பிட்ட வகுப்பு அல்லது ஐடியை நீக்குகிறது:
< தலை >< பாணி >
.fontSize {
எழுத்துரு- அளவு : பெரிய;
}
. நிறம் {
பின்னணி - நிறம் : கேடட்ப்ளூ;
நிறம் : வெள்ளை புகை;
}
< / பாணி >
< / தலை >
< உடல் >
< h1 பாணி = 'நிறம்: கேடட்ப்ளூ;' > Linuxhint < / h1 >
< பொத்தானை கிளிக் செய்யவும் = 'செயல்()' >சேர்ப்பான்< / பொத்தானை >
< ப > ஸ்டைலிங்கைப் பயன்படுத்த மேலே உள்ள பட்டனை அழுத்தவும்< / ப >
< div ஐடி = 'தேர்ந்தெடுக்கப்பட்டது' வர்க்கம் = 'எழுத்து அளவு நிறம்' >
< ப > நான் தேர்ந்தெடுக்கப்பட்டது உரை .< / ப >
< / div >
< கையால் எழுதப்பட்ட தாள் >
செயல்பாடு நடவடிக்கை ( ) {
document.getElementById ( 'தேர்ந்தெடுக்கப்பட்டது' ) .classList.remove ( 'நிறம்' ) ;
}
< / கையால் எழுதப்பட்ட தாள் >
< / உடல் >
மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:
- ஆரம்பத்தில், மேலே உள்ள குறியீட்டில் விளக்கப்பட்ட குறியீடு இங்கே உதாரணமாகப் பயன்படுத்தப்படுகிறது.
- இங்கே, இரண்டும் ' நிறம் 'மற்றும்' எழுத்துரு அளவு 'வகுப்புகள் தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கு நேரடியாக ஒதுக்கப்படுகின்றன.
- அதன் பிறகு, உள்ளே ' நடவடிக்கை ()' செயல்பாடு இது 'ஆல் செயல்படுத்தப்படுகிறது கிளிக் செய்யவும் 'நிகழ்ச்சி கேட்பவர்' அகற்று ()” டோக்கன் முறை பயன்படுத்தப்படுகிறது.
- இந்த முறை ஒன்று அல்லது பல வகுப்புகளை எடுக்கும், அவை தேர்ந்தெடுக்கப்பட்ட உறுப்பிலிருந்து அகற்றப்படும். எங்கள் விஷயத்தில், ' நிறம் 'வகுப்பு தேர்ந்தெடுக்கப்பட்ட HTML உறுப்பிலிருந்து அகற்றப்படும்.
மேலே உள்ள குறியீட்டிற்கான வெளியீடு இவ்வாறு காட்டப்படும்:
'நீக்கு()' முறையைப் பயன்படுத்தி தேர்ந்தெடுக்கப்பட்ட உறுப்பிலிருந்து குறிப்பிட்ட CSS வகுப்பு அகற்றப்பட்டதை மேலே உள்ள வெளியீடு காட்டுகிறது.
முறை 3: மாற்று() முறை
' மாற்று ()” முறை என்பது இரண்டின் கலவையாகும் கூட்டு ()' மற்றும் ' அகற்று ()” முறைகள். இது முதலில் தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புக்கு வழங்கப்பட்ட CSS வகுப்பை ஒதுக்குகிறது மற்றும் பயனரின் செயல்களுக்கு ஏற்ப அதை நீக்குகிறது.
< html >< தலை >
< பாணி >
.fontSize {
எழுத்துரு- அளவு : xx-பெரிய;
}
. நிறம் {
பின்னணி - நிறம் : கேடட்ப்ளூ;
நிறம் : வெள்ளை புகை;
}
< / பாணி >
< / தலை >
< உடல் >
< h1 பாணி = 'நிறம்: கேடட்ப்ளூ;' > Linuxhint < / h1 >
< பொத்தானை கிளிக் செய்யவும் = 'செயல்()' >சேர்ப்பான்< / பொத்தானை >
< ப > ஸ்டைலிங்கைப் பயன்படுத்த மேலே உள்ள பட்டனை அழுத்தவும்< / ப >
< div ஐடி = 'தேர்ந்தெடுக்கப்பட்டது' >
< ப > நான் தேர்ந்தெடுக்கப்பட்டது உரை .< / ப >
< / div >
< கையால் எழுதப்பட்ட தாள் >
செயல்பாடு நடவடிக்கை ( ) {
document.getElementById ( 'தேர்ந்தெடுக்கப்பட்டது' ) .classList.toggle ( 'எழுத்து அளவு' ) ;
}
< / கையால் எழுதப்பட்ட தாள் >
< / உடல் >
< / html >
மேலே உள்ள குறியீட்டின் விளக்கம் கீழே கூறப்பட்டுள்ளது:
- மேலே உள்ள பிரிவில் பயன்படுத்தப்பட்ட அதே நிரல், ' மாற்று ()” முறைக்கு பதிலாக “ அகற்று ()” முறை.
தொகுத்தல் கட்டத்தின் முடிவில், வெளியீடு பின்வருமாறு இருக்கும்:
பயனரின் செயலுக்கு ஏற்ப குறிப்பிட்ட CSS வகுப்பு சேர்க்கப்பட்டு அகற்றப்படுவதை வெளியீடு காட்டுகிறது.
முறை 4: கொண்டுள்ளது() முறை
' கொண்டுள்ளது ()” முறையானது HTML உறுப்பின் மீது குறிப்பிட்ட CSS வகுப்புகளின் கிடைக்கும் தன்மையை சரிபார்க்கப் பயன்படுகிறது மற்றும் அதன் செயலாக்கம் கீழே கூறப்பட்டுள்ளது:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு நடவடிக்கை ( ) {
x ஐ விடுங்கள் = ஆவணம். getElementById ( 'தேர்ந்தெடுக்கப்பட்டது' ) . வகுப்பு பட்டியல் . கொண்டுள்ளது ( 'எழுத்து அளவு' ) ;
ஆவணம். getElementById ( 'சோதனை' ) . உள் HTML = எக்ஸ் ;
}
கையால் எழுதப்பட்ட தாள் >
HTML மற்றும் CSS பகுதி அப்படியே உள்ளது. '< இல் மட்டும் கையால் எழுதப்பட்ட தாள் >” குறிச்சொல், தேர்ந்தெடுக்கப்பட்ட உறுப்பின் மீது “உள்ளது()” முறை பயன்படுத்தப்படுகிறதா என்பதைச் சரிபார்க்க எழுத்துரு அளவு ” என்பது அந்த உறுப்புக்கு பயன்படுத்தப்பட்டதா இல்லையா. அதன் பிறகு, ஒரு ஐடியைக் கொண்ட HTML உறுப்பில் வலைப்பக்கத்தில் முடிவு காட்டப்படும். சோதனை ”.
மேலே உள்ள குறியீட்டைத் தொகுத்த பிறகு, வலைப்பக்கம் இப்படித் தோன்றும்:
வெளியீடு 'இன் மதிப்பைக் காட்டுகிறது உண்மை ” என்பது திரும்பியது, அதாவது குறிப்பிட்ட CSS வகுப்பு தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புக்கு மேல் பயன்படுத்தப்படுகிறது.
முறை 5: பொருள்() முறை
' பொருள் ()” முறை டோக்கன் அல்லது CSS வகுப்பை அவற்றின் குறியீட்டு எண்ணின்படி தேர்ந்தெடுக்கிறது 0 ', கீழே காட்டப்பட்டுள்ளது போல்:
< உடல் >< h1 பாணி = 'நிறம்: கேடட்ப்ளூ;' > லினக்ஸ் h1 >
< பொத்தானை கிளிக் செய்யவும் = 'செயல்()' > செக்கர் பொத்தானை >
< ப > CSS வர்க்கம் முதலில் ஒதுக்கப்படும் , மீட்டெடுக்கப்படுகிறது : ப >
< h3 ஐடி = 'யூஸ்கேஸ்' வர்க்கம் = 'firstCls secondCls thirdCls' > h3 >
< கையால் எழுதப்பட்ட தாள் >
செயல்பாடு நடவடிக்கை ( ) {
டெமோலிஸ்ட்டை அனுமதிக்கவும் = ஆவணம். getElementById ( 'யூஸ்கேஸ்' ) . வகுப்பு பட்டியல் . பொருள் ( 0 ) ;
ஆவணம். getElementById ( 'யூஸ்கேஸ்' ) . உள் HTML = டெமோலிஸ்ட் ;
}
கையால் எழுதப்பட்ட தாள் >
உடல் >
மேலே உள்ள குறியீட்டின் விளக்கம்:
- முதலாவதாக, பல CSS வகுப்புகள் நாங்கள் தேர்ந்தெடுத்த உறுப்புக்கு ' என்ற ஐடியுடன் ஒதுக்கப்படும். பயன்பாட்டு வழக்கு ' மற்றும் 'செயல்()' முறை '' வழியாக செயல்படுத்தப்படுகிறது கிளிக் செய்யவும் ' நிகழ்வு.
- இந்த விழாவில், ' பொருள் ()” என்ற குறியீட்டைக் கொண்ட முறை 0 ” தேர்ந்தெடுக்கப்பட்ட உறுப்புடன் இணைக்கப்படும். முடிவு மாறியில் சேமிக்கப்படும் ' டெமோலிஸ்ட் 'பின்னர் வலைப்பக்கத்தில் அச்சிடப்படும்' உள் HTML ”சொத்து.
தொகுப்பு முடிந்ததும், வெளியீடு இப்படி வரும்:
வெளியீடு CSS வகுப்பின் பெயரைக் காட்டுகிறது, இது தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கு முதலில் பொருந்தும் மற்றும் மீட்டெடுக்கப்படும்.
முறை 6: நீளம் சொத்து
' நீளம் 'டோக்கன்லிஸ்ட்டின் சொத்து, தேர்ந்தெடுக்கப்பட்ட உறுப்பு மீது பயன்படுத்தப்படும் உறுப்புகள் அல்லது ஒதுக்கப்பட்ட வகுப்புகளின் எண்ணிக்கையை வழங்குகிறது. செயல்படுத்தும் செயல்முறை கீழே குறிப்பிடப்பட்டுள்ளது:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு நடவடிக்கை ( ) {
அவர்கள் இடிக்கட்டும் = ஆவணம். getElementById ( 'யூஸ்கேஸ்' ) . வகுப்பு பட்டியல் . நீளம் ;
ஆவணம். getElementById ( 'யூஸ்கேஸ்' ) . உள் HTML = இடிக்க ;
}
கையால் எழுதப்பட்ட தாள் >
மேலே உள்ள குறியீடு தொகுதியில்:
- முதலில் ' நீளம் 'சொத்து இணைக்கப்பட்டுள்ளது' வகுப்பு பட்டியல் ” தேர்ந்தெடுக்கப்பட்ட உறுப்பு மீது ஒதுக்கப்பட்ட வகுப்புகளின் எண்ணிக்கையை மீட்டெடுப்பதற்கான சொத்து.
- அடுத்து, சொத்தின் முடிவு மாறியில் சேமிக்கப்படும் ' இடிக்க ” இது ஒரு ஐடியுடன் வலைப்பக்கத்தில் காட்டப்படும் பயன்பாட்டு வழக்கு ”.
- மீதமுள்ள குறியீடு மேலே உள்ள பிரிவில் உள்ளது போலவே இருக்கும்.
தொகுத்த பிறகு உருவாக்கப்பட்ட வெளியீடு கீழே கூறப்பட்டுள்ளது:
வெளியீடு உறுப்பு மீது பயன்படுத்தப்பட்ட வகுப்புகளை வழங்குகிறது.
முறை 7: மாற்று() முறை
' பதிலாக ()” முறை என்பது குறைந்தது இரண்டு அளவுருக்களை எடுத்து, தேர்ந்தெடுக்கப்பட்ட உறுப்புக்கான இரண்டாவது அளவுருவுடன் முதல் அளவுருவை மாற்றுகிறது, கீழே காட்டப்பட்டுள்ளது:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு நடவடிக்கை ( ) {
டெமோலிஸ்ட்டை அனுமதிக்கவும் = ஆவணம். getElementById ( 'யூஸ்கேஸ்' ) . வகுப்பு பட்டியல் . பதிலாக ( 'எழுத்து அளவு' , 'நிறம்' ) ;
}
கையால் எழுதப்பட்ட தாள் >
இங்கே, CSS” எழுத்துரு அளவு 'வகுப்பு CSS உடன் மாற்றப்பட்டது' நிறம் 'என்ற அடையாளத்துடன் ஒரு உறுப்புக்கான வகுப்பு' பயன்பாட்டு வழக்கு ”. மீதமுள்ள HTML மற்றும் CSS குறியீடு மேலே உள்ள பிரிவுகளைப் போலவே இருக்கும்.
மாற்றியமைத்த பிறகு ' கையால் எழுதப்பட்ட தாள் 'பகுதி மற்றும் முக்கிய HTML கோப்பை தொகுத்தல், வெளியீடு இதுபோல் தெரிகிறது:
குறிப்பிட்ட CSS வகுப்பு மற்றொரு வகுப்பால் மாற்றப்பட்டதை வெளியீடு காட்டுகிறது.
முறை 8: மதிப்பு சொத்து
' மதிப்பு 'டோக்கன் பட்டியல் சொத்து தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புக்கு ஒதுக்கப்பட்ட தேவையான மதிப்புகளை மீட்டெடுக்கிறது. இது அடுத்ததாக இணைக்கப்படும் போது ' வகுப்பு பட்டியல் 'சொத்து, தேர்ந்தெடுக்கப்பட்ட உறுப்புகளுக்கு ஒதுக்கப்பட்ட வகுப்புகள் மீட்டெடுக்கப்படும், கீழே காட்டப்பட்டுள்ளது:
< கையால் எழுதப்பட்ட தாள் >செயல்பாடு நடவடிக்கை ( ) {
demoVal விடுங்கள் = ஆவணம். getElementById ( 'யூஸ்கேஸ்' ) . வகுப்பு பட்டியல் . மதிப்பு ;
ஆவணம். getElementById ( 'அச்சிடு' ) . உள் HTML = demoVal ;
}
கையால் எழுதப்பட்ட தாள் >
மேலே கூறப்பட்ட குறியீடு துணுக்கின் விளக்கம்:
- உள்ளே ' நடவடிக்கை ()' செயல்பாடு உடல், ' மதிப்பு 'சொத்து அடுத்ததாக இணைக்கப்பட்டுள்ளது' வகுப்பு பட்டியல் தேர்ந்தெடுக்கப்பட்ட HTML உறுப்புகளின் அனைத்து ஒதுக்கப்பட்ட வகுப்புகளையும் மீட்டெடுப்பதற்கான சொத்து.
- அடுத்து, மேலே உள்ள சொத்தின் முடிவு ஒரு மாறியில் சேமிக்கப்படும் ' demoVal ” மற்றும் “அச்சு” என்ற ஐடியைக் கொண்ட உறுப்பு மீது செருகப்பட்டது.
தொகுத்தல் கட்டத்தின் முடிவில், ஒரு வலைப்பக்கத்தின் வெளியீடு பின்வருமாறு உருவாக்கப்படுகிறது:
தேர்ந்தெடுக்கப்பட்ட உறுப்பு மீது பயன்படுத்தப்படும் CSS வகுப்புகளின் பெயரை வெளியீடு காட்டுகிறது.
முடிவுரை
HTML DOM டோக்கன்லிஸ்ட் ஆப்ஜெக்ட் என்பது பல முறைகள் மற்றும் பண்புகளை சேமித்து வைக்கும் ஒரு வரிசையைப் போன்றது, இது வழங்கப்பட்ட HTML உறுப்புக்கு மேல் குறிப்பிட்ட செயல்பாட்டைப் பயன்படுத்த பயன்படுகிறது. டோக்கன்லிஸ்ட் வழங்கும் சில முக்கியமான மற்றும் பரவலாகப் பயன்படுத்தப்படும் முறைகள் ' சேர்()', 'நீக்கு()', 'மாற்று()', 'கொண்டுள்ளது()', 'உருப்படி()' மற்றும் 'மாற்று() ”. டோக்கன்லிஸ்ட் மூலம் வழங்கப்படும் பண்புகள் ' நீளம் 'மற்றும்' மதிப்பு ”. இந்த கட்டுரை JavaScript HTML DOMTokenList பொருளுடன் பணிபுரியும் செயல்முறையை விளக்கியுள்ளது.