Обращаемся к тегу по id в javascript
Как "обратиться к тегу по id". Рассмотрим несколько вариантов обращения к тегу по его "id"(селектору идентификатора). С живыми примерами.
Обращаемся к тегу по его "id".
- Как обратиться к тегу по его id напрямую.
- Как обратиться к тегу по id( querySelector ).
- Как обратиться к тегу по id( getElementById ).
- Как обратиться к тегу по id при нажатии на него.
Как обратиться к тегу по его id напрямую.
Что означает "напрямую"? - Это означает, что для селектора "id" возможно обращение к тегу без использования дополнительным методов!
Обращаемся к тегу по его id напрямую:
Для того, чтобы обратиться к тегу напрямую... вам понадобится:
Используем div.
Внутри тега прописываем id:
+ Произвольный текст, чтобы мы могли увидеть куда нажимать!
<div id="id_example">Нажми на меня и обратись к тегу напрямую!</div>
В теге script прописываем значение "id"(id_example), далее один из способов onclick + function внутри фигурных скобок alert и текст:
<script>
id_example.onclick = function()
{
alert("ты нажал на меня и обратился к тегу напрямую!")
};
</script>
Соберем весь код обращения к тегу по его id напрямую:
Html:
<div id="id_example">Нажми на меня и обратись к тегу напрямую!</div>
javascript
<script>
id_example.onclick = function()
{
alert("ты нажал на меня и обратился к тегу напрямую!")
};
</script>
Пример обращения к тегу по его "id" без использования методов:
После того как вы собрали весь код, то его можно поместить прямо здесь ти попробовать нажать по строке идущей ниже:
Как обратиться к тегу по idquerySelector.
Для того, чтобы обратиться к тегу по его id используя querySelector вам понадобится:
Снова нам понадобится какой то элемент и он опять будет div, но изменим id(id_example_2), внутри нам нужен текст...
<div id="id_example_2">Нажми на меня и обратись к тегу используя querySelector</div>
Скрипт и используемый код практически одинаковый, но с некоторыми изменениями и с использованием querySelector
<script>
document.querySelector("#id_example_2").onclick = function()
{
alert("ты нажал на меня и обратился к тегу используя querySelector!")
};
</script>
Соберем весь код:
Код обращения к тегу по его id используя querySelector:
Html:
<div id="id_example_2">Нажми на меня и обратись к тегу используя querySelector</div>
javascript:
<script>
document.querySelector("#id_example_2").onclick = function()
{
alert("ты нажал на меня и обратился к тегу используя querySelector!")
};
</script>
Пример обращения к тегу по его "id"querySelector:
Помещаем код приведенный выше прямо здесь:
Как обратиться к тегу по idgetElementById.
Для того, чтобы обратиться к тегу по его id используя getElementById вам понадобится:
Опять нам понадобится какой то элемент и он опять будет div, но изменим id ещё раз на "id_example_3" , внутри нам нужен текст...
<div id="id_example_3">Нажми на меня и обратись к тегу используя getElementById</div>
Скрипт и используемый код практически одинаковый, но с некоторыми изменениями и с использованием getElementById:
<script>
document.getElementById("id_example_3").onclick = function()
{
alert("ты нажал на меня и обратился к тегу используя getElementById!")
};
</script>
Соберем весь код:
Код обращения к тегу по его id используя getElementById:
Html:
<div id="id_example_3">Нажми на меня и обратись к тегу используя getElementById</div>
javascript:
<script>
document.getElementById("id_example_3").onclick = function()
{
alert("ты нажал на меня и обратился к тегу используя getElementById!")
};
</script>
Пример обращения к тегу по его "id"getElementById:
Помещаем код приведенный выше прямо здесь:
Как обратиться к тегу по id при нажатии на него.
И последний вариант : "обратиться к тегу по id при нажатии на него."... (здесь, id, конечно нет, но способ интересный во всех смыслах) как мне кажется и пояснения ни к чему...
<div onclick='alert("ты нажал на меня в теге!");'>Нажми на меня и обратись к тегу в самом теге</div>
Пример: обратиться к тегу по id при нажатии на него.
