Пыльца сосны Россия
Инструкция
Все нюансы сборки, переработки, заготовки и применения.
или
-- Купить пыльцу высшего качества --

Javascript доступ к элементам html

Здравствуйте начинающие программисты.

В этом уроке разберём, как средствами javascript воздействовать на элементы html.

Допустим у нас на странице имеется заголовок h2.

10

Это на экране

11

Задача: средствами javascrip воздействовать на этот заголовок. То есть задать ему цвет, изменить текст, заставить двигаться и т.д., и т.п.

Но для того чтобы воплотить эти намерения в жизнь, необходимо получить доступ javascrip к этому элементу html.

Для получения доступа есть несколько способов. Рассмотрим их по порядку.

Доступ по имени тега

Создаётся доступ с помощью уже известного нам объекта document с методом getElementsByTagName, где

get — получить

Elements — элементы (множественное число потому, что по умолчанию предполагается несколько тегов на странице. Ниже разберём подробнее)

By — по

Tag — тег

Name — имя

Вот было-бы программирование на русском, да?

Ну, как есть так уж есть, поэтому на латинице прописываем следующий скрипт в тег body под нашим заголовком. Почему именно в body, узнаем в дальнейшем, пока не так важно.


<script>
document.getElementsByTagName('h2');
</script>

Но это ещё не всё. Так как тегов на html странице обычно бывает много, то javascript воспринимает обращение к ним, как обращение к массиву.

Из предыдущей статьи вы знаете как обращаться к массиву.

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


<script>
document.getElementsByTagName('h2')[0];
</script>

Но и это ещё не всё. Помимо имени тега надо указать что это тег html. Для этого существует метод innerHTML


<script>
document.getElementsByTagName('h2')[0].innerHTML;
</script>

Вот теперь всё. Доступ для работы с заголовком получен. Как это проверить?

Попробовать вывести на экран. Если скрипт работает, то ниже основного заголовка должен появится текст заголовка взятый скриптом.


<script>
document.write(document.getElementsByTagName('h2')[0].innerHTML + '<br>');
</script>

Я ещё добавил перенос строки, так как дальше будут ещё подключения.

В общем у меня работает

12

Доступ по id элемента

Для этого добавим на страницу элемент и зададим ему id.

13

Используем тот же объект document с другим методом getElementById где

get — получить

Element — элемент (уже в единственном числе, так как id обычно бывает уникальным)

By — по

Id — идентификатор

Добавим строку в скрипт, сразу с выводом на экран для проверки.


<script>
document.write(document.getElementsByTagName('h2')[0].innerHTML + '
');
document.write(document.getElementById('nev').innerHTML);
</script>

Посмотрим, что получилось

14

Видно, что доступ к обеим элементам html получен.

Доступ по имени элемента

В html есть несколько тегов у которых в спецификации предусмотрен атрибут name.

Это теги формы form, input, select, textarea и тег ссылка a.

а) Доступ из тега.

Создадим форму с двумя тегами input, значение из одного из них будет передаваться в другой по имени.


<form name="calc">
<input type="text" name="input">
// Яваскрипт вводится прямо в тег
<input type="button" value="1" OnClick="calc.input.value = '1'">
</form>

При клике на кнопку, цифра появится в поле.


Атрибуты type=»text» и type=»button» в этом примере указывают какую форму примет элемент input.

Атрибут value — значение, определяет цифру которая будет в кнопке, и цифру которая выведется в поле формы с именем calc, в теге с именем input.

б) Доступ из функции. Создадим форму с тремя тегами input. Значение из первого поля, преобразуемое в кнопке, передаётся второму полю по имени.


<form name="forma">
Введите число: <input type="text" name="t1"><br><br>
<input type="button" value="Вычислить квадрат числа" onClick="esample();"><br><br>
<input type="text" name="res">
</form>
<script>
function example(){
var a=document.forma.t1.value;
var s=a*a;
document.forma.res.value=s;}
</script>

Здесь локальная переменная а получает доступ из функции к тегу.

В ней указывается полный путь к элементу. Сначала метод document (html страница), затем forma (имя формы), затем t1 (имя тега, к которому осуществляется доступ) и value (значение, которое введся).

В переменной s задаётся действие, выполняемое с переменной а.

Затем результат этого действия (value=s) выводится на экран во втором поле, к которому также имеется доступ по имени.

Введите число:


С функцией я немного забегаю вперёд, но ничего страшного, просто знайте что из функции можно получить доступ к элементу html по имени.

А через пару уроков подробно познакомимся с функциями.

Javascript основные элементы < < < В раздел > > > Javascript стили

Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.
А так же:

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *