JavaScript. Подробное руководство, 6-е издание, Флэнаган Дэвид

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

на обложку

Флэнаган Дэвид

Шрифт:

Веб-броузеры прекрасно справляются с синтаксическим анализом разметки HTML, поэтому операция изменения значения свойства

innerHTML

обычно достаточно эффективна, несмотря на необходимость синтаксического анализа. Тем не менее обратите внимание, что многократное добавление фрагментов текста в свойство

innerHTML

с помощью оператора

обычно далеко не эффективное решение, потому что требует выполнения двух шагов - сериализации и синтаксического анализа.

Впервые свойство

innerHTML

было реализовано в IE4. Несмотря на то что оно достаточно давно поддерживается всеми броузерами, это свойство было стандартизовано только с появлением стандарта HTML5. Спецификация HTML5 требует, чтобы свойство

innerHTML

было реализовано не только в объекте

Element

, но и в объекте

Document

, однако пока этому требованию отвечают не все броузеры.

Кроме того, спецификация HTML5 стандартизует свойство с именем

outerHTML

. При обращении к свойству

outerHTML

оно возвращает строку разметки HTML или XML, содержащую открывающий и закрывающий теги элемента, которому принадлежит это свойство. При записи нового значения в свойство

outerHTML

элемента новое содержимое замещает элемент целиком. Свойство

outerHTML

определено только для узлов типа

Element

, оно отсутствует в объекте

Document

. К моменту написания этих строк свойство

outerHTML

поддерживалось всеми текущими броузерами, кроме Firefox. (В примере 15.5, далее в этой главе, приводится реализация свойства

outerHTML

на основе свойства

innerHTML

Еще одной особенностью, впервые появившейся в IE и стандартизованной спецификацией HTML5, является метод

insertAdjacentHTML

, дающий возможность вставить строку с произвольной разметкой HTML, прилегающую («adjacent») к указанному элементу. Разметка передается методу во втором аргументе, а точное значение слова «прилегающая» («adjacent») зависит от значения первого аргумента. Этот первый аргумент должен быть строкой с одним из значений: «beforebegin», «afterbegin», «beforeend» или «afterend». Эти значения определяют позицию вставки, как изображено на рис. 15.3.

Метод

insertAdjacentHTML

не поддерживается текущей версией Firefox. Далее в этой главе будет представлен пример 15.6, демонстрирующий, как можно реализовать метод

insertAdjacentHTML

с применением свойства

innerHTML

и как можно написать методы вставки разметки HTML, не требующие указывать позицию вставки с помощью строкового аргумента.

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

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

textContent

объекта

Node

var para = document.getElementsByTagName("p")[0]; // Первый в документе

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

доступно только для чтения.