இந்த வழிகாட்டி ஜாவாஸ்கிரிப்டில் HTML DOM உறுப்பு 'textContent' சொத்தை எவ்வாறு அணுகுவது மற்றும் கையாளுவது என்பதை விளக்குகிறது.
முதலில், HTML DOM “textContent” சொத்தின் அடிப்படைகளைப் பாருங்கள்.
ஜாவாஸ்கிரிப்டில் உள்ள HTML DOM “textContent” சொத்து என்றால் என்ன?
' உரை உள்ளடக்கம் ” என்பது ஒரு குறிப்பிட்ட உறுப்பு அல்லது முனையின் அனைத்து சந்ததிகளையும் உள்ளடக்கிய உரையை அமைக்கும், மீட்டெடுக்கும் மற்றும் மாற்றியமைக்கும் உள்ளமைக்கப்பட்ட சொத்து ஆகும். சந்ததியினர் , , போன்ற குழந்தை கூறுகள் மற்றும் பல வடிவமைத்தல் நோக்கங்களுக்காகப் பயன்படுத்தப்படுகின்றன. 'textContent' பண்பைப் பயன்படுத்தி உரையை அமைக்கும் போது, இலக்கு வைக்கப்பட்ட உறுப்பின் வழித்தோன்றல்கள் புதிய உரையுடன் முழுமையாக மாற்றப்படும்.
தொடரியல்(உரை உள்ளடக்கத்தை அமை)
'ஐப் பயன்படுத்தி ஒரு உறுப்பு/முனையின் உரையை அமைப்பதற்கான அடிப்படை தொடரியல் உரை உள்ளடக்கம் 'சொத்து கீழே எழுதப்பட்டுள்ளது:
உறுப்பு. உரை உள்ளடக்கம் = உரை | முனை. உரை உள்ளடக்கம் = உரை
மேலே உள்ள தொடரியல் விரும்பிய ' உரை ” ஒரு உறுப்பு அல்லது முனைக்கு பயனர் அமைக்க விரும்பும் மதிப்பாக.
தொடரியல்(உரை உள்ளடக்கத்தைப் பெறவும்)
'' வழியாக ஒரு உறுப்பு அல்லது முனையின் உரையைத் திரும்பப் பெறுவதற்கான பொதுவான தொடரியல் உரை உள்ளடக்கம் 'சொத்து இங்கே குறிப்பிடப்பட்டுள்ளது:
உறுப்பு. உரை உள்ளடக்கம் | முனை. உரை உள்ளடக்கம்வருவாய் மதிப்பு: ' உரை உள்ளடக்கம் 'சொத்து திரும்பும்' உரை 'ஒரு உறுப்பு அல்லது முனையின் இடைவெளியுடன் ஆனால் அதன் உள் HTML குறிச்சொற்கள் இல்லாமல்.
'உரை உள்ளடக்கம்' சொத்தை அணுகவும் கையாளவும் இப்போது மேலே வரையறுக்கப்பட்ட தொடரியல்களைப் பயன்படுத்தவும்.
ஜாவாஸ்கிரிப்டில் HTML DOM உறுப்பு 'உரை உள்ளடக்கம்' பண்பை எவ்வாறு அணுகுவது மற்றும் கையாளுவது?
'innerHTML' மற்றும் 'innerText' பண்புகளைப் போலவே, ' உரை உள்ளடக்கம் 'பண்பு பயனர்கள் விரும்பிய உறுப்புகளின் உரையை எளிதாக அமைக்கவும், அணுகவும் மற்றும் மாற்றவும் அனுமதிக்கிறது. இந்தப் பிரிவு கீழே கூறப்பட்டுள்ள எடுத்துக்காட்டுகளைப் பயன்படுத்தி ஒரு உறுப்பு மீது இந்த செயல்பாடுகள் அனைத்தையும் செய்கிறது.
எடுத்துக்காட்டு 1: உறுப்பு/முனை உரையை அணுகுவதற்கு 'உரை உள்ளடக்கம்' பண்பைப் பயன்படுத்துதல்
இந்த உதாரணம் ஒரு குறிப்பிட்ட உறுப்பு அல்லது முனையின் உரையை அதன் அனைத்து குழந்தைகளையும் உள்ளடக்கிய 'உரை உள்ளடக்கம்' பண்பைப் பயன்படுத்துகிறது.
HTML குறியீடு
< div ஐடி = 'myDiv' ஓவர் மீது = 'getText()' பாணி = 'எல்லை: 3px திட கருப்பு; அகலம்: 400px; திணிப்பு: 5px 5px; விளிம்பு: தானியங்கு;' >< h1 > முதல் தலைப்பு < / h1 >
< h2 > இரண்டாவது தலைப்பு < / h2 >
< h3 > மூன்றாவது தலைப்பு < / h3 >
< h4 > நான்காவது தலைப்பு < / h4 >
< h5 > ஐந்தாவது தலைப்பு < / h5 >
< h6 > ஆறாவது தலைப்பு < / h6 >
< / div >
HTML குறியீட்டின் மேலே உள்ள வரிகளில்:
- ' 'myDiv' என்ற ஐடியைக் கொண்ட 'குறிச்சொல், பின்வரும் பண்புகள் எல்லை, அகலம், திணிப்பு (மேல் மற்றும் கீழ், இடது மற்றும் வலது) மற்றும் விளிம்புடன் வடிவமைக்கப்பட்ட ஒரு div உறுப்பை உருவாக்குகிறது. இது ' ஓவர் மீது '' என்று அழைக்கும் நிகழ்வு getText() 'பயனர் சுட்டியை அதன் மேல் வட்டமிடும்போது செயல்பாடு.
- div இன் உள்ளே, குறிப்பிடப்பட்ட தலைப்புகள் (h1,h2,h3,h4,h5 மற்றும் h6) குறிச்சொற்கள் அவற்றின் குறிப்பிட்ட நிலைகளுக்கு ஏற்ப தலைப்பு கூறுகளை செருகும்.
ஜாவாஸ்கிரிப்ட் குறியீடு
< கையால் எழுதப்பட்ட தாள் >
செயல்பாடு getText ( ) {
elem இருந்தது = ஆவணம். getElementById ( 'myDiv' ) ;
எச்சரிக்கை ( உறுப்பு. உரை உள்ளடக்கம் ) ;
}
கையால் எழுதப்பட்ட தாள் >மேலே எழுதப்பட்ட ஜாவாஸ்கிரிப்ட் குறியீடு தொகுதியில்:
- '' என்ற ஒரு செயல்பாட்டை வரையறுக்கவும் getText() ”.
- இந்த செயல்பாட்டின் உள்ளே, 'elem' மாறியானது ' getElementById() 'டிவ் உறுப்பை அதன் ஐடி மூலம் அணுகுவதற்கான முறை.
- ' எச்சரிக்கை() 'முறையானது ஒரு எச்சரிக்கை பெட்டியை உருவாக்குகிறது' உரை உள்ளடக்கம் 'அனைத்துச் சார்ந்தவர்களுடன் சேர்ந்து பெற்றோரின் உரையை திரும்பப் பெறுவதற்கான சொத்து.
வெளியீடு
கீழேயுள்ள வெளியீடு, div உறுப்பின் உரை உள்ளடக்கத்தைக் காட்டும் எச்சரிக்கைப் பெட்டியில் தோன்றும்:
எடுத்துக்காட்டு 2: அதன் சந்ததியினர் உட்பட ஒரு உறுப்பு உரை உள்ளடக்கத்தை மாற்றுவதற்கு 'உரை உள்ளடக்கம்' சொத்தைப் பயன்படுத்துதல்
இந்த உதாரணம், 'textContent' பண்பு அதன் உரையை மாற்றியமைக்கும் போது, ஒரு தனிமத்தின் அனைத்து குழந்தைகளையும் எவ்வாறு மாற்றுகிறது என்பதைக் காட்டுகிறது.
HTML குறியீடு
< மையம் >
< h1 ஐடி = 'என் தலை' கிளிக் செய்யவும் = 'உரையை மாற்றவும்()' >< பி > இது பி > இருக்கிறது < இடைவெளி > தலைப்பு < இடைவெளி > < நான் > உறுப்பு நான் > h1 >
மையம் >மேலே கூறப்பட்ட குறியீட்டு வரிகளில்:
- ' 'குறிச்சொல் இணைக்கப்பட்ட' உடன் நிலை 1 இன் தலைப்பு உறுப்பைச் சேர்க்கிறது கிளிக் செய்யவும் '' என்று அழைக்கும் நிகழ்வு உரையை மாற்றவும்() 'பயனர் அதைக் கிளிக் செய்யும் போது செயல்பாடு.
- தலைப்பு உறுப்பு மேலும் கொண்டுள்ளது ' ',' ', மற்றும் ' ” அதன் வழித்தோன்றல்கள். ' ' டேக் மூடப்பட்ட சரத்தை தடிமனாக மாற்ற பயன்படுகிறது, எந்த ஸ்டைலிங் பண்பும் இல்லாத '' டேக் கொடுக்கப்பட்ட சரத்தில் ஸ்டைலிங் பயன்படுத்தப்படாமல் பயன்படுத்தப்படுகிறது, மேலும் ' ' டேக் காட்டப்படும் சாய்வாகக் குறிப்பிடப்பட்ட சரம்.
ஜாவாஸ்கிரிப்ட் குறியீடு
< கையால் எழுதப்பட்ட தாள் >
எங்கே h1 = ஆவணம். getElementById ( 'என் தலை' ) ;
பணியகம். பதிவு ( h1 ) ;
செயல்பாடு modifyText ( ) {
h1. உரை உள்ளடக்கம் = 'Linuxhint க்கு வரவேற்கிறோம்!' ;
பணியகம். பதிவு ( h1 )
}
கையால் எழுதப்பட்ட தாள் >மேலே உள்ள ஜாவாஸ்கிரிப்ட் குறியீட்டில்:
- 'h1' மாறியானது ' document.getElementById() தலைப்பு உறுப்பை அதன் ஒதுக்கப்பட்ட ஐடி மூலம் அணுகுவதற்கான முறை.
- ' console.log() ” முறை அதன் உள்ளடக்கத்தை மாற்றும் முன் கன்சோலில் அணுகப்பட்ட தலைப்பு உறுப்பைக் காட்டுகிறது.
- செயல்பாடு பெயரிடப்பட்டது ' உரையை மாற்றவும்() 'பயன்படுத்துகிறது' உரை உள்ளடக்கம் ” பெறப்பட்ட தலைப்பு உறுப்பின் உரையை மாற்றுவதற்கான சொத்து.
- கடைசி 'console.log()' முறையானது மாற்றியமைத்த பிறகு 'h1' மதிப்பை மீண்டும் காட்டுகிறது.
வெளியீடு
கொடுக்கப்பட்ட தலைப்பு உறுப்பின் அனைத்து குழந்தைகளும் அதைக் கிளிக் செய்வதன் மூலம் புதிதாக குறிப்பிடப்பட்ட உரையுடன் மாற்றப்பட்டுள்ளன என்பதை கன்சோல் தெளிவாகக் காட்டுகிறது:
எடுத்துக்காட்டு 3: உறுப்புக் குழந்தையின் உரையை மாற்றுவதற்கு 'உரை உள்ளடக்கம்' சொத்தைப் பயன்படுத்துதல்
இந்த உதாரணம் குறிப்பிட்ட உறுப்பு குழந்தையின் உரையை மாற்ற 'textContent' பண்பைப் பயன்படுத்துகிறது.
HTML குறியீடு
< div ஐடி = 'myDiv' பாணி = 'எல்லை: 3px திட கருப்பு; அகலம்: 400px; திணிப்பு: 5px 5px; விளிம்பு: தானியங்கு;' >
< மையம் >
< பொத்தானை ஐடி = 'btn' ஓவர் மீது = 'உரையை மாற்றவும்()' > பழைய பொத்தான் < / பொத்தானை >
< / மையம் >
< / div >இந்த சூழ்நிலையில்:
- 'div' உறுப்பு ஒரு 'பொத்தான்' உறுப்பைக் கொண்டுள்ளது, அது '
” குறிச்சொல். - பொத்தான் உறுப்பு மேலும் ஒதுக்கப்பட்ட ஐடி மற்றும் ' ஓவர் மீது '' என்று அழைக்கும் நிகழ்வு மாற்றம் உரை() சுட்டி அதன் மேல் வட்டமிடும்போது செயல்பாடு.
ஜாவாஸ்கிரிப்ட் குறியீடு
< கையால் எழுதப்பட்ட தாள் >
parentElement இருந்தது = ஆவணம். getElementById ( 'myDiv' ) ;
var இலக்கு = ஆவணம். getElementById ( 'btn' ) ;
என்னை_கண்டுபிடித்தது = பெற்றோர் உறுப்பு. கொண்டுள்ளது ( இலக்கு ) ;
என்றால் ( பெற்றோர் உறுப்பு. கொண்டுள்ளது ( இலக்கு ) == உண்மை ) {
பணியகம். பதிவு ( என்னைக் கண்டுபிடி ) ;
செயல்பாடு மாற்றம் உரை ( ) {
இலக்கு. உரை உள்ளடக்கம் = 'புதிய பொத்தான்' ;
}
} வேறு {
பணியகம். பதிவு ( 'இருக்கவில்லை' )
}
கையால் எழுதப்பட்ட தாள் >மேலே உள்ள குறியீடு துணுக்கில்:
- 'parentElement' மாறியானது ' getElementById() 'பெற்றோர் பிரிவு உறுப்பை அணுகுவதற்கான முறை. 'இலக்கு' மாறியானது அதன் ஐடியைப் பயன்படுத்தி சேர்க்கப்பட்ட பொத்தான் உறுப்பைப் பெற 'getElementById()' முறையைப் பயன்படுத்துகிறது.
- “find_me” மாறியானது “ கொண்டுள்ளது() ” இலக்கிடப்பட்ட பொத்தான் உறுப்பு DIV இன் குழந்தையா இல்லையா என்பதைச் சரிபார்க்கும் முறை. இந்த முறை திரும்பும் ' உண்மை ” என்பதற்கு “ஆம்” இல்லையெனில் “தவறு”.
- ' என்றால்-வேறு ” அறிக்கை ஒரு குறியீடு தொகுதியை வரையறுக்கிறது.
- இலக்கு உறுப்பு பெற்றோர் உறுப்பின் குழந்தை என்றால், ' மாற்றம் உரை() ' செயல்பாடு அதன் உரையை மாற்றும் ' உரை உள்ளடக்கம் ”சொத்து. இல்லையெனில், 'வேறு' குறியீடு தொகுதி '' ஐப் பயன்படுத்தி குறிப்பிட்ட செய்தியைக் காண்பிக்க செயல்படுத்தும் console.log() ”முறை.
வெளியீடு
பணியகம் ' உண்மை ” பொத்தான் உறுப்பைச் சரிபார்க்கும் பூலியன் மதிப்பு, கொடுக்கப்பட்ட DIV இன் குழந்தை என்பதைச் சரிபார்க்கிறது, பின்னர் அதன் மேல் சுட்டியை நகர்த்தும்போது அதன் உரை மாறும்:
textContent, innerText மற்றும் innerHTML பண்புகளுக்கு இடையே உள்ள வேறுபாடு?
பொதுவாக, ' உரை உள்ளடக்கம் ',' உள் உரை ', மற்றும் ' உள் HTML 'பண்புகள் ஒரு உறுப்பு அல்லது முனையின் உரையை அமைக்கும் மற்றும் பெறுவதற்கான வழியில் கையாளுகின்றன. இருப்பினும், இந்த பண்புகள் சில காரணிகளின் அடிப்படையில் ஒருவருக்கொருவர் வேறுபடுகின்றன. இந்த பிரிவு அவை அனைத்திற்கும் இடையே உள்ள முக்கிய வேறுபாடுகளை எடுத்துக்காட்டுகிறது:
விதிமுறை 'உரை உள்ளடக்கம்' 'உள் உரை' 'உள் HTML' திரும்பும் வகை இது ஒரு உறுப்பின் உரையை அதன் குழந்தைகள் (வடிவமைப்பு குறிச்சொற்கள்), CSS மறைக்கப்பட்ட உரை மற்றும் இடம் ஆகியவற்றை உள்ளடக்கியது. இது ஒரு உறுப்புக்கான HTML குறிச்சொற்களை வழங்காது. இது இலக்கு வைக்கப்பட்ட HTML உறுப்பின் உரை உள்ளடக்கத்தை அதன் அனைத்து குழந்தைகளுடன் (வடிவமைப்பு குறிச்சொற்கள்) வழங்குகிறது. இது