JavaScript. Подробное руководство, 6-е издание
Шрифт:
Все три ответа являются верными, и каждый ответ ценен по-своему. В следующих разделах описывается, как работать с представлением в виде разметки HTML, с представлением в виде простого текста и с представлением в виде дерева объектов.
15.5.1. Содержимое элемента в виде HTML
При чтении свойства
innerHTML
объекта Element
возвращается содержимое этого элемента в виде строки разметки. Попытка изменить значение этого свойства приводит к вызову синтаксического анализатора веб-броузера и замещению текущего содержимого элемента разобранным представлением новой строки. (Несмотря на свое название, свойство innerHTML
может использоваться для работы не только с HTML-, но и с XML-элементами.) Веб-броузеры прекрасно справляются с синтаксическим анализом разметки 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
доступно только для чтения. Поделиться с друзьями: