Получение текстового содержимого из элемента Div с помощью обычного JavaScript

При попытке получить текст внутри элемента div с использованием свойства "value" , вы столкнулись с проблемой, из-за которой возвращалось «неопределенное». Чтобы успешно извлечь текстовое содержимое с помощью чистого JavaScript, вы можете использовать следующий подход:

Свойство «value» в основном используется с элементами ввода, а не с элементами div. Чтобы получить доступ к текстовому содержимому элемента div, вам следует использовать свойства «innerHTML» или «textContent».

Использование свойства «innerHTML»:

function test() {
  var t = document.getElementById('superman').innerHTML;
  alert(t);
}

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

В качестве альтернативы рассмотрите возможность использования свойства textContent:

function test() {
  var t = document.getElementById('superman').textContent;
  alert(t);
}

Свойство textContent возвращает исключительно текстовое содержимое внутри элемента div, исключая любые HTML-теги. Этот параметр особенно полезен при работе с элементами div, которые могут содержать смешанное содержимое.

Например, рассмотрим следующий HTML-код:

  Some sample text.

Использование свойства «innerHTML» вернет следующее:

var node = document.getElementById('test');

htmlContent = node.innerHTML;
// htmlContent = "Some sample text."

Однако использование свойства "textContent" даст:

textContent = node.textContent;
// textContent = "Some sample text."

Для получения дополнительной информации и примеров использования обратитесь к подробной документации, предоставленной MDN:

• [textContent](https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent)
• [innerHTML](https ://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)