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 с нуля до гуру.
Курс предназначен для начинающих и тех, кто хочет повысить интерактивность и удобство своего сайта для посетителей. Изучив его, Вы сможете создавать более красивые и функциональные сайты. 104 видеоурока: от основ JavaScript до готовых решений на jQuery.
Запись опубликована в рубрике Уроки javascript и jQuery. Добавьте в закладки постоянную ссылку.

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

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