WEB-программирование. Java Script(JS): Методы getElementById и getElementsByTagName, свойство innerH

Автор megabax

13.06.2013 г.

Урок 13. Управление шрифтами в CSS New Page 1

WEB-программирование. 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>

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>