Шрифт:
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
. *****************************
15.5.3. Содержимое элемента в виде текстовых узлов
Еще одним средством доступа к содержимому элемента является список дочерних узлов, каждый из которых может иметь свое множество дочерних узлов. Когда речь заходит о содержимом элемента, наибольший интерес обычно представляют текстовые узлы. При работе с XML-документами необходимо также быть готовыми встретить узлы
CDATASection
– подтип класса Text
– представляющие содержимое разделов CDATA
. Пример 15.3 демонстрирует функцию
textContent,
которая выполняет рекурсивный обход дочерних элементов и объединяет текст, содержащийся во всех текстовых узлах-потомках. Чтобы было более понятно, напомню, что свойство nodeValue
(определяемое типом Node
) хранит содержимое текстового узла. Пример 15.3. Поиск всех текстовых узлов, потомков указанного элемента
// Возвращает простое текстовое содержимое элемента е, выполняя рекурсивный
// обход всех дочерних элементов. Этот метод действует подобно свойству textContent
function textContent(e) {
var child, type, s = // s хранит текст всех дочерних узлов
fог(child = е.firstChild; child != null; child = child.nextSibling) {
type = child.nodeType;
if (type === 3 || type === 4) // Узлы типов Text и CDATASection