ஜாவாஸ்கிரிப்டில் உள்ள பட்டியல் உருப்படியில் உள்ள ஆங்கர் உறுப்பின் ஐடியை மீட்டெடுப்பதற்கான செயல்முறையை இந்தக் கட்டுரை வழங்குகிறது.
ஜாவாஸ்கிரிப்டில் ஒரு பட்டியல் உருப்படியில் உள்ள ஆங்கரின் ஐடியை எவ்வாறு மீட்டெடுப்பது?
ஒரு உறுப்பின் ஐடி பண்புக்கூறு ஒரு தனித்துவமான அடையாளங்காட்டியாகும், இது ஜாவாஸ்கிரிப்ட் செயல்பாட்டில் அந்த உறுப்பைக் கையாளவும் பயன்படுத்தவும் பயன்படுகிறது. பயனர்கள் உறுப்பை அதன் ஐடியைப் பயன்படுத்தி பல்வேறு முறைகள் மூலம் பெறலாம். இருப்பினும், HTML உறுப்பின் ஐடியை மீட்டெடுப்பது கடினமாக இருக்கலாம். இருப்பினும், HTML உறுப்பின் ஐடி பண்புக்கூறை மீட்டெடுப்பது சற்று சிக்கலானதாக இருக்கலாம்.
இதேபோல், ஒரு “க்குள் உள்ள நங்கூர உறுப்புகளின் விஷயத்தில் பட்டியல் உருப்படி ”, பயனர் நேரடியாக ஆங்கர் உறுப்பை அழைத்து அதன் ஐடியைப் பெற முடியாது, ஏனெனில் அவை பட்டியலில் இருப்பதால் பல ஆங்கர் கூறுகள் இருக்கும். இந்தச் சூழ்நிலையில், பட்டியல் உருப்படியில் உள்ள ஆங்கர் உறுப்பின் ஐடியை எவ்வாறு மீட்டெடுப்பது என்பதை கீழே கொடுக்கப்பட்டுள்ள ஆர்ப்பாட்டம் காட்டுகிறது:
< html >
< உடல் >
< div >
< உல் ஐடி = 'பட்டியல்' >
< அந்த >
< அ ஐடி = 'நங்கூரம்1' href = '#' > ஆங்கர் உறுப்பு 1 < / அ >
< / அந்த >
< அந்த >
< அ ஐடி = 'நங்கூரம்2' href = '#' > ஆங்கர் உறுப்பு 2 < / அ >
< / அந்த >
< அந்த >
< அ ஐடி = 'நங்கூரம் 3' href = '#' > ஆங்கர் உறுப்பு 3 < / அ >
< / அந்த >
< / உல் >
< / div >
< ப > மேலே உள்ள பட்டியலிலிருந்து ஆங்கர் உறுப்புகளின் ஐடிகளைப் பெற கீழே உள்ள பொத்தானைக் கிளிக் செய்யவும்! < / ப >
< பொத்தானை கிளிக் செய்யவும் = 'myFunction()' > அடையாள அட்டைகளைப் பெறுங்கள் < / பொத்தானை >
< ப ஐடி = 'வேர்' >< / ப >
< கையால் எழுதப்பட்ட தாள் >
செயல்பாடு myFunction() {
listItems = document.querySelectorAll('#list a[id]') அனுமதிக்கவும்;
க்கு (நான் = 0; i < listItems.length; நான்++ ) {
விடு ஐடி = பட்டியல் பொருட்கள் [ நான் ] . ஐடி ;
document.getElementById ( 'வேர்' ) .innerHTML + =
'ஆங்கர் உறுப்பு ஐடி' + ( நான் + 1 ) + ' இருக்கிறது: ' + ஐடி + '
';
}
}
< / கையால் எழுதப்பட்ட தாள் >
< / உடல் >
< / html >
மேலே உள்ள குறியீட்டின் விளக்கம் பின்வருமாறு:
- ஐடியுடன் வரிசைப்படுத்தப்படாத பட்டியல் ' பட்டியல் 'உருவாக்கப்பட்டு அதில் அடங்கியுள்ளது' ' குறிச்சொற்கள்.
- பட்டியல் உருப்படிகளுக்குள் மூன்று ஆங்கர் குறிச்சொற்கள் உருவாக்கப்பட்டு ஐடிகளுடன் வழங்கப்படுகின்றன ' நங்கூரம்1 ',' நங்கூரம்2 ', மற்றும் ' நங்கூரம் 3 ' முறையே.
- அடுத்து, ஒரு ' ” உறுப்பு உருவாக்கப்பட்டது மற்றும் சில உரை உள்ளடக்கம் உள்ளது.
- அடுத்து, '' ஐப் பயன்படுத்தி ஒரு பொத்தான் உறுப்பு உருவாக்கப்பட்டது <பொத்தான்> ' குறிச்சொற்கள். ' கிளிக் செய்யவும்() 'பொத்தானின் பண்புக்கூறு '' எனப்படும் செயல்பாடுடன் வழங்கப்படுகிறது myFunction() ”.
- ஒரு காலி' 'ஐடியுடன் கூடிய உறுப்பு' க்கான ” உருவாக்கப்பட்டது.
- அடுத்து, உள்ளே '
கீழே உள்ள வெளியீட்டில், நங்கூரம் கூறுகள் பட்டியலில் உள்ளன, மேலும் '' ஐக் கிளிக் செய்வதன் மூலம் பயனர் தங்கள் ஐடிகளைப் பெறலாம். அடையாள அட்டைகளைப் பெறுங்கள் ' பொத்தானை.
பட்டியல் உருப்படிகளுக்குள் உள்ள ஆங்கர் உறுப்புகளின் ஐடிகளை மீட்டெடுப்பது பற்றியது.
முடிவுரை
பட்டியல் உருப்படியில் உள்ள ஆங்கர் உறுப்பின் ஐடியை மீட்டெடுக்க, உள்ளமைக்கப்பட்ட ஜாவாஸ்கிரிப்ட் ' document.querySelectorAll() ” முறையைப் பயன்படுத்தலாம். கூடுதலாக, இந்த ஆங்கர் உறுப்புகளின் பெறப்பட்ட ஐடிகளை உள்ளமைக்கப்பட்ட ஜாவாஸ்கிரிப்டைப் பயன்படுத்தி வலைப்பக்கத்தில் அச்சிடலாம். .innerHTML() ”முறை. ஜாவாஸ்கிரிப்டில் உள்ள ஒரு பட்டியல் உருப்படியில் உள்ள ஆங்கர் உறுப்பின் ஐடியை மீட்டெடுப்பதற்கான செயல்முறையை இந்தக் கட்டுரை வழங்கியுள்ளது.