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

• Содержимым является строка разметки HTML «This is a <i>simple</i> document».

• Содержимым является простая текстовая строка «This is a simple document».

• Содержимым является узел типа

<b>Text</b>
, узел типа
<b>Element</b>
, включающий дочерний узел
<b>Text</b>
, и еще один узел типа
<b>Text</b>
.

Все три ответа являются верными, и каждый ответ ценен по-своему. В следующих разделах описывается, как работать с представлением в виде разметки HTML, с представлением в виде простого текста и с представлением в виде дерева объектов.

15.5.1. Содержимое элемента в виде HTML

При чтении свойства

<b>innerHTML</b>
объекта
<b>Element</b>
возвращается содержимое этого элемента в виде строки разметки. Попытка изменить значение этого свойства приводит к вызову синтаксического анализатора веб-броузера и замещению текущего содержимого элемента разобранным представлением новой строки. (Несмотря на свое название, свойство
<b>innerHTML</b>
может использоваться для работы не только с HTML-, но и с XML-элементами.)

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

<b>innerHTML</b>
обычно достаточно эффективна, несмотря на необходимость синтаксического анализа. Тем не менее обратите внимание, что многократное добавление фрагментов текста в свойство
<b>innerHTML</b>
с помощью оператора
<b>+=</b>
обычно далеко не эффективное решение, потому что требует выполнения двух шагов - сериализации и синтаксического анализа.

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

<b>innerHTML</b>
было реализовано в IE4. Несмотря на то что оно достаточно давно поддерживается всеми броузерами, это свойство было стандартизовано только с появлением стандарта HTML5. Спецификация HTML5 требует, чтобы свойство
<b>innerHTML</b>
было реализовано не только в объекте
<b>Element</b>
, но и в объекте
<b>Document</b>
, однако пока этому требованию отвечают не все броузеры.

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

<b>outerHTML</b>
. При обращении к свойству
<b>outerHTML</b>
оно возвращает строку разметки HTML или XML, содержащую открывающий и закрывающий теги элемента, которому принадлежит это свойство. При записи нового значения в свойство
<b>outerHTML</b>
элемента новое содержимое замещает элемент целиком. Свойство
<b>outerHTML</b>
определено только для узлов типа
<b>Element</b>
, оно отсутствует в объекте
<b>Document</b>
. К моменту написания этих строк свойство
<b>outerHTML</b>
поддерживалось всеми текущими броузерами, кроме Firefox. (В примере 15.5, далее в этой главе, приводится реализация свойства
<b>outerHTML</b>
на основе свойства
<b>innerHTML</b>
.)

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

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

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

Метод

<b>insertAdjacentHTML()</b>
не поддерживается текущей версией Firefox. Далее в этой главе будет представлен пример 15.6, демонстрирующий, как можно реализовать метод
<b>insertAdjacentHTML()</b>
с применением свойства
<b>innerHTML</b>
и как можно написать методы вставки разметки HTML, не требующие указывать позицию вставки с помощью строкового аргумента.

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

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

<b>textContent</b>
объекта
<b>Node</b>
:

<b>var para = document.getElementsByTagName(&quot;p&quot;)[0]; // Первый &lt;p&gt; в документе </b>

<b>var text = para.textContent; // Текст &quot;This is a simple document.&quot;</b>

<b>para.textContent = &quot;Hello World!&quot;; // Изменит содержимое абзаца</b>

Свойство

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

Свойства

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

<b>/**</b>

<b>* При вызове с одним аргументом возвращает значение свойства textContent</b>

<b>* или innerText элемента. При вызове с двумя аргументами записывает</b>

<b>* указанное значение в свойство textContent или innerText элемента.</b>

<b>*/</b>

<b>function textContent(element, value) {</b>

<b>  var content = element.textContent;</b>

<b>  // Свойство textContent определено?</b>