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

We use cookies. Read the Privacy and Cookie Policy

Иногда бывает необходимо получить содержимое элемента в виде простого текста или вставить простой текст в документ (без необходимости экранировать угловые скобки и амперсанды, используемые в разметке 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>

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

*****************************