Овај водич ће илустровати како да приступите и манипулишете својством ХТМЛ ДОМ елемента „тектЦонтент“ у ЈаваСцрипт-у.
Прво, погледајте основе ХТМЛ ДОМ својства „тектЦонтент“.
Шта је ХТМЛ ДОМ својство „тектЦонтент“ у ЈаваСцрипт-у?
„ тектЦонтент ” је уграђено својство које поставља, преузима и мења текст одређеног елемента или чвора укључујући све његове потомке. Потомци су подређени елементи као што су <и>,<б>,<ем> и још много тога који се користе у сврхе форматирања. Приликом постављања текста помоћу својства „тектЦонтент“, потомци циљаног елемента се потпуно замењују новим текстом.
Синтакса (подесите текстуални садржај)
Основна синтакса за постављање текста елемента/чвора помоћу „ тектЦонтент ” својство је написано у наставку:
елемент. тектЦонтент = текст | чвор. тектЦонтент = текст
Горња синтакса узима жељени „ текст ” као вредност коју корисник жели да постави за елемент или чвор.
Синтакса (преузми текстуални садржај)
Генерализована синтакса за враћање текста елемента или чвора преко „ тектЦонтент ” овде је наведена имовина:
елемент. тектЦонтент | чвор. тектЦонтентПовратна вредност: „ тектЦонтент ” својство враћа „ текст ” елемента или чвора са размаком, али без његових унутрашњих ХТМЛ ознака.
Сада практично користите горе дефинисане синтаксе да бисте приступили својству „тектЦонтент“ и манипулисали њиме.
Како приступити својству ХТМЛ ДОМ елемента „тектЦонтент“ и управљати њиме у ЈаваСцрипт-у?
Слично својствима „иннерХТМЛ“ и „иннерТект“, „ тектЦонтент ” својство такође омогућава корисницима да лако поставе, приступе и модификују текст жељеног елемента. Овај одељак изводи све ове операције над елементом користећи доле наведене примере.
Пример 1: Примена својства „тектЦонтент“ за приступ тексту елемента/чвора
Овај пример примењује својство „тектЦонтент“ да врати текст одређеног елемента или чвора укључујући сву његову децу.
ХТМЛ код
< див ид = 'миДив' онмоусеовер = 'гетТект()' стил = 'ивица: 3пк пуна црна; ширина: 400пк; паддинг: 5пк 5пк; маргина: ауто;' >< х1 > Први наслов < / х1 >
< х2 > Други наслов < / х2 >
< х3 > Трећи наслов < / х3 >
< х4 > Четврти наслов < / х4 >
< х5 > Пети наслов < / х5 >
< х6 > Шести наслов < / х6 >
< / див >
У горњим редовима ХТМЛ кода:
- „ <див> ” ознака која има ид „миДив“ креира див елемент који је стилизован са следећим својствима ивица, ширина, паддинг (горе и доле, лева и десна) и маргина. Такође прилаже „ онмоусеовер ” догађај који позива „ гетТект() ” када корисник пређе мишем преко ње.
- Унутар дива, све наведене ознаке наслова(х1,х2,х3,х4,х5 и х6) убацују елементе наслова у складу са њиховим наведеним нивоима.
ЈаваСцрипт код
< скрипта >функција гетТект ( ) {
био елем = документ. гетЕлементБиИд ( 'миДив' ) ;
узбуна ( елемент. тектЦонтент ) ;
}
скрипта >
У горе написаном блоку ЈаваСцрипт кода:
- Дефинишите функцију под називом „ гетТект() ”.
- Унутар ове функције, променљива „елем“ примењује „ гетЕлементБиИд() ” за приступ елементу див преко његовог ид.
- „ упозорење() ” метод креира оквир упозорења који користи „ тектЦонтент ” својство за враћање текста родитељског дива заједно са свим његовим зависним елементима.
Излаз
У наставку се појављује оквир упозорења који приказује текстуални садржај елемента див:
Пример 2: Примена својства „тектЦонтент“ за замену текстуалног садржаја елемента укључујући његове потомке
Овај пример показује како својство „тектЦонтент“ замењује све подређене елементе елемента док мења његов текст.
ХТМЛ код
< центар >< х1 ид = 'моја глава' онцлицк = 'модифиТект()' >< б > Ово б > је < спан > Наслов < спан > < и > Елемент и > х1 >
центар >
У горе наведеним редовима кода:
- „ <х1> ” ознака додаје елемент заглавља нивоа 1 са приложеним “ онцлицк ” догађај који позива „ модифиТект() ” када корисник кликне на њу.
- Елемент заглавља такође садржи „ <б> ', ' <спан> ', и ' <и> ” као његови потомци. Ознака “<б>” се користи за подебљавање затвореног стринга, ознака “<спан>” без икаквог својства стилизовања се користи да се не примени стил на дати стринг, а ознака “<и>” се користи за приказ наведен стринг као курзив.
ЈаваСцрипт код
< скрипта >где је х1 = документ. гетЕлементБиИд ( 'моја глава' ) ;
конзола. Пријава ( х1 ) ;
функција модифиТект ( ) {
х1. тектЦонтент = „Добро дошли у Линукхинт!“ ;
конзола. Пријава ( х1 )
}
скрипта >
У горњем ЈаваСцрипт коду:
- Променљива „х1“ користи „ доцумент.гетЕлементБиИд() ” за приступ елементу наслова преко додељеног ИД-а.
- „ цонсоле.лог() ” метода приказује елемент наслова којем се приступа на конзоли пре него што промени његов садржај.
- Функција под називом „ модифиТект() ” користи „ тектЦонтент ” за измену текста преузетог елемента наслова.
- Последњи метод „цонсоле.лог()“ поново приказује вредност „х1“ након модификације.
Излаз
Конзола јасно показује да су сва деца датог елемента наслова замењена новонаведеним текстом након клика на њега:
Пример 3: Примена својства „тектЦонтент“ за измену текста детета елемента
Овај пример користи својство „тектЦонтент“ за измену текста детета одређеног елемента.
ХТМЛ код
< див ид = 'миДив' стил = 'ивица: 3пк пуна црна; ширина: 400пк; паддинг: 5пк 5пк; маргина: ауто;' >< центар >
< дугме ид = 'бтн' онмоусеовер = 'цхангеТект()' > Олд Буттон < / дугме >
< / центар >
< / див >
У овом сценарију:
- Елемент „див“ има елемент „дугме“ који је креиран уз помоћ „ <бтн> ” ознака.
- Елемент дугмета даље садржи додељени ИД и „ онмоусеовер ” догађај који позива „ цхангеТект() ” када миш пређе преко ње.
ЈаваСцрипт код
< скрипта >је био парентЕлемент = документ. гетЕлементБиИд ( 'миДив' ) ;
вар таргет = документ. гетЕлементБиИд ( 'бтн' ) ;
био финд_ме = парентЕлемент. садржи ( циљ ) ;
ако ( парентЕлемент. садржи ( циљ ) == истина ) {
конзола. Пријава ( Нађи ме ) ;
функција цхангеТект ( ) {
циљ. тектЦонтент = 'Ново дугме' ;
}
} друго {
конзола. Пријава ( 'Не постоји' )
}
скрипта >
У горњем исечку кода:
- Променљива „парентЕлемент“ примењује „ гетЕлементБиИд() ” за приступ родитељском елементу див. Променљива „таргет“ такође користи метод „гетЕлементБиИд()“ за преузимање додатог елемента дугмета користећи његов ИД.
- Променљива „финд_ме“ користи „ садржи() ” да проверите да ли је циљни елемент дугмета потомак див или не. Овај метод ће вратити „ истина ” за „да” иначе „нетачно”.
- „ ако друго ” израз дефинише блок кода.
- Ако је циљани елемент потомак надређеног елемента, онда „ цхангеТект() ” функција ће променити свој текст преко „ тектЦонтент ' имовина. У супротном, блок кода „елсе“ ће се извршити да прикаже наведену поруку користећи „ цонсоле.лог() ” метод.
Излаз
Конзола приказује „ истина ” логичка вредност која потврђује да је елемент дугмета потомак датог див, а затим се његов текст мења када се мишем пређе преко њега:
Разлика између својстава тектЦонтент, иннерТект и иннерХТМЛ?
Генерално, „ тектЦонтент ', ' иннерТект ', и ' иннерХТМЛ ” својства се баве текстом елемента или чвора на начин да га поставе и добију. Међутим, ове особине се разликују једна од друге на основу неких фактора. Овај одељак истиче главне разлике између свих њих:
| Услови | 'тектЦонтент' | 'унутрашњи текст' | „унутрашњи ХТМЛ“ |
| Ретурн Типе | Враћа текст елемента укључујући све његове потомке (ознаке за форматирање), ЦСС скривени текст и размак. Не враћа ХТМЛ ознаке елемента. | Враћа текстуални садржај циљаног ХТМЛ елемента са свим његовим подређеним елементима (ознаке за форматирање). Не враћа размак, ЦСС скривени текст и ХТМЛ ознаке осим <сцрипт> и <стиле>. | Враћа текст елемента са свим његовим потомцима (ознаке за форматирање), размак, ЦСС скривени текст, као и његове унутрашње ХТМЛ ознаке. |
| унутрашњи ХТМЛ | Не приказује унутрашње ХТМЛ ознаке елемента. | Не приказује унутрашње ХТМЛ ознаке елемента. | Приказује унутрашње ХТМЛ ознаке елемента. |
Сада пређите на практичну примену горе наведених разлика између својстава „тектЦонтент“, „иннерТект“ и „иннерХТМЛ“.
ХТМЛ код
< центар >< х3 ид = 'Х3' >< б > Добродошли б > до < и > Линук < и > < спан > Веб сајт спан > х3 >
< дугме онцлицк = 'ретурнтектЦонтент()' > Приступите текстуалном садржају дугме >
< дугме онцлицк = 'ретурниннерТект()' > Приступите иннерТекту дугме >
< дугме онцлицк = 'ретурниннерХТМЛ()' > Приступите иннерХТМЛ дугме >
< пре ид = 'за' > пре >
центар >
Опис горњег ХТМЛ кода је забележен овде:
- „ <х3> ” ознака умеће наслов нивоа 3 са додељеним ИД-ом „Х3” и ознаке за форматирање као његове потомке
- „ <дугме> ” ознака креира ново дугме са приложеним “ онцлицк ” догађај који позива наведену ЈаваСцрипт функцију када корисник кликне на њу.
- Празан „ <пре> ” ознака са ид-ом “пара” креира блок који приказује излаз. Чува размаке редова и преломе елемента и приказује његов садржај на исти начин као што је додат у изворном коду.
ЈаваСцрипт код
< скрипта >функција ретурнтектЦонтент ( ) {
нека текст = документ. гетЕлементБиИд ( 'Х3' ) . тектЦонтент ;
документ. гетЕлементБиИд ( 'за' ) . иннерТект = текст ;
}
функција ретурниннерТект ( ) {
нека текст = документ. гетЕлементБиИд ( 'Х3' ) . иннерТект ;
документ. гетЕлементБиИд ( 'за' ) . иннерТект = текст ;
}
функција ретурниннерХТМЛ ( ) {
нека текст = документ. гетЕлементБиИд ( 'Х3' ) . иннерХТМЛ ;
документ. гетЕлементБиИд ( 'за' ) . иннерТект = текст ;
}
скрипта >
У блоку ЈаваСцрипт кода:
- „ ретурнтектЦонтент() ” функција примењује „ доцумент.гетЕлементБиИд() ” за приступ додатом елементу наслова преко његовог ИД-а. Такође користи „ тектЦонтент ” за враћање текста елемента наслова којем је приступљено са његовим размацима, потомцима, као и скривеним текстом. Када завршите, прикажите га у преузетом унапред форматираном текстуалном блоку користећи својство „иннерТект“.
- „ ретурниннерТект() ” функција користи “ иннерТект ” да бисте добили садржај текста преузетог елемента заглавља само са његовим потомцима.
- „ ретурниннерХТМЛ() “ функција користи “ иннерХТМЛ ” за враћање текстуалног садржаја додатог елемента заглавља заједно са свим његовим потомцима, размацима и унутрашњим ХТМЛ ознакама.
Излаз
Излаз јасно показује разлику између својстава „тектЦонтент“, „иннерТект“ и „иннерХТМЛ“:
То је све о приступу и манипулисању својством ХТМЛ ДОМ елемента „тектЦонтент“ у ЈаваСцрипт-у.
Закључак
Да бисте приступили и манипулисали текстом елемента, користите ХТМЛ ДОМ “ тектЦонтент ' имовина. Ово својство изводи такве операције уз помоћ своје основне синтаксе специфициране у складу са подешавањем, модификовањем и враћањем текста циљаног елемента. Углавном се користи за добијање текста елемента без његових унутрашњих ХТМЛ ознака које се користе за његово форматирање. Овај водич је дубоко илустровао како да приступите и манипулишете ХТМЛ ДОМ елементом преко својства „тектЦонтент“ у ЈаваСцрипт-у.