Динамичное изменение элементов документа

HTML-документ, загруженным в браузер, можно изменять с помощью сценариев. Поскольку речь идет не о файле на диске, а о его образе в браузере в оперативной памяти компьютера, то говорят о динамическом изменении документа. Динамическое изменение – изменение, не связанное с загрузкой в браузер исходного файла. С другой стороны, динамические изменения документа не будут воспроизведены при следующем запуске документа: предыдущая динамика не сохраняется в статике(оперативное, т.е. временное состояние, не сохраняется в долговременной памяти, т.е. на диске или других долговременных носителях). Существует три основных способа динамических изменений:

Использование метода write()

Метод write() объекта document принимает в качестве параметра строку, содержащую HTML-код или просто текст. Выполнение в сценарии выражения document. write (строка) приводит к дописыванию в текущий HTML-документ содержимого параметра строка и немедленной его интерпретации браузером. В результате документ и его объектная
модель обновляются. При этом файл с исходным HTML-кодом остается без изменений. Если требуется полностью заменить текущий документ, то сначала применяют метод очистки документа document.dear(), а затем document. write (строка). Однако при такой кардинальной трансформации текущего документа следует быть осторожным. Наиболее безопасный прием — сначала сгенерировать содержимое нового HTML-документа с помощью сценария в текущем документе, а затем отправить HTML-код в новое окно или в другой фрейм многофреймового документа.
Если быть более точным, то следует отметить, что метод write() может принимать произвольное количество строковых параметров:

document. wri te (строка1 [,строка2 . . .[, строкаN]])

Здесь квадратные скобки указывают лишь на необязательность заключенных в них параметров. Если указывается несколько параметров, то они разделяются запятыми. Заметим также, что весь HTML-код документа можно записать как одну строку.
Кроме метода write() можно использовать для тех же целей и метод writeln() имеющий такой же синтаксис. Его особенность в том, что он добавляет в конце каждой строки документа невидимый символ перехода на другую строку.
Методы write() и writeln() работают в браузерах IE3+ и NN2+.

Изменение значений атрибутов элементов

Элементы HTML-документа, как известно, задаются тегами, большинство из которых имеют атрибуты (параметры). В объектной модели документа тегам элементов соответствуют объекты, а атрибутам — свойства этих объектов. В большинстве случаев названия свойств объектов совпадают с названиями атрибутов, но в отличие от последних записываются в нижнем регистре. Это же относится и к параметрам таблиц стилей. Составным именам параметров, записываемых в таблицах стилей через дефис, соответствуют свойства, названия которых образуются так: удаляются дефисы, а второе и последующие слова записываются с прописной буквы. Например, параметру z-index в таблице стилей соответствует свойство zIndex. Однако это общее правило может иметь исключения. Поэтому им нужно пользоваться так: ищите в справочнике свойство, похожее на атрибут, и обращайте внимание на его написание.

Рассмотрим в качестве примера HTML-код вставки графического изображения:

<img id="myimg" src="images/dom4.gif">

Этому HTML-элементу соответствует объект document.all.myimg, а атрибуту src – свойство document.all.myimg.src, значение которого является имя (URL-адрес) файла с изображением. С помощью сценария можно присвоить этому свойству новое значение, и в HTML-документе произойдет замена графического элемента.

Рассмотрим пример документа содержащего графическое изображение. Щелчок на изображении приводит к его замене.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изменение значений атрибутов элементов</title>
</head>
<body>
<img id="myimg" src="images/foto14.gif" onClick='document.all.myimg.src="images/foto15.gif"'>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

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

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Поочередная смена двух изображений</title>

</head>

