vvz.nw.ru Примеры к занятиям по JavaScript

<< Идентификация элементов документа

Модели документа DOM0 и DOM2 предоставляют свои возможности идентификации элементов документа. Для чего нужна эта идентификация? Например, для того, чтобы при реализации определенного события (click, mouseOver, mouseOut, ...)

Короче говоря, для того, чтобы изменить какие-то свойства элемента HTML-документа или применить соответствующие методы, надо иметь механизм, позволяющий идентифицировать необходимый элемент. Возможности модели DOM0 беднее, но начнем с них. Разумеется, средства идентификации DOM0 распространяются и на модель DOM2, имеющую дополнительные возможности.

Идентификация элементов документа в модели DOM0

Ссылка на текущий элемент

Во всех моделях документа при вызове обработчика для текущего элемента используется ключевое слово   this. Посмотрите пример:

Код Элемент HTML-документа
<span onMouseOver="this.style.color='red'"
      onMouseOut="this.style.color='blue'"
      onClick="this.style.color='springgreen'">
  тест
</span>
тест

 

Ссылки на объекты модели DOM0, вложенные в объект document

Все эти объекты представляют собой массивы: массив гиперссылок links[], массив изображений images[], массив форм forms[]  и т.д.  Индексация массивов начинается с 0, поэтому, например, к i-му изображению документа можно обратиться images[i-1]. Очевидно, что такая возможность актуальна лишь в случаях, когда нам имеет смысл перебрать все элементы данной группы. Например, перебрать все элементы формы с целью выяснить, какие из них являются checkbox-ами и включны ли они.

Ссылки на имя (name) HTML-элемента

Лишь несколько HTML-элементов согласно спецификации имеют атрибут name. Это изображения (img) , а также формы и их элементы. К этим элементам можно обращаться, используя значение атрибута name, причем по крайней мере в двух вариантах. Ниже приведен пример обращения к изображению. Пусть изображение в HTML описано так:

<img src="view.jpg" name="pict_view">

Тогда в сценарии JavaScript это изображение идентифицируется как

document.images['pict_view']

или

document.images.pict_view

Первый вариант явно что-то напоминает тем, кому знакомо понятие ассоциативного массива. И правильно: все объекты JavaScript по сути являются ассоциативными массивами, ключи которых совпадают с именами свойств. Это и объясняет возможность применения двух вариантов, приведенных выше.

Идентификация элементов документа в модели DOM2

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

Идентификация по ID

Если у HTML-элемента указан атрибут id,  то к нему можно обращаться, используя значение этого атрибута. При этом применяется метод getElementById().  Обратите внимание на то, что это - метод объекта document. Ниже приведен пример.

Код Элементы HTML-документа
<span onClick="document.getElementById('test').style.color='red'">
  click me!</span>

<br>

<span id="test">тест</span>
click me!
тест

Обращение ко всем элементам указанного типа

Метод getElementsByTagName() объекта document возвращает массив элементов с указанным именем тега. Например, getElementsByTagName('h2') возвратит массив всех заголовков 2-го уровня.



vvz.nw.ru  > JavaScript