Yutex - Платный хостинг PHP.
Advego.ru - система покупки и продажи контента для сайтов, форумов и блогов

Технические фишки инфобизнеса 2014

Статьи для сайтов!!!
getElementsByTagName - Отбор по тегу getElementById - Выбор по id childNodes - Массив дочерних элементов

Метод getElementById - Выбор элемента по id идентификатору

JavaScript - Практическое применение

Урок №4 getElementById - Выбор по id

Количество просмотров: 560

В прошлом уроке был рассмотрен метод getElementsByTagName, который возвращает массив (группу) элементов страницы по имени тега.

Здесь продолжается практическая работа с javascript и будет рассмотрен метод getElementById, который возвращает ссылку на элемент, ориентируясь на его уникальный идентификатор id.

Метод getElementById - Выбор элемента по идентификатору id

Метод getElementById - Выбор элемента по идентификатору id

Метод getElementById, как и getElementsByTagName является методом объекта document.

Название метода переводится буквально: получить элемент по id.

Любому элементу (тегу) веб-документа может быть назначен свой id-идентификатор, благодаря которому элемент становиться уникальным и к нему можно получить доступ для работы именно с ним.

Обратите внимание: в имени метода в конце слова Element нет буквы s (в отличие от метода getElementsByTagName). Это сделано для удобства и говорит о том, что метод служит для выбора элемента.

<img src="img/peng_128.gif" id = "penguin">


<script src="js/myscripts.js" type="text/javascript">

var unique = document.getElementById('penguin'); /* Заносим в переменную unique ссылку на тег img по id-идентификатору penguin */

</script>

Немного пояснений для фрагмента кода выше...

  • тег img (изображение) имеет id-идентификатор penguin;
  • при помощи метода getElementById по идентификатору penguin выбирается именно этот тег img;
  • в переменную unique заносится ссылка на выбранный тег;
  • далее можно работать с тегом, как с объектом через переменную unique, подобно тому, как проводилась работа с объектом Date через произвольную переменную.

Метод getElementById - Доступ к элементу как к Объекту

Метод getElementById - Доступ к элементу как к Объекту

После получения доступа к элементу (тегу) веб-страницы по id-идентификатору при помощи метода getElementById, мы уже работаем с ним, как с Объектом, а значит, получаем доступ к атрибутам тега, как к свойствам Объекта.

Следовательно, значения атрибутов являются уже значениями свойств.

Продолжим работать с предыдущим примером...

<img src="img/peng_128.gif" id = "penguin" width="128" height="128" alt="Задумчивый пингвин">


<script src="js/myscripts.js" type="text/javascript">

var unique = document.getElementById('penguin');

alert(unique.alt); /* Выводим на экран значение свойства alt объекта unique (значение атрибута alt тега img) */

</script>

Пояснения для примера кода...

  • тег img (изображение) имеет определенные атрибуты: src - адрес файла, width и height - ширина и высота картинки, alt - альтернативный текст;
  • получив доступ к тегу при помощи метода getElementById, как к объекту, мы получаем доступ к атрибутам тега, как к свойствам объекта;
  • А значения атрибутов теперь уже являются значениями свойств;
  • в javascript доступ к свойствам объекта осуществляется через точку. Далее выводим alt - альтернативный текст тега img при помощи метода alert на экран.

Надеюсь, что Вы не запутались во всем этом. Нужно понимать одновременно, что происходит на программном уровне javascript и на уровне разметки документа.

- тег img - это Объект unique;

- атрибуты тега width и alt - это свойства Объекта;

- значения атрибутов "128" и "Задумчивый пингвин" - это значения свойств;

// Вот, как это выглядит с позиции javascript:

var unique = {

width: "128",

alt: "Задумчивый пингвин"

}

Вот так работает метод getElementById, возвращающий ссылку на любой элемент (тег) веб-стрницы, если тот имеет уникальный идентификатор id. Далее проводится работа с этим элементом на уровне javascript уже как с объектом...

Следует учесть что: как и в предыдущем уроке, здесь - при работе с методом getElementById строку вызова скрипта следует размещать в конце html-документа

В jQuery есть и другие возможности выбора элементов веб-документа.

Главная Изучаем JavaScript getElementById - Выбор по id childNodes - Массив дочерних элементов

Ваши комментарии к уроку:

Комментариев нет...

Добавить комментарий:

Ваше Имя:*
Комментарий:*
Ответьте на вопрос: *
Сколько дней в Високосном году?
* - поля обязательные для заполнения.
JavaScript
Частота просмотра уроков
Дизайн сайтов
ПОИСК ПО САЙТУ:

Моё имя Антон. Связаться со мною Вы можете по e-mail: averagev@mail.ru