Отправляет email-рассылки с помощью сервиса Sendsay

Web-программирование - это просто!

Подписаться Бесплатная «Серебряная» новостная рассылка . Подписчиков 680 RSS
←   Декабрь 2012   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


За последние 60 дней ни разу не выходила


Сайт рассылки: http://www.easyprog.ru
Открыта: 27-06-2009
Адрес автора: comp.soft.prog.easyweb-owner@subscribe.ru

Автор
Александр

Статистика

680 подписчиков
0 за неделю
←   Все выпуски   →

Web-программирование - это просто!


Новое на сайте Программирование - это просто! (www.easyprog.ru):

В платном разделе

В бесплатном разделе

Добрый день, уважаемые подписчики!

Тема сегодняшнего выпуска: «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, вот смотрите скриншот:

 

Тема сегодняшнего выпуска: «Java Script(JS): Методы getElementById и getElementsByTagName, свойство innerHTML.

 

В свойстве innerHTML мы можем указать так же и HTML код:

 

div1.innerHTML="<font color=red>Вы нажали на стрелку</font>"

 

с таким кодом скриншот будет такой:

 

Тема сегодняшнего выпуска: «Java Script(JS): Методы getElementById и getElementsByTagName, свойство innerHTML.

 

Метод 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>

 

Вот как выглядит скриншот до нажатия на кнопку:

Тема сегодняшнего выпуска: «Java Script(JS): Методы getElementById и getElementsByTagName, свойство innerHTML.

 

и вот как после:

 

Тема сегодняшнего выпуска: «Java Script(JS): Методы getElementById и getElementsByTagName, свойство innerHTML.

 

С уважением, Шуравин Александр, e-mail: megabax@rambler.ru, автор оставляет за собой право публиковать в рассылках ваши письма, если в письме прямо неоговорено нежелание его публиковать.

 
В избранное