Введение в Объектную Модель Документа (DOM), часть 4 из 6

• Динамический контент
• Текстовые узлы (Text Nodes)

Итак, ранее мы рассмотрели как можно получить доступ к любому атрибуту или свойствам стилей любого элемента на странице. Но как же динамически добавлять или удалять сами элементы и контент на странице? Или изменять контент?

Динамический контент

Изменить текстовое содержимое страницы довольно просто. Каждая непрерывная строка символов в теле HTML страницы представляется текстовым узлом. Свойство nodeValue содержит этот текст. Изменяя его значение можно соответственно изменять текст на странице.

Текстовые узлы (Text Nodes)

Следующий пример использует простейший тэг параграфа <p> и текст внутри него. Кликайте по ссылкам, чтобы изменить этот текст.

Вот текст, который будем изменять.

меняем раз :: меняем еще

А теперь рассмотрим код этого примера:

<p id="sample1">Вот текст, который будем изменять.</p>
<p>
<a href="" onclick="document.getElementById('sample1').firstChild.nodeValue = 'If something`s hard to do...'; return false;">меняем раз</a>
::
<a href="" onclick="document.getElementById('sample1').firstChild.nodeValue = '...then it`s not worth doing!'; return false;">меняем еще</a>
</p>

Ну и сразу важное замечание. У текстового узла отсутствует атрибут id, который может быть у узла элемента. Таким образом напрямую, используя метод document.getElementById() или document.getElementsByTagName(), к нему обращаться нельзя.

Зато получить доступ к текстовому узлу можно зная его родительский узел (parent node), в данном случае элемент параграфа с id="sample1". Этот узел элемента содержит один дочерний узел (child node), тот самый текстовый узел, который мы хотим изменить. Вот как это может быть изображено:

Итак, document.getElementById('sample1').firstChild.nodeValue используется для доступа к этому текстовому узлу и чтения или изменения его значения, т.е. текста внутри параграфа.

Важно помнить, что текстовый узел может содержать только текст. Даже простые тэги <b> и <i> внутри строки текста порождают дерево узлов элементов и текстовых узлов. Возьмем вышеописанный пример и, добавив тэги, сделаем слово “текст” полужирным.

<p id="sample2">Вот <b>текст</b>, который будем изменять.</p>

и таким образом элемент параграфа с id="sample2" теперь содержит три дочерних узла вместо одного. Это будет: текстовый узел “Вот”, узел элемента для пары тэгов <b></b> и текстовый узел “, который будем изменять.” Узел элемента b содержит один дочерний узел, это текстовый узел “текст”. То, что получилось, можно изобразить так:

А теперь посмотрим, что получилось после изменения разметки, но если оставить скрипт из предыдущего примера без изменений.

Вот текст, который будем изменять.

меняем раз :: меняем еще

Изменение значения firstChild элемента “p” теперь приведет к замене только части текста “Вот”. А если попытаетесь добавить разметку в значение текстового узла, браузер обработает ее как обычный текст, вот пример:

Вот текст, который будем изменять.

меняем раз :: меняем еще

Посмотрите на код этого примера:

<p id="sample4">Вот <b>текст</b>, который будем изменять.</p>
<p>
<a href="" onclick="document.getElementById('sample4').firstChild.nodeValue = '<b>If something`s</b> hard to do...'; return false;">меняем раз</a>
::
<a href="" onclick="document.getElementById('sample4').firstChild.nodeValue = '...then it`s <i>not worth</i> doing!'; return false;">меняем еще</a>
</p>

Вы избежите проблему, рассмотренную выше, поняв, что текстовые узлы это обычные строки символов, размещенные между любыми двумя HTML тэгами, причем не обязательно парными.

document.getElementById('sample4').innerHTML = "<b>If something`s</b> hard to do...";

Дальше про текстовые узлы.

Внимание! Это материал 2005 года. Какие-то факты могли утратить актуальность.