Привіт початківці програмісти.
Припустимо у нас на сторінці є заголовок h2.
Завдання: засобами javascrip впливати на цей заголовок. Тобто поставити йому колір, змінити текст, змусити рухатися і т.д. і т.п.
Але для того щоб втілити ці наміри в життя, необхідно отримати доступ javascrip до цього елементу html.
Для отримання доступу є кілька способів. Розглянемо їх по порядку.
Доступ на ім'я тега
Створюється доступ за допомогою вже відомого нам об'єкта document з методом getElementsByTagName. де
get - отримати
Elements - елементи (множина тому, що за замовчуванням передбачається кілька тегів на сторінці. Нижче розберемо докладніше)
Ось було-б програмування російською, так?
Ну, як є так вже є, тому на латиниці прописуємо наступний скрипт в тег body під нашим заголовком. Чому саме в body, дізнаємося в подальшому, поки не так важливо.
З попередньої статті ви знаєте як звертатися до масиву.
У квадратних дужках треба вказати номер елемента в масиві.
Але і це ще не все. Крім імені тега треба вказати що це тег html. Для цього існує метод innerHTML
Ось тепер все. Доступ для роботи з заголовком отримано. Як це перевірити?
Спробувати вивести на екран. Якщо скрипт працює, то нижче основного заголовка повинен з'явиться текст заголовка взятий скриптом.
Я ще додав перенесення рядка, так як далі будуть ще підключення.
Загалом у мене працює
Доступ по id елемента
Для цього додамо на сторінку елемент і задамо йому id.
Використовуємо той же об'єкт document з іншим методом getElementById де
get - отримати
Element - елемент (вже в однині, так як id зазвичай буває унікальним)
Id - ідентифікатор
Додамо рядок в скрипт, відразу з виведенням на екран для перевірки.
Подивимося, що вийшло
Видно, що доступ до обох елементів html отримано.
Доступ на ім'я елемента
В html є кілька тегів у яких в специфікації передбачений атрибут name.
а) Доступ з тега.
Створимо форму з двома тегами input, значення з одного з них буде передаватися в інший по імені.
При кліці на кнопку, цифра з'явиться в поле.
Атрибути type = "text» і type = "button" в цьому прикладі вказують яку форму прийме елемент input.
Атрибут value - значення, визначає цифру яка буде в кнопці, і цифру яка виведеться в поле форми з ім'ям calc, в тезі з ім'ям input.
б) Доступ з функції. Створимо форму з трьома тегами input. Значення з першого поля, що перетворюється в кнопці, передається другому полю по імені.
Тут локальна змінна а отримує доступ з функції до тегу.
У ній вказується повний шлях до елементу. Спочатку метод document (html сторінка), потім forma (ім'я форми), потім t1 (ім'я тега, до якого здійснюється доступ) і value (значення, яке введено).
В змінної s задається дію, яке виконує зі змінною а.
Потім результат цієї дії (value = s) виводиться на екран у другому полі, до якого також є доступ на ім'я.
З функцією я трохи забігаю вперед, але нічого страшного, просто знайте що з функції можна отримати доступ до елементу html по імені.
А через пару уроків детально познайомимося з функціями.