Далее на странице...
В предыдущей заметке был рассмотрен метод 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
круто