Введение в Объектную Модель Документа 4

Динамический контент
Текстовые узлы (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 тэгами, причем не обязательно парными.

Свойство innerHTML

В Internet Explorer у узла элемента (element node) есть свойство innerHTML. Оно представляет собой символьные данные, между начальным и конечным тэгами и может включать другие HTML тэги. Netscape 6 тоже поддерживает это свойство, несмотря на то, что оно не входит в существующий стандарт DOM.

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

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

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

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

Пока это свойство поддерживается браузерами, его можно использовать, но следует помнить, что оно не включено в стандарт DOM.



Много комментариев (3) к “Введение в Объектную Модель Документа 4”

  1. mixa :

    Измените document.getElementById(’sample4′).innerHtml
    на document.getElementById(’sample4′).innerHTML
    а то не работает.


  2. Баранов Андрей :

    спасибо, заменил


  3. ZZZubec :

    Важный моментик с тэгом <b></>, можно сказать забылся даже, что внутри него тоже текст.
    спасибо, а ты бы я наломал потом дров 8)



22 queries 0.247 seconds.