• Содержимым является строка разметки 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.
Метод
<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("p")[0]; // Первый <p> в документе </b>
<b>var text = para.textContent; // Текст "This is a simple document."</b>
<b>para.textContent = "Hello World!"; // Изменит содержимое абзаца</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>