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-деревом за допомогою відповідних методів.

правити

Порада

Пам'ятайте, що властивість outerText замінює весь вміст елемента, включно з будь-якими існуючими підвузлами, тегами та атрибутами. Якщо вам потрібно зберегти структуру елемента, розгляньте використання innerHTML або безпосередню маніпуляцію DOM-деревом.

автор: Bond правити

Порада

Властивість outerText може не працювати коректно з деякими складними HTML-структурами, такими як таблиці або вкладені списки. У таких випадках може бути доцільніше використовувати альтернативні методи маніпуляції вмістом.

автор: Bond правити

Порада

Для кращої сумісності з різними браузерами, особливо старими версіями, розгляньте використання альтернативних методів, таких як textContent або innerHTML, замість outerText. Властивість outerText не підтримується в деяких старих браузерах.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.outerText

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	98	1.3	≤12.1	12	5.5

Підтримка: мобільні переглядачі

Переглядач
	1	18	98	1

Приклади

+ запропонувати свій приклад у пісочниці

<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>

<div id="myDiv">
  Це <span>приклад</span> тексту.
</div>

<script>
// Отримання тексту елемента
const divElement = document.getElementById('myDiv');
const text = divElement.outerText; // "Це приклад тексту."

// Зміна тексту елемента
divElement.outerText = 'Новий <b>текст</b>';
</script>