Книга: JavaScript. Подробное руководство, 6-е издание

15.5.2. Содержимое элемента в виде простого текста

15.5.2. Содержимое элемента в виде простого текста

Иногда бывает необходимо получить содержимое элемента в виде простого текста или вставить простой текст в документ (без необходимости экранировать угловые скобки и амперсанды, используемые в разметке HTML). Стандартный способ выполнения этих операций основан на использовании свойства textContent объекта Node:

var para = document.getElementsByTagName("p")[0]; // Первый <p> в документе
var text = para.textContent; // Текст "This is a simple document."
para.textContent = "Hello World!"; // Изменит содержимое абзаца

Свойство textContent поддерживается всеми текущими броузерами, кроме IE. В IE вместо него можно использовать свойство innerText. Впервые свойство innerText было реализовано в IE4 и поддерживается всеми текущими броузерами, кроме Firefox.

Свойства textContent и innerText настолько похожи, что обычно могут быть взаимозаменяемы при использовании. Однако будьте внимательны и отличайте пустые элементы (строка "" в языке JavaScript интерпретируется как ложное значение) от неопределенных свойств:

/**
* При вызове с одним аргументом возвращает значение свойства textContent
* или innerText элемента. При вызове с двумя аргументами записывает
* указанное значение в свойство textContent или innerText элемента.
*/
function textContent(element, value) {
  var content = element.textContent;
  // Свойство textContent определено?
  if (value === undefined) { // Если аргумент value не указан,
    if (content !== undefined) return content; // вернуть текущий текст
    else return element.innerText;
  }
  else { // Иначе записать текст
    if (content !== undefined) element.textContent = value;
    else element.innerText = value;
  }
}

Свойство textContent возвращает результат простой конкатенации всех узлов Text, потомков указанного элемента. Свойство innerText не обладает четко определенным поведением и имеет несколько отличий от свойства textContent.innerText не возвращает содержимое элементов <script>. Из возвращаемого им текста удаляются лишние пробелы и предпринимается попытка сохранить табличное форматирование. Кроме того, для некоторых элементов таблиц, таких как <table>, <tbody> и <tr>, свойство innerText доступно только для чтения.

Встроенные элементы <script> (т.е. без атрибута src) имеют свойство text, которое можно использовать для получения их содержимого в виде текста. Содержимое элементов <script> никогда не отображается в броузерах, а HTML-парсеры игнорируют угловые скобки и амперсанды внутри сценариев. Это делает элемент <script> идеальным средством встраивания произвольных текстовых данных, доступных для использования веб-приложением. Достаточно просто определить в атрибуте type элемента какое-либо значение (такое как «text/x-custom-data»), чтобы сообщить, что этот сценарий не содержит выполняемый программный код на языке JavaScript. В этом случае интерпретатор JavaScript будет игнорировать сценарий, но сам элемент будет включен в дерево документа, а содержащиеся в нем данные можно будет получить с помощью свойства text.

Оглавление книги