Ang gabay na ito ay maglalarawan kung paano i-access at manipulahin ang HTML DOM element na 'textContent' na property sa JavaScript.
Una, tingnan ang mga pangunahing kaalaman ng HTML DOM na 'textContent' na pag-aari.
Ano ang HTML DOM 'textContent' Property sa JavaScript?
Ang ' textContent ” ay ang built-in na property na nagtatakda, kumukuha, at nagbabago sa text ng isang tinukoy na elemento o node kasama ang lahat ng mga inapo nito. Ang mga inapo ay mga elemento ng bata gaya ng , , , at marami pang iba na ginagamit para sa mga layunin ng pag-format. Habang itinatakda ang text gamit ang property na 'textContent', ang mga inapo ng naka-target na elemento ay ganap na pinapalitan ng bagong text.
Syntax (Itakda ang Nilalaman ng Teksto)
Ang pangunahing syntax upang itakda ang teksto ng isang elemento/node gamit ang “ textContent ” ang ari-arian ay nakasulat sa ibaba:
elemento. textContent = text | node. textContent = text
Ang syntax sa itaas ay tumatagal ng ninanais na ' text ” bilang isang halaga na gustong itakda ng user para sa isang elemento o node.
Syntax(Kumuha ng Text Content)
Ang pangkalahatang syntax upang ibalik ang teksto ng isang elemento o node sa pamamagitan ng “ textContent ” ang ari-arian ay nakasaad dito:
elemento. textContent | node. textContentHalaga ng Pagbabalik: Ang ' textContent 'ang ari-arian ay nagbabalik ng ' text ” ng isang elemento o node na may puwang ngunit walang mga tag ng HTML sa loob nito.
Ngayon gamitin ang mga natukoy na syntax sa itaas nang praktikal upang ma-access at manipulahin ang property na 'textContent'.
Paano I-access at Manipulate ang HTML DOM Element 'textContent' Property sa JavaScript?
Katulad ng 'innerHTML' at 'innerText' na mga katangian, ang ' textContent Ang ” property ay nagbibigay-daan din sa mga user na madaling itakda, i-access, at baguhin ang text ng gustong elemento. Ginagawa ng seksyong ito ang lahat ng mga operasyong ito sa isang elemento gamit ang mga halimbawang nakasaad sa ibaba.
Halimbawa 1: Paglalapat ng 'textContent' na Property upang I-access ang Element/Node Text
Inilalapat ng halimbawang ito ang property na 'textContent' upang ibalik ang text ng isang partikular na elemento o node kasama ang lahat ng mga anak nito.
HTML Code
< div id = 'myDiv' onmouseover = 'getText()' istilo = 'border: 3px solid black; lapad: 400px; padding: 5px 5px; margin: auto;' >< h1 > Unang Heading < / h1 >
< h2 > Pangalawang Pamagat < / h2 >
< h3 > Ikatlong Pamagat < / h3 >
< h4 > Ikaapat na Pamagat < / h4 >
< h5 > Ikalimang Pamagat < / h5 >
< h6 > Ika-anim na Pamagat < / h6 >
< / div >
Sa itaas na mga linya ng HTML code:
- Ang ' Ang tag ng ” na may id na “myDiv” ay lumilikha ng div element na naka-istilong may mga sumusunod na property na border, lapad, padding(itaas at ibaba, kaliwa at kanan), at margin. Kalakip din nito ang ' onmouseover 'kaganapang humihimok sa' getText() ” function kapag ini-hover ng user ang mouse sa ibabaw nito.
- Sa loob ng div, lahat ng tinukoy na heading(h1,h2,h3,h4,h5, at h6) na tag ay naglalagay ng mga elemento ng heading ayon sa kanilang mga tinukoy na antas.
JavaScript Code
< script >
function na getText ( ) {
ay elem = dokumento. getElementById ( 'myDiv' ) ;
alerto ( elemento. textContent ) ;
}
script >Sa nakasulat sa itaas na JavaScript code block:
- Tukuyin ang isang function na pinangalanang ' getText() ”.
- Sa loob ng function na ito, inilalapat ng variable na 'elem' ang ' getElementById() ” paraan para ma-access ang div element sa pamamagitan ng id nito.
- Ang ' alert() Ang paraan ng ” ay lumilikha ng isang alert box na gumagamit ng “ textContent ” property upang ibalik ang text ng parent div kasama ang lahat ng dependent nito.
Output
Ang output sa ibaba ay nagpa-pop up ng alert box na nagpapakita ng text content ng div element:
Halimbawa 2: Paglalapat ng 'textContent' Property upang Palitan ang isang Element Text Content Kasama ang mga Descendents nito
Ipinapakita ng halimbawang ito kung paano pinapalitan ng property na 'textContent' ang lahat ng mga anak ng isang elemento habang binabago ang text nito.
HTML Code
< gitna >
< h1 id = 'aking ulo' onclick = 'modifyText()' >< b > Ito b > ay < span > Heading < span > < i > Elemento i > h1 >
gitna >Sa nabanggit na mga linya ng code:
- Ang ' Nagdaragdag ang tag ng 'heading element ng level 1 na may kalakip na ' onclick 'kaganapang humihimok sa' modifyText() ” function kapag nag-click dito ang user.
- Ang elemento ng heading ay naglalaman din ng ' ',' ”, at “ ” tags bilang mga inapo nito. Ang tag na “ ” ay ginagamit upang i-bold ang kalakip na string, ang tag na “” na walang anumang katangian ng pag-istilo ay ginagamit upang hindi maglapat ng estilo sa ibinigay na string, at ang tag na “ ” ay ginagamit upang ipakita ang tinukoy na string bilang italic.
JavaScript Code
< script >
kung saan h1 = dokumento. getElementById ( 'aking ulo' ) ;
console. log ( h1 ) ;
function modifyText ( ) {
h1. textContent = 'Maligayang pagdating sa Linuxhint!' ;
console. log ( h1 )
}
script >Sa itaas na JavaScript code:
- Ang variable na 'h1' ay gumagamit ng ' document.getElementById() ” paraan upang ma-access ang elemento ng heading sa pamamagitan ng nakatalagang id nito.
- Ang ' console.log() ” paraan ay nagpapakita ng na-access na elemento ng heading sa console bago baguhin ang nilalaman nito.
- Ang function na pinangalanang ' modifyText() 'Gumagamit ng ' textContent ” property upang baguhin ang text ng kinuhang elemento ng heading.
- Ang huling 'console.log()' na pamamaraan ay muling nagpapakita ng 'h1' na halaga pagkatapos ng pagbabago.
Output
Malinaw na ipinapakita ng console na ang lahat ng mga bata ng ibinigay na elemento ng heading ay napalitan ng bagong tinukoy na teksto sa pag-click dito:
Halimbawa 3: Paglalapat ng 'textContent' Property para Baguhin ang Text ng Element's Child
Ginagamit ng halimbawang ito ang property na 'textContent' para baguhin ang text ng anak ng partikular na elemento.
HTML Code
< div id = 'myDiv' istilo = 'border: 3px solid black; lapad: 400px; padding: 5px 5px; margin: auto;' >
< gitna >
< pindutan id = 'btn' onmouseover = 'changeText()' > Lumang Pindutan < / pindutan >
< / gitna >
< / div >Sa ganitong senaryo:
- Ang elementong 'div' ay may elementong 'button' na nilikha sa tulong ng '
” tag. - Ang elemento ng button ay naglalaman pa ng isang nakatalagang id at isang “ onmouseover 'pangyayari na tinatawag na' changeText() ” function kapag nag-hover ang mouse sa ibabaw nito.
JavaScript Code
< script >
ay parentElement = dokumento. getElementById ( 'myDiv' ) ;
var target = dokumento. getElementById ( 'btn' ) ;
ay find_me = parentElement. naglalaman ng ( target ) ;
kung ( parentElement. naglalaman ng ( target ) == totoo ) {
console. log ( Hanapin mo ako ) ;
function changeText ( ) {
target. textContent = 'Bagong Button' ;
}
} iba pa {
console. log ( 'Wala' )
}
script >Sa snippet ng code sa itaas:
- Inilalapat ng variable na 'parentElement' ang ' getElementById() ” paraan para ma-access ang parent div element. Ginagamit din ng variable na 'target' ang pamamaraang 'getElementById()' upang kunin ang idinagdag na elemento ng button gamit ang id nito.
- Ang variable na “find_me” ay gumagamit ng “ naglalaman ng() ” paraan upang suriin kung ang naka-target na elemento ng button ay ang anak ng div o hindi. Ang pamamaraang ito ay babalik ' totoo ” para sa “oo” kung hindi “mali”.
- Ang ' kung hindi ” na pahayag ay tumutukoy sa isang bloke ng code.
- Kung ang naka-target na elemento ay ang anak ng pangunahing elemento, kung gayon ang ' changeText() Ang function na ” ay babaguhin ang teksto nito sa pamamagitan ng “ textContent ” ari-arian. Kung hindi, ang 'iba' na bloke ng code ay isasagawa upang ipakita ang tinukoy na mensahe gamit ang ' console.log() ” paraan.
Output
Ang console ay nagpapakita ng ' totoo ” boolean value na nagpapatunay na ang elemento ng button ay ang anak ng ibinigay na div at pagkatapos ay nagbabago ang text nito sa pag-hover ng mouse sa ibabaw nito:
Pagkakaiba sa pagitan ng textContent, innerText, at innerHTML Properties?
Sa pangkalahatan, ang ' textContent ',' innerText ”, at “ innerHTML Ang mga katangian ay tumatalakay sa teksto ng isang elemento o node sa paraan ng pagtatakda at pagkuha nito. Gayunpaman, ang mga katangiang ito ay naiiba sa bawat isa batay sa ilang mga kadahilanan. Itinatampok ng seksyong ito ang mga pangunahing pagkakaiba sa pagitan ng lahat ng ito:
Mga tuntunin 'textContent' 'innerText' “innerHTML” Uri ng Pagbabalik Ibinabalik nito ang teksto ng isang elemento kasama ang lahat ng mga anak nito (pag-format ng mga tag), nakatagong teksto ng CSS, at espasyo. Hindi nito ibinabalik ang mga HTML na tag ng isang elemento. Ibinabalik nito ang nilalaman ng teksto ng naka-target na elemento ng HTML kasama ang lahat ng mga anak nito (mga tag sa pag-format). Hindi ito nagbabalik ng space, CSS hidden text, at HTML tags maliban sa