Как изменить содержимое страницы после ее загрузки?

Предположим, у нас имеется абзац, HTML-код которого таков:

<Р ID="para">Это просто <EM>курсивный</ЕМ> текст.</Р>

Воспользуемся свойством innerText, чтобы получить его текстовое содержимое:

var paraObject = document.all["para"]; var str = paraObject.innerText;

В переменной str окажется строка "Это просто курсивный текст.", без всяких тегов HTML. To есть при обращении к свойству innerText все HTML-теги из возвращаемого им значения исключаются.

Теперь давайте присвоим этому свойству новое значение:

paraObject.innerText = "А это <STRONG>другой</STRONG> текст.";

В результате в окне Web-обозревателя мы увидим вот это:

А это <STRONG>другой</STRONG> текст.

Обратим внимание, что теги HTML не были обработаны, а просто оказались выведенными на экран, словно это обычный текст.

А теперь опробуем в действии свойство innerHTML:

var paraObject = document.all["para"];

paraObject.innerHTML = "А это <STRONG>другой</STRONG> текст.";

И получим на экране вот что:

А это другой текст.

То есть все теги HTML были правильно обработаны, и слово "другой" было выделено полужирным шрифтом.

Свойство outerHTML позволит нам заменить не только внутреннее содержимое элемента страницы, но и сам этот элемент, в смысле, теги, которые его формируют. Давайте возьмем описанный выше абзац и присвоим его свойству outerHTML другой HTML-код:

var paraObject = document.all [ "para" ] ,-

paraObject.outerHTML = "<DIV>A это <STRONG>другой</STRONG> текст.</DIV>";

Получим элемент страницы, HTML-код которого будет таким:

<DIV>A это <STRONG>другой</STRONG> текст.</DIV>

То есть мы фактически создали новый элемент страницы — не абзац (тег <р>), а контейнер (тег <div>).

Свойство outerText в этом смысле самое радикальное. Оно позволяет заменить новым текстом и содержимое элемента страницы, и сам этот элемент, причем все теги HTML, и форматирующие содержимое этого элемента, исоздающие его, будут исключены. То есть, если мы присвоим свойству outerText нашего абзаца новый текст:

var paraObject = document.all["para"]; paraObject.outerText = "А это другой текст.";

то получим простой текст

А это другой текст.

который будет принадлежать внешнему по отношению к абзацу элементу страницы (в нашем случае — телу страницы).

Народ советует

Свойства outerHTML и outerText могут быть полезны, если нужно быстро удалить какой-либо элемент страницы. В этом случае достаточно присвоить любому из этих свойств пустую строку:

var paraObject = document.all["para"]; paraObject.outerText = "";

Пример

<H1 ID="mainHeader">3дравствуйте!</Hl> <SCRIPT TYPE="text/javascript">

var mainHeaderObject = document.all["mainHeader"];

mainHeaderObject.innerText = "До свидания!"; </SCRIPT>

Этот сценарий заменит заголовок "Здравствуйте!" на "До свидания!".

<Н1 ID="mainHeader">Здравствуйте!</Н1> <SCRIPT TYPE="text/javascript">

var mainHeaderObject = document.all["mainHeader"];

mainHeaderObject.innerHTML = "<ЕМ>До свидания!</EM>"; </SCRIPT>

А этот сценарий еще и выделит его курсивом.

Народ предупреждает!

Напоминаем, что все описанные здесь свойства поддерживаются только Internet Explorer и Opera. Firefox, что называется, отдыхает.

Решение 3

Использование методов и свойств DOM. Этот способ много сложнее, чем описанный выше, но работает во всех Web-обозревателях.

Полное описание DOM выходит за рамки настоящей книги. Автор просто приведет список методов и свойств, относящихся к DOM.

Народ советует

Желающие узнать все о DOM могут наведаться на соответствующий раздел сайта W3C, расположенный по адресу http://www.w3.org/DOM/DOMTR.

Метод createElement объекта document позволяет создать элемент страницы, являющийся тегом, одинарным или парным. Формат его вызова таков:

document.createElement(<Иия тега>);

Имя тега передается в строковом виде и без символов < и >. Метод возвращает экземпляр объекта, соответствующий созданному элементу страницы.

Например, выражение

var pObject = document.createElement("P");

создаст обычный текстовый абзац и поместит соответствующий ему экземпляр объекта в переменную pObject.

