Това ръководство ще илюстрира как да получите достъп и да манипулирате свойството „textContent“ на HTML DOM елемента в JavaScript.
Първо, разгледайте основите на свойството „textContent“ на HTML DOM.
Какво представлява свойството „textContent“ на HTML DOM в JavaScript?
„ textContent ” е вграденото свойство, което задава, извлича и модифицира текста на определен елемент или възел, включително всичките му наследници. Потомците са дъщерни елементи като , , и много други, които се използват за целите на форматирането. Докато задавате текста с помощта на свойството „textContent“, наследниците на целевия елемент се заменят напълно с новия текст.
Синтаксис (Задаване на текстово съдържание)
Основният синтаксис за задаване на текста на елемент/възел с помощта на „ textContent ” свойство е написано по-долу:
елемент. textContent = текст | възел. textContent = текст
Горният синтаксис приема желания „ текст ” като стойност, която потребителят иска да зададе за елемент или възел.
Синтаксис (Получаване на текстово съдържание)
Обобщеният синтаксис за връщане на текста на елемент или възел чрез „ textContent ” имотът е посочен тук:
елемент. textContent | възел. textContentВърната стойност: „ textContent ” свойството връща „ текст ” на елемент или възел с интервал, но без неговите вътрешни HTML тагове.
Сега използвайте дефинирания по-горе синтаксис практически за достъп и манипулиране на свойството „textContent“.
Как да получите достъп и да манипулирате свойството „textContent“ на HTML DOM елемент в JavaScript?
Подобно на свойствата „innerHTML“ и „innerText“, „ textContent ” също позволява на потребителите лесно да задават, осъществяват достъп и да променят текста на желания елемент. Този раздел изпълнява всички тези операции върху елемент, като използва посочените по-долу примери.
Пример 1: Прилагане на свойството „textContent“ за достъп до текста на елемент/възел
Този пример прилага свойството „textContent“, за да върне текста на определен елемент или възел, включително всички негови деца.
HTML код
< див документ за самоличност = 'myDiv' върху мишката върху = 'getText()' стил = 'граница: 3px плътно черно; ширина: 400px; подложка: 5px 5px; поле: автоматично;' >< h1 > Първо заглавие < / h1 >
< h2 > Второ заглавие < / h2 >
< h3 > Трето заглавие < / h3 >
< h4 > Четвърто заглавие < / h4 >
< h5 > Пето заглавие < / h5 >
< h6 > Шесто заглавие < / h6 >
< / див >
В горните редове на HTML код:
- „ ” таг с идентификатор „myDiv” създава div елемент, който е оформен със следните свойства граница, ширина, подложка (отгоре и отдолу, отляво и отдясно) и поле. Той също така прикрепя „ върху мишката върху ” събитие, което извиква „ getText() ”, когато потребителят задържи курсора на мишката върху него.
- Вътре в div всички указани тагове за заглавие (h1, h2, h3, h4, h5 и h6) вмъкват елементите за заглавие според техните определени нива.
JavaScript код
< сценарий >
функция getText ( ) {
беше elem = документ. getElementById ( 'myDiv' ) ;
тревога ( елемент. textContent ) ;
}
сценарий >В горния кодов блок на JavaScript:
- Дефинирайте функция с име ' getText() ”.
- В тази функция променливата „elem“ прилага „ getElementById() ” за достъп до елемента div чрез неговия id.
- „ тревога() ' създава поле за предупреждение, което използва ' textContent ”, за да върне текста на родителския div заедно с всички негови зависими.
Изход
Изходът по-долу изскача предупредително поле, показващо текстовото съдържание на елемента div:
Пример 2: Прилагане на свойството „textContent“ за замяна на текстово съдържание на елемент, включително неговите наследници
Този пример показва как свойството „textContent“ замества всички дъщерни елементи на елемент, докато променя неговия текст.
HTML код
< център >
< h1 id = 'главата ми' onclick = 'modifyText()' >< b > Това b > е < педя > Заглавие < педя > < i > елемент i > h1 >
център >В горепосочените редове код:
- „ ” добавя заглавен елемент от ниво 1 с прикачен „ onclick ” събитие, което извиква „ modifyText() ”, когато потребителят щракне върху него.
- Заглавният елемент също съдържа „ ', ' ', и ' ” маркира като свои потомци. Тагът “ ” се използва за удебеляване на затворения низ, тагът “” без никакво свойство за стилизиране се използва за прилагане на стил върху дадения низ, а тагът “ ” се използва за показване на указан низ като курсив.
JavaScript код
< сценарий >
където h1 = документ. getElementById ( 'главата ми' ) ;
конзола. дневник ( h1 ) ;
функция modifyText ( ) {
h1. textContent = „Добре дошли в Linuxhint!“ ;
конзола. дневник ( h1 )
}
сценарий >В горния JavaScript код:
- Променливата „h1“ използва „ document.getElementById() ” за достъп до заглавния елемент чрез присвоения му идентификатор.
- „ console.log() ” показва достъпния заглавен елемент на конзолата, преди да промени съдържанието му.
- Функцията с име „ modifyText() ' използва ' textContent ”, за да промените текста на извлечения заглавен елемент.
- Последният метод “console.log()” отново показва стойността “h1” след модификация.
Изход
Конзолата ясно показва, че всички деца на дадения заглавен елемент са заменени с новопосочения текст при щракване върху него:
Пример 3: Прилагане на свойството „textContent“ за промяна на текста на дъщерния елемент
Този пример използва свойството „textContent“, за да промени текста на дъщерния елемент на конкретния елемент.
HTML код
< див документ за самоличност = 'myDiv' стил = 'граница: 3px плътно черно; ширина: 400px; подложка: 5px 5px; поле: автоматично;' >
< център >
< бутон документ за самоличност = 'btn' върху мишката върху = 'changeText()' > Стар бутон < / бутон >
< / център >
< / див >В този сценарий:
- Елементът „div“ има елемент „бутон“, който се създава с помощта на „
” таг. - Елементът бутон освен това съдържа присвоен идентификатор и „ върху мишката върху ”, което извиква „ changeText() ” функция, когато мишката задържи над нея.
JavaScript код
< сценарий >
беше parentElement = документ. getElementById ( 'myDiv' ) ;
var target = документ. getElementById ( 'btn' ) ;
беше find_me = parentElement. съдържа ( мишена ) ;
ако ( parentElement. съдържа ( мишена ) == вярно ) {
конзола. дневник ( намери ме ) ;
функция changeText ( ) {
мишена. textContent = „Нов бутон“ ;
}
} друго {
конзола. дневник ( 'Не съществува' )
}
сценарий >В горния кодов фрагмент:
- Променливата „parentElement“ прилага „ getElementById() ” за достъп до родителския елемент div. Променливата „target“ също използва метода „getElementById()“, за да извлече добавения елемент на бутона, използвайки неговия идентификатор.
- Променливата „find_me“ използва „ съдържа() ”, за да проверите дали целевият бутонен елемент е дете на div или не. Този метод ще върне „ вярно ” за „да”, в противен случай „фалшиво”.
- „ ако-иначе ” оператор дефинира кодов блок.
- Ако целевият елемент е дете на родителския елемент, тогава „ changeText() ” ще промени текста си чрез „ textContent ' Имот. В противен случай кодовият блок „друго“ ще се изпълни, за да покаже определеното съобщение с помощта на „ console.log() ” метод.
Изход
Конзолата показва „ вярно ” булева стойност, която проверява, че бутонният елемент е дъщерен на дадения div и след това неговият текст се променя при задържане на мишката върху него:
Разлика между свойствата на textContent, innerText и innerHTML?
Като цяло „ textContent ', ' innerText ', и ' innerHTML ” свойствата се занимават с текста на елемент или възел по пътя на настройването и получаването му. Тези свойства обаче се различават един от друг въз основа на някои фактори. Този раздел подчертава основните разлики между всички тях:
Условия 'textContent' 'вътрешен текст' „вътрешен HTML“ Тип връщане Връща текста на елемент, включително всички негови деца (форматиращи тагове), CSS скрит текст и интервал. Не връща HTML таговете на даден елемент. Той връща текстовото съдържание на целевия HTML елемент с всичките му деца (форматиращи тагове). Не връща интервал, CSS скрит текст и HTML тагове освен