<body>
<img id="myimg" src="images/foto10.gif" onClick="imgfuncs()">
</body>
<script language="JavaScript">
var flag=false  //флаг(триггер)
function imgfuncs(){  //обработчик щелчка на изображении
if (flag) document.all.myimg.src="images/foto10.gif"
else document.all.myimg.src="images/foto13.gif"
flag=!flag /*изменение значения флаги на противоположное  flag НЕ flag*/
}
</script>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Рассмотрим теперь случай нескольких изображений. Если на веб-странице расположени галлерея миниатюр(thumbnails – уменьшинных копий крупномашбабных изображений). Мы хотим, чтобы при щелчке кнопкой мыши на миниатюре она увеличивалась, а затем при щелчке на увеличенном изображении уменьшалась. Для решения этой задачи потребуется столько флагов, сколько имеется изображений. Флаги определим как массив, каждый элемент которого будет соответствовать отдельному изображению. Далее мы не станем создавать отдельную функцию обработчик события onClick для каждого графического объекта. Вместо этого запрограммируем отдельную функцию-обработчик, которая, кроме всего, будет сама определять, на каком именно изображении произошел щелчок. Идентификаторы id тегов <img> зададим некоторым регулярным образом ("i0", "i1", "i2", ... ). Так часто поступают при использовании массивов. Создадим еще два массива, содержащих имена графических файлов: один для исходных изображений, а другой для замещающих. HTML-документ с изображениями сгенерируем с помощью сценария. Для этого сформируем строку, содержащую теги <img ...>, а затем запишем ее в документ.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Увеличение миниатюр</title>
<script language="JavaScript">
var foto=new Array("images/foto14.gif", "images/foto16.gif", "images/foto18.gif") /*массив исходных файлов*/

var foto1=new Array("images/foto15.gif", "images/foto17.gif", "images/foto19.gif") /*массив замещающих файлов*/

var aflag=new Array(foto.length) //массив флагов

 /*формирование строки тегов, описывающих изображение*/
var xstr=""
for(i=0;i<foto.length;i++){
xstr+='<img id=" i ' +i+ '" src="' +foto[i]+ '" onClick="imgfuncs()">&nbsp;&nbsp;&nbsp;'
}
document.write(xstr) //запись в документ

function imgfuncs(){ //обработчик щелчка на изображении
var xid=event.srcElement.id //id изображения, на котором был щелчок
var n=parseInt(xid.substr(i)) //выделяем номер элемента
if(aflag[n])
document.all[xid].src=foto[n]
else
document.all[xid].src=foto1[n]
aflag[n]=!aflag[n] //изменяем значение флага на противоположное
}
</script>
</head>

<body >

</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

Изменение элементов

Под изменением элемента следует понимать изменение содержимого HTML-тега или самого тега. Наиболее удобный способ динамического изменения элементов HTML-документа в IE4+ основан на использовании свойств innerText, outerLext, innerHTML и outerHTML. В NN6+ можно использовать только свойство innerHTML.
Теги элементов документа могут содержать текст и/или другие теги. С помощью перечисленных выше свойств можно получить доступ к содержимому элемента. Изменяя значения этих свойств, можно изменить сам элемент, частично или полностью. Например, можно заменить только надпись на кнопке, а можно превратить кнопку в изображение или Flash-анимацию.
Значением свойства innerText является все текстовое содержимое, заключенное между открывающим и закрывающим тегами элемента. Если в эту строку входят HTML-теги, то они игнорируются. Обратите внимание, что в значение свойства innerText данные открывающего и закрывающего тегов соответствующего элемента не входят. Таким образом, innerText следует понимать как весь внутренний текст, содержащийся в контейнере.
Свойство outerText аналогично свойству innerText, но отличается от него тем, что включает в себя и данные, содержащиеся в открывающем и закрывающем тегах элемента. Таким образом, outerText следует понимать как весь текст, содержащийся в контейнере, включая и его внешние теги.
Рассмотрим в качестве примера следующий фрагмент HTML-кода, выводящий ссылку, изображение и форматированный текст:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изменение элементов</title>

</head>

<body >
<div id="myid" >
<a href="stage.html">
<img id="myimg" src="images/foto14.gif" >Ссылка на </a>
</div>
<script language="JavaScript">
a=document.all.myid.innerText //значение равено: "Ссылка на"
alert(a)
</script>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.

