Шрифт:
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
. Еще один способ создания в документе новых узлов заключается в копировании существующих узлов. Каждый узел имеет метод
cloneNode,
возвращающий новую копию узла. Если передать ему аргумент со значением true
, он рекурсивно создаст копии всех потомков, в противном случае будет создана лишь поверхностная копия. В броузерах, отличных от IE, объект Document
дополнительно определяет похожий метод с именем importNode.
Если передать ему узел из другого документа, он вернет копию, пригодную для вставки в текущий документ. Если передать ему значение true во втором аргументе, он рекурсивно импортирует все узлы-потомки.