Властивість JavaScript textContent працює для встановлення та отримання текстового вмісту сторінки. Він використовується для передачі та відображення текстового вмісту деякої інформації, тегів, великого розміру даних і їх вузлів. TextContent змінюється від nodeValue тегу сценарію та повертає вміст із дочірніх вузлів кількох типів даних.
Якщо вузол є текстовим вузлом, інструкцією обробки або зауваженням тегу, тоді javascript textContent отримує або встановлює текст. TextContent показує конкатенацію textContent кожного дочірнього вузла. Він показує інструкції з обробки та коментарі до інших типів вузлів.
Синтаксис
Для текстового вмісту JavaScript доступні два синтаксиси. Перший синтаксис використовується для встановлення тексту вузла, а другий синтаксис використовує для отримання тексту вузла.
Синтаксис 1:
Наступний синтаксис використовується для встановлення тексту вузла за допомогою текстового вмісту.
картографування в машинописі
Node_element.textContent = information;
Синтаксис 2:
Наступний синтаксис використовує текстовий вміст для отримання тексту вузла.
Node_element.textContent;
Повернене значення:
- Рядок містить текст вихідного вузла та його дочірнього вузла. Вихідні дані показують нульове значення, якщо елемент є документом або типом документа.
- Дочірні вузли замінюються одним текстовим вузлом за допомогою набору атрибута textContent. Вмістом атрибута є певний рядок.
Приклади
У наступних прикладах показано набір і отримання різних типів інформації за допомогою атрибута textContent.
Приклад 1
У наступному прикладі для встановлення інформації використовується текстовий вміст у JavaScript. Дані вузла показують текст тегів.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes</h4> Click Here! function display() { var ele = document.getElementById('textContent_information'); ele.textContent = ' <i> JavaScript </i> <h2> Set or get the content of node </h2>'; } Вихід
На наступному зображенні показано набір даних за допомогою вузла вмісту.
Приклад 2
У наступному прикладі для отримання інформації використовується текстовий вміст у JavaScript. Ми можемо отримати значення кнопки функції натискання.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Get node information for child javascript nodes </h4> Get node information for child javascript nodes <br> Click the Button! var text_in = document.getElementById('myData1').textContent; function fdisplay() { document.getElementById('textContent_information').textContent = text_in; } Вихід
На наступному зображенні показано набір даних за допомогою вузла вмісту.
Приклад 3
У наступному прикладі для отримання інформації використовується текстовий вміст у JavaScript. Ми можемо отримати значення кнопки функції натискання.
дійсні ідентифікатори в java
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <h4> Set node information for child javascript nodes </h4> Click the Button! function fdisplay() { var text_in = document.getElementById('value').textContent; document.getElementById('textContent_information').textContent = text_in; } Вихід
На наступному зображенні показано набір даних за допомогою вузла вмісту.
Приклад4
У наступному прикладі для отримання та встановлення інформації використовується текстовий вміст у значенні кнопки. Ми можемо отримати значення після натискання кнопки.
textContent in JavaScript using node <h3> textContent in JavaScript using node </h3> <p id="info"> Get node information for child javascript nodes </p> Click the Button! <br> See the value! function fdisplay() { document.getElementById('value').textContent = 'the information of the node has been changed using click function!'; var text_in = document.getElementById('info').textContent; document.getElementById('values').textContent = text_in; } Вихід
На наступному зображенні показано набір даних за допомогою вузла вмісту.
Приклад5
У наступному прикладі використовується для отримання та встановлення інформації за допомогою innerHtml, innerText і текстового вмісту для значення кнопки. Ми можемо отримати різницю у вихідних даних після натискання кнопки.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> Click the innerHtml Button! Click the innerText Button! Click the textcontent Button! function fdisplay() { document.getElementById('finfo').innerHTML = ' <b> textContent in JavaScript using node </b> the information of the node has been changed using click function!'; } function sdisplay() { document.getElementById('sinfo').innerText = ' <b> textContent in JavaScript using node </b> <br> the information of the node has been changed using click function!'; } function tdisplay() { document.getElementById('tinfo').textContent = ' <b> textContent in JavaScript using node </b> <br> textContent in JavaScript using node <br> the information of the node has been changed using click function!'; } Вихід
На наступному зображенні показано набір даних за допомогою вузла вмісту.
Приклад 6
У наступному прикладі використовується для отримання даних списку та встановлення інформації за допомогою текстового вмісту у значенні кнопки onclick. Ми можемо отримати дані списку та іншу інформацію про теги.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> <li id="std1">David</li> <li id="std2">Sai</li> <li id="std3">Ruta</li> <li id="std4">Saniya</li> <li id="std5">Kevin</li> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; document.getElementById('tinfo').textContent = students; } Вихід
На наступному зображенні показано набір даних за допомогою вузла вмісту.
Приклад 7
Текстовий вміст не підтримує порожні дані, якщо інформація або рядок порожні. Він показує порожній рядок як значення.
textContent in JavaScript using node <h3> The textContent in JavaScript using node </h3> <p> Get node information for child javascript nodes </p> <ul id="students"> </ul> Click the textcontent Button! function tdisplay() { var students = document.getElementById('students').textContent; console.log(students); if(students != ''){ document.getElementById('tinfo').textContent = 'child node does not available of the student parent node.'; }else{ document.getElementById('tinfo').textContent = 'child node is available of the student parent node.'; } } Вихід
швидкість передачі в arduino
На наступному зображенні показано отримання даних за допомогою вузла текстового вмісту.
Ключовий момент текстового вмісту в javascript
- Коли інформація javascript автоматично видаляє HTML, використання текстового вмісту є безпечним.
- Текстовий вміст і інформація включають пробіли та теги внутрішніх елементів. Атрибут innerHTML поверне його.
- Атрибут innerText повертає лише текст без пробілів або тегів внутрішнього елемента. Властивість textContent повертає текст, який містить пробіли, але виключає внутрішні теги елементів.
- Значення всіх текстових вузлів у піддереві комбінуються та встановлюються для текстового вмісту та отримуються з текстового вмісту. Якщо вузол не має дітей, рядок порожній.
- InnerText повертає текст, який читається людиною та приймає будь-який CSS. Текстовий вміст важко прочитати, якщо в даних використовуються теги html.
- Коли властивість встановлюється на вузлі, усі його дочірні елементи видаляються, а окремий текстовий вузол займає його місце з указаним значенням.
Висновок
Текстовий вміст відображає кілька типів інформації. Тег html вимагає інформації та даних списку, які відображаються за допомогою одного методу.