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-документами.

Для создания текстовых узлов существует аналогичный метод:

  var newnode = document.сreateTextNode("содержимое текстового узла");

Кроме того, объект Document определяет и другие фабричные методы, такие как редко используемый метод createComment. Один такой метод, createDocumentFragment, мы будем использовать в разделе 15.6.4. При работе с документами, в которых используются пространства имен XML, можно использовать метод createElementNS, позволяющий указывать URI-идентификатор пространства имен и имя тега создаваемого объекта Element.