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

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

Текст в элементах <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

s += child.nodeValue;

else if (type === 1) // Рекурсивный обход узлов типа Element

s += textContent(child);

}

return s;

}

Свойство

nodeValue

доступно для чтения и записи, и с его помощью можно изменять содержимое в отображаемых узлах

Text

и

CDATASection

. Оба типа,

Text

и

CDATASection

, являются подтипами класса

CharacterData

, описание которого приводится в четвертой части книги. Класс

CharacterData

определяет свойство

data

, которое хранит тот же текст, что и свойство

nodeValue

.

Следующая функция преобразует символы текстового содержимого узлов типа

Text

в верхний регистр, устанавливая значение свойства

data

:

// Рекурсивно преобразует символы всех текстовых узлов-потомков

// элемента n в верхний регистр,

function upcase(n) {

if (п.nodeType == 3 || n.nodeType == 4) // Если n - объект Text или CDATA

n.data = n.data.toUpperCase; // преобразовать в верхний регистр

else // Иначе рекурсия по дочерним узлам

for(var і = 0; і < n.childNodes.length; i++) upcase(n.childNodes[і]);

}

Класс

CharacterData

также определяет редко используемые методы добавления в конец, удаления, вставки и замены текста в узлах

Text

или

CDATASection

. Кроме изменения содержимого имеющихся текстовых узлов этот класс позволяет также вставлять в элементы

Element

новые текстовые узлы или замещать существующие текстовые узлы новыми. Создание, вставка и удаление узлов - тема следующего раздела.

15.6. Создание, вставка и удаление узлов

Мы уже знаем, как получать и изменять содержимое документа, используя строки с разметкой HTML и с простым текстом. Мы также знаем, как выполнять обход документа для исследования отдельных узлов

Element

и

Text

, составляющих его содержимое. Однако точно так же существует возможность изменения документа на уровне отдельных узлов. Тип

Document

определяет методы создания объектов

Element

и

Text

, а тип

Node

определяет методы для вставки, удаления и замены узлов в дереве. Приемы создания и вставки узлов уже были показаны в примере 13.4, который повторяется ниже:

// Асинхронная загрузка сценария из указанного URL-адреса и его выполнение

function loadasync(url) {

var head = document.getElementsByTagName("head")[0]; // Отыскать <head>

var s = document.createElement("script"); // Создать элемент <script>

s.src = url; // Установить его атрибут src

head.appendChild(s); // Вставить <script> в <head>

}

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

15.6.1. Создание узлов

Как было показано в примере выше, создавать новые узлы

Element

можно с помощью метода

createElement

объекта

Document

. Этому методу необходимо передать имя тега: это имя не чувствительно к регистру символов при работе с HTML-документами и чувствительно при работе с XML-документами.