Как обратиться к атрибуту элемента, все способы обращения к атрибутам! Пример/примеры обращения к атрибутам js.
Подробно об обращении к атрибутам в javascript
- Теория обращения к атрибутам.
- Обратимся к атрибуту через тег.
- Обратимся к атрибуту через тег №2.
- Обратимся к атрибуту через другой атрибут.
Теория обращения к атрибутам.
Существует огромное количество атрибутов в html и даже такие, которые я никогда не использовал(и даже не подозреваю о их существовании!).
В зависимости от типа атрибута - меняется способ обращения к нему!
Существует несколько типов атрибутов.
Эти типы атрибутов ведут себя немного по разному. Убедитесь, что вы правильно понимаете слово атрибут.
Тип атрибута - уникальный, например id. Это самый удобный атрибут для обращения к тегу подробнее
Тип атрибута - не уникальный, например class - class можно сравнить с массивом. Другими словами в зависимости от порядкового номера этого класса на странице. Вы можете обратиться к нему по этому номеру.
Не самостоятельные атрибуты(моё название) - например value в js, к нему нельзя обратиться напрямую. Только через самостоятельные атрибуты, первые два пункта.
Обратиться к атрибуту через тег.
Мы можем обратиться к любому атрибуту, если... например мы сможем обратиться к тегу напрямую.
Обращение к атрибуту тега на javascript
С чем можно сравнить из жизни - "обращение к тегу в javascript" - это, как будто у вас есть лассо, а любой атрибут - это как короткая ветка на бревне, которое плывет по реке, на ветку можно набросить лассо и уже тогда вы сможете вытащить бревно на берег и сделать с ним всё, что захотите.
Обратимся к атрибуту через тег.
Естественно, что для того, чтобы разобраться в "обращении к атрибуту" вам понадобится живой пример! На голой теории всегда - всё понять довольно сложно, поэтому вам понадобится:
Создадим отдельный нами придуманный тег "reds":
Добавим ему... ну... пусть это будет
Чтобы создать живой пример обращения к атрибуту используем:
Кнопку button.
Туда же добавляем id, чтобы обратиться к кнопке(обратиться к тегу)...
Тег script.
+ onclick
В функцию помещаем getelementsbytagname.
Поскольку наш тег в единственном числе, поэтому ячейку ставим 0:
И относительно данного атрибута вам понадобится className.
И чтобы увидеть ваше правильное обращение к атрибуту выведем через alert.
Соберем весь код:
Код как обратиться к атрибуту через тег.
Html:
<reds class="example">Обратимся через тег к атрибуту.</reds>
<button id="hey_tag">Обратись к атрибуту с помощью кнопки:</button>
Javascript:
<script>
idbutton2.onclick = function()
{
alert( document.getElementsByTagName( "reds" )[0].className);
}
</script>
Выполнение Кода обращения к атрибуту через тег.
Чтобы увидеть живой пример обращения к атрибуту - нажмите на кнопку "Обратись к атрибуту с помощью кнопки:". Если код написан правильно, то вы получите на экран - "example".
Обратимся к атрибуту через тег №2.
Для того, чтобы обратиться во втором примере к атрибуту вам понадобится:
Теория и код - абсолютно аналогичный предыдущему пункту!
Немного изменим.. что изменим:
Два элемента будут button.
<button id="value_heytag">Здесь атрибут к которому будем обращаться через тег №2.</button>
<button id="idbutton">Обратимся к атрибуту через тег №2.</button>
У каждого новый(уникальный) id и к нему же будем обращаться! Если код написан правльно, то вы получите - "value_heytag".
В нашем примере... наша кнопка "button" идет по счету сверху страницы под номером 2. Как вы знаете отчет идет с нуля... поэтому наша двойка это - [1](Как узнать сколько элементов на странице - нужно получить и вывести в консоль htmlcollection).
Соберем весь код:
Код как обратиться к атрибуту через тег.
Html:
<button id="value_heytag">Здесь атрибут к которому будем обращаться через тег №2.</button>
<button id="idbutton" class=width_100>Обратимся к атрибуту через тег №2.</button>
Javascript:
<script>
idbutton.onclick = function()
{
alert( document.getElementsByTagName( "button" )[1].id);
}
</script>
Выполнение Кода обращения к атрибуту через тег.
Чтобы увидеть живой пример обращения к атрибуту - нажмите на кнопку "Обратись к атрибуту с помощью кнопки:". Если код написан правильно, то вы получите на экран - "value_heytag".
Обратимся к атрибуту через другой атрибут.
Для того, чтобы обратиться к атрибуту с помощью другого атрибута :
Как вы знаете нужны самостоятельные атрибуты - их используем чтобы обратиться к тегу.
А уже потом обращаемся к вашему атрибуту...
Для примера обращения к атрибуту через другой атрибут вам понадобится:
Теория и код из выше приведенных примеров... с некоторыми изменениями:
Кнопка button(первым тегом) - больше не нужна - используем - span.
В него поместим атрибут, к которому будем обращаться - "
Опять в каждом теге изменим id
Соберем весь код:
Код как обратиться к атрибуту через атрибут.
Html:
<span id="id_e" title="атрибут через другой атрибут">Здесь текст.</span>
<button id="idbutton_3" class=width_100>Обратимся к атрибуту через другой атрибут</button>
Javascript:
<script>
idbutton.onclick = function()
{
alert( id_e.title );
}
</script>
Выполнение Кода обращения к атрибуту через атрибут.
Чтобы увидеть живой пример обращения к атрибуту - нажмите на кнопку "Обратись к атрибуту с помощью кнопки:". Если код написан правильно, то вы получите на экран - "атрибут через другой атрибут".
