«Единственный способ творить великие дела – это любить то, что ты делаешь»
JavaScript

Игра на «Морской Бой» на JavaScript: Простая Игра и Игра для Двоих


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

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



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

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

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

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

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

<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 - Доступ к элементу как к Объекту

После получения доступа к элементу (тегу) веб-страницы по 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 в javascript, возвращающий ссылку на любой элемент (тег) веб-стрницы, если тот имеет уникальный идентификатор id. Далее проводится работа с этим элементом на уровне javascript уже как с объектом.

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

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

Отзывы и комментарии:

Добавил(а): Ден
Дата: 2019-11-10

круто

Оставить отзыв:

Ваше Имя:

Текст комментария:

Ответьте на вопрос:

Сколько дней в Високосном году?


JavaScript и Web
Последние заметки
Популярные заметки