JS властивість Element.outerText
Загальний опис
Властивість outerText об'єкта HTMLElement дозволяє отримувати та встановлювати текстовий вміст елемента, включно з усім текстом, який знаходиться всередині елемента, а також усіма тегами та їх атрибутами. Ця властивість корисна для маніпуляцій з текстовим вмістом веб-сторінки та її елементів за допомогою JavaScript.
Отримання текстового вмісту елемента відбувається таким чином:
const elementText = element.outerText;
Тут element - це об'єкт HTMLElement, чий текстовий вміст потрібно отримати. Значення властивості outerText буде рядком, що містить весь текст елемента, включно з будь-якими тегами та їх атрибутами.
Встановлення текстового вмісту елемента відбувається таким чином:
element.outerText = 'Новий текст';
Це призведе до заміни всього поточного вмісту елемента element на рядок 'Новий текст'. Будь-які існуючі підвузли, теги та атрибути будуть видалені.
Властивість outerText може бути корисною, наприклад, для створення простих текстових редакторів або для маніпуляцій з вмістом веб-сторінки. Проте слід зазначити, що вона не підтримується в деяких старих браузерах, тому для кращої сумісності може знадобитися використовувати альтернативні методи, такі як innerHTML або textContent.
Наприклад, розглянемо таку HTML-розмітку:
<div id="content">
<p>Початковий <b>жирний</b> текст</p>
<span>Деякий текст</span>
</div>
Ми можемо отримати та змінити текстовий вміст елемента div з ідентифікатором content таким чином:
const contentElement = document.getElementById('content');
console.log(contentElement.outerText); // Виведе: "Початковий жирний текстДеякий текст"
contentElement.outerText = 'Новий текст для елемента';
console.log(contentElement.outerText); // Виведе: "Новий текст для елемента"
У цьому прикладі ми спочатку отримуємо текстовий вміст елемента div за допомогою outerText та виводимо його в консоль. Потім ми встановлюємо новий текстовий вміст для цього елемента, замінюючи весь попередній вміст, включно з тегами p та span.
Слід пам'ятати, що властивість outerText може не працювати коректно з деякими складними HTML-структурами, такими як таблиці або вкладені списки. У таких випадках може бути доцільніше використовувати інші методи маніпуляції вмістом, такі як innerHTML або безпосередньо маніпулювати DOM-деревом за допомогою відповідних методів.
| Порада: | Пам'ятайте, що властивість |
| Порада: | Властивість |
| Порада: | Для кращої сумісності з різними браузерами, особливо старими версіями, розгляньте використання альтернативних методів, таких як |
Синтаксис
Element.outerTextЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
98 |
1.3 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
1 |
18 |
98 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
У цьому прикладі створено контейнер div з деяким вбудованим текстом та елементами форматування. Є дві кнопки: одна для показу outerText контейнера, а інша - для зміни outerText.
При натисканні на кнопку "Показати outerText" викликається функція showOuterText(), яка отримує вміст outerText контейнера та виводить його в елемент <p> з ідентифікатором output.
При натисканні на кнопку "Змінити outerText" викликається функція changeOuterText(), яка змінює outerText контейнера на новий рядок тексту з елементом <b>.
Цей приклад демонструє, як можна отримувати та змінювати outerText елемента, включаючи його дескендантів, і дозволяє користувачеві взаємодіяти зі сторінкою, натискаючи на кнопки.
У цьому прикладі ми використовуємо властивість outerText для отримання та зміни тексту елемента HTML, включаючи всі теги, що знаходяться всередині. Це корисно, коли потрібно отримати або змінити весь текстовий вміст елемента разом із вкладеними елементами.
<div id="myDiv">
Це <span>приклад</span> тексту.
</div>
<script>
// Отримання тексту елемента
const divElement = document.getElementById('myDiv');
const text = divElement.outerText; // "Це приклад тексту."
// Зміна тексту елемента
divElement.outerText = 'Новий <b>текст</b>';
</script>У цьому складнішому прикладі ми використовуємо властивість outerText для створення інтерактивного елемента, який змінює свій текст при наведенні курсору миші. Це демонструє, як можна динамічно змінювати вміст елемента HTML за допомогою outerText.
<div id="hoverText">Наведіть курсор на цей текст</div>
<script>
const hoverText = document.getElementById('hoverText');
// Початковий текст
let originalText = hoverText.outerText;
// Функція, яка змінює текст при наведенні курсору
function changeText() {
hoverText.outerText = 'Ви навели курсор на цей текст!';
}
// Функція, яка відновлює початковий текст при відведенні курсору
function restoreText() {
hoverText.outerText = originalText;
}
// Додаємо обробники подій
hoverText.addEventListener('mouseenter', changeText);
hoverText.addEventListener('mouseleave', restoreText);
</script>