| Добрый день, уважаемые подписчики! Тема сегодняшнего выпуска: «Java Script(JS): Методы getElementById и getElementsByTagName, свойство innerHTML. Для углубленного изучения web-программирования (язык PHP и написание своей собственной CMS) советую подписаться на платный раздел (см. анонсы раздела "Пишем Easy CMS") и Разработка сервиса сайта на PHP на примере партнерской программы). Продолжаем изучать DOM объекты. Сегодня мы изучим функцию getElementById - получение элемента по его ID. Если мы задами у тэга атрибут Id, То при помощи этой функции мы можем найти элемент, соответствующий этому тегу. Во пример использования этой процедуры: | <html> <head> <title>Урок 86. Java Script (JS): Пример с заменой картинки при щелчке на нее мышкой</title> </head> <body> <img src="Blue_01.png" OnClick="ImageClick()" id="img1"> <div id="div1"></div> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> function ImageClick() { obj=document.getElementById("img1") obj.src="Yellow_04.png" div1=document.getElementById("div1") div1.innerHTML="Вы нажали на стрелку" } </SCRIPT> </body> </html> | В отличии от примера предыдущего урока, здесь мы получаем элемент не через this, а через функцию getElementById. Найдя элемент мы можем даже задать в нем какой либо текст через свойство innerHTML, вот смотрите скриншот:  В свойстве innerHTML мы можем указать так же и HTML код: | div1.innerHTML="<font color=red>Вы нажали на стрелку</font>" | с таким кодом скриншот будет такой:  Метод getElementById использует так же в библиотеке визуальных компонентов (версия 1.6), в частности в CXBrTreeView: | function CXBrTreeView_on_click(id,level_node) { tag=this._document.getElementById("_"+id+"_"+level_node) node=_get_node_by_id(id,this._nodes) if(node._data["_is_exploded"]==true) node._data["_is_exploded"]=false; else node._data["_is_exploded"]=true tag.innerHTML=this._out_node(level_node,node) } | Теперь перейдем к следующему методу getElementsByTagName, он позволяет найти сразу несколько элементов по имени тэга, например, все картинки, все абзацы (тэг <P>), и так далее. вот пример использования данного метода: | <html> <head> <title>Урок 86. Java Script (JS): </title> </head> <body> <input type="submit" value="Нажми на меня" OnClick="ImageClick()"> <p>Проба</p> <p>Проба</p> <p>Проба</p> <p>Проба</p> <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript"> function ImageClick() { arr=document.getElementsByTagName("P") for(i=0; i<=3; i++) arr[i].innerHTML="Абзац "+i; } </SCRIPT> </body> </html> | Вот как выглядит скриншот до нажатия на кнопку:  и вот как после:  С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать. | 
Комментариев нет:
Отправить комментарий
Спасибо за Ваш комментарий. ASI очень ценит его.