JavaScript: Получение и изменение текста элемента в DOM

Как получить текст элемента с помощью JavaScript

Извлечение текста из элементов веб-страницы — одна из основных задач, с которой сталкиваются разработчики. В этом руководстве мы подробно рассмотрим, как получить текст элемента с помощью JavaScript, используя простые и эффективные методы.

Использование метода innerText

Метод innerText позволяет получить текст, который отображается на странице, исключая HTML-теги. Это один из самых простых способов извлечения текста элемента.

• Выберите элемент с помощью метода document.querySelector или document.getElementById.
• Используйте innerText для получения текста.

Пример:

const element = document.querySelector('.example'); const text = element.innerText; console.log(text); // Выводит текст элемента

Метод textContent

Еще один эффективный способ получения текста — использование textContent. Этот метод возвращает текстовое содержимое элемента, включая текст, скрытый с помощью CSS.

• Выберите элемент так же, как и в предыдущем методе.
• Используйте textContent для получения текста.

Пример:

const element = document.getElementById('example'); const text = element.textContent; console.log(text); // Выводит весь текст элемента, включая скрытые

Сравнение innerText и textContent

Хотя оба метода позволяют извлекать текст, между ними есть важные различия:

• innerText: Учитывает CSS-стили и отображает только видимый текст.
• textContent: Возвращает весь текст, независимо от стилей.

Выбор между innerText и textContent зависит от ваших целей. Если вам нужно получить текст элемента, игнорируя скрытые части, используйте innerText. В противном случае, для получения полного текста элемента, включая скрытый, выберите textContent.

Теперь, когда вы знаете, как работать с javascript текст элемента, вы сможете легко извлекать текст из любых элементов на веб-странице. Экспериментируйте с различными методами и выбирайте тот, который лучше всего подходит для ваших нужд!