Народ предупреждает!

Парные теги, создаваемые таким образом, не имеют содержимого.

Метод createTextNode того же объекта позволяет создать фрагмент текста, который может потом стать содержимым парного тега. Формат его вызова таков:

document.createTextNode(< Текст>);

Разумеется, текст передается в строковом виде. Метод возвращает экземпляр объекта, соответствующий созданному текстовому фрагменту.

Так, выражение

var textObject = document.createTextNode("Это содержимое тега.");

создаст фрагмент текста "Это содержимое тега." и поместит соответствующий ему экземпляр объекта в переменную textobject.

Но созданный таким образом элемент страницы не будет сразу же помещен на Web-страницу. Нам придется сделать это самим, для чего мы воспользуемся методом appendchild объекта, соответствующего элементу страницы, в который мы хотим вложить вновь созданный элемент (в терминологии DOM он называется родителем). Вот его формат вызова:

<Родителъ>.appendchild(<Добавляемый элемент страницы>);

После вызова ЭТОГО метода Добавляемый элемент страницы будет вложен

в Родителя и, как еще говорят, станет его потомком.

pObjеct.appendChiId(textObject); document.body.appendchild(pObject);

Первое из приведенных выше выражений поместит созданный ранее текстовый фрагмент textobject в абзац pObject, сделав его содержимым этого абзаца. Второе же выражение поместит абзац pObject в тело Web-страницы, после чего он и появится в окне Web-обозревателя,

Метод appendChild помещает Добавляемый элемент страницы В конец Родителя,

Если же мы хотим поместить его в начало или середину Родителя, то воспользуемся методом insertBefore:

<Родителъ>.insertBefore(<Добавляемый элемент страницы>,<Потомок, перед которым будет помещен добавляемый элемент>);

Думается, тут особо нечего комментировать...

Теперь временно отвлечемся от методов и рассмотрим различные полезные свойства DOM объекта, соответствующего элементу страницы. Они перечислены в табл. 5.2.

Таблица 5.2. Полезные свойства DOM объекта, соответствующего элементу страницы

Поясним назначение этих свойств.

Ну, СО свойствами firstChild, lastChild И childNodes все ПОНЯТНО. Они ПОЗВОЛЯЮТ получить доступ к первому потомку, последнему потомку и всем сразу потомкам данного элемента страницы соответственно.

var lastPObject = document.body.lastChild;

Это выражение поместит в переменную lastPObject экземпляр объекта, соответствующий последнему добавленному в Web-страницу элементу. Это будет абзац, с которым мы имели дело ранее.

var secondChildObject = document.body.childNodes[1];

Это выражение поместит в переменную secondchildobject экземпляр объекта, соответствующий второму по счету элементу Web-страницы.

document.body.insertBefore(pObject, document.body.childNodes[0]);

А это выражение поместит созданный нами ранее абзац pobject в самое начало страницы (перед первым потомком).

Свойства nextsibling и previoussibiing позволяют получить, соответственно, следующий и предыдущий элементы страницы того же уровня вложенности (имеющие того же родителя, что и текущий элемент). А свойство parentNode возвращает экземпляр объекта, соответствующий родителю текущего элемента. Здесь также все просто.

Свойство nodevalue— самый быстрый способ получить доступ к содержимому фрагмента текста. Вот так мы можем задать новое содержимое для недавно созданного нами абзаца:

document.body.lastChild.firstChild.nodeValue = "Это новое содержимое тега.";

Заметим, что здесь мы сначала получили доступ к самому абзацу с помощью строки свойств (она называется путем) document.body.lastchild, а потом добрались до его содержимого— текстового фрагмента— через свойство firstChild. Да, зачастую пути доступа к нужному объекту, свойству или методу DOM бывают очень длинными...

Вернемся к методам объекта, соответствующего элементу страницы. Метод replacechild позволяет заменить любой потомок данного элемента:

<Родитель>.replaceChild(<3аменяющий элемент страницы>, <Заменяемый потомок>) ;

Этот метод возвращает экземпляр объекта, соответствующий Заменяемому

потомку.

Метод removechild удаляет потомок из элемента страницы:

<Poдитeль>.removeChild(<Удaляeмый потомок>);

и возвращает экземпляр объекта, соответствующий Удаляемому потомку.

Не принимающий параметров метод hasChildNodes возвращает true, если элемент страницы имеет потомков, и false в противном случае.