В этом случае свойства innerText и outerText для элемента, заданного контейнерным тегом <div>, совпадают:

a=document.all.myid.innerText //значение равено: "Ссылка на"

При присвоении свойствам innerText и outerText новых значений следует иметь в виду, что если значение содержит HTML-теги, то они не интерпретируются, а выводятся на экран просто как текст. Так, для приведенного выше фрагмента HTML-кода выполнение в сценарии выражения

document.all.myid.innerText ="<button>Щелкни здесь</button>"

не создаст в документе кнопку, а лишь выведет строку с текстом, указанным справа от оператора присвоения.

В окне веб-браузера это будет выглядеть ТАК.

Рассмотренные выше свойства innerText и outerText не столь эффективны, как замечательные свойства innerHTML и outerHTML. Свойство innerHTML для любого элемента имеет в качестве значения строку, содержащую HTML-код, заключенный между открывающим и закрывающим тегами элемента. Иначе говоря, innerHTML содержит внутренний HTML-код контейнера элемента. Присвоение этому свойству нового значения, содержащего HTML-код, приводит к интерпретации этого кода. Разумеется, новое значение может и не содержать тегов.
Свойство outerHTML аналогично свойству innerHTML, но отличается тем, что содержит весь HTML-код, включая внешние открывающий и закрывающий теги элемента.
Для приведенного выше фрагмента HTML-кода имеет место следующее:

document.all.myid.innerHTML /*значение равено: "<a href="stage.html">
<img id="myimg" src="images/foto14.gif" >Ссылка на </a>"*/

В окне веб-браузера это будет выглядеть ТАК.

document.all.myid.outerHTML /*значение равено:<div id="myid"><a href="stage.html"><img id="myimg" src="images/foto14.gif" >Ссылка на </a></div> */

В окне веб-браузера это будет выглядеть ТАК.

Если в сценарии выполнить выражение

document.all.myid.innerHTML ="<button>Щелкни здесь</button>"

то ссылка, изображение и текст будут заменены кнопкой с надписью Щелкни здесь,а в информационном окне появится текст указанный справа от оператора присвоения.

В окне веб-браузера это будет выглядеть ТАК.

Заметим, что свойства innerHTML и outerHTML могут применяться и к элементам, которые задаются неконтейнерными тегами, например тегом <IMG>. В этом случае значения innerHTML и outerHTML всегда совпадают.
Ниже приводится код функции atribut(sid), которая может использоваться в сценарии для получения значений свойств innerHTML, outerHTML, innerText и outerText элементов HTML-документа. Эта функция принимает в качестве параметра значение идентификатора ID элемента (или значение его атрибута NAME) и выводит диалоговое окно со значениями перечисленных выше свойств. Мы будем применять ее на этапе изучения.
Для этого воспользуемся глобальной функцией eval("строка"). Функция eval() преобразует строку таким образом, что в сценарии она расценивается, как выполняемое выражение.

function atribut(sid){
var s= eval("document.all." +sid)
alert("innerHTML: "+ s.innerHTML+ "\n outerHTML: " + s.outerHTML +"\n innerText: "+ s.innerText +"\n outerText: "+ s.outerText)
}

Рассмотрим пример использования функции atribut(sid).

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Изменение элементов</title>
<script language="JavaScript">
function atribut(sid){
var s= eval("document.all." +sid)
alert("innerHTML: "+ s.innerHTML+ "\n outerHTML: " + s.outerHTML +"\n innerText: "+ s.innerText +"\n outerText: "+ s.outerText)
}
</script>
</head>

<body >
<div id="myid">
<a id="mya" href="stage.html">
<img id="myimg" src="images/foto14.gif" >Ссылка на </a>
</div>
<script language="JavaScript">
atribut("myid") //отображение свойств элемента myid
atribut("myimg") //отображение свойств элемента myimg
atribut("mya") //отображение свойств элемента mya

</script>
</body>
</html>

В окне веб-браузера это будет выглядеть ТАК.



  • Другие |
назадвверхвперед
Rambler's Top100