Использование объектной модели документа (DOM) в JavaScript

Рассмотрим различные способы, как с помощью использования объектной модели документа можно изменить те или иные свойства какого-либо объекта. В качестве такого объекта выберем изображение.

Изображения в HTML вводятся с помощью тега <img>, у которого одним из обязательных атрибутов выступает атрибут src. Будем менять значение этого атрибута с помощью JavaScript. Для этого нужно нашему объекту задать имя, по которому будем к нему обращаться. Имя объекта можно задать, используя или атрибут name, или id. В зависимости от выбранного способа нужно использовать или только name, или только id, или любой из этих атрибутов.

Соответственно тег <img> может выглядеть следующим образом:

Ниже приведены различные варианты записи методов, с помощью которых можно изменить значение атрибута src у объекта с именем «photo»:

document.images["photo"].src = "photo2.jpg";
document["photo"].src = "photo2.jpg";
photo.src = "photo2.jpg";
document.all["photo"].src = "photo2.jpg";
document.getElementById("photo").src = "photo2.jpg";

Примечание
• Приведенные методы работают во всех современных броузерах. Однако некоторые из этих методов могут не работать в старых версиях тех или иных броузеров (например, методы 3 и 4 не работают в старых версиях Netscape и Mozilla, метод 5 не работает в Netscape версии 4.7x и ниже).

• Используя приведенные методы можно обращаться к объектам, имена которых заданы как атрибутом name, так и атрибутом id. Однако, в старых версиях некоторых броузеров нужно использовать или только name, или только id (например, в методе 2 в броузерах IE 6 и Opera 7.xx и выше нужно использовать только name; в методе 5 в броузерах Mozilla и Opera только id).

Пример скрипта

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>DOM</title>
</head>

<body>

<img src="photo.jpg" width="150" height="100" name="photo" id="photo">

<script type="text/javascript">
document.images['photo'].src = "photo2.jpg";
</script>

</body>
</html>