Обращаемся к тегу по id в javascript

Как "обратиться к тегу по id". Рассмотрим несколько вариантов обращения к тегу по его "id"(селектору идентификатора). С живыми примерами.

Обращаемся к тегу по его "id".

1. Как обратиться к тегу по его id напрямую.
2. Как обратиться к тегу по id( querySelector ).
3. Как обратиться к тегу по id( getElementById ).
4. Как обратиться к тегу по id при нажатии на него.

Как обратиться к тегу по его id напрямую.

Что означает "напрямую"? - Это означает, что для селектора "id" возможно обращение к тегу без использования дополнительным методов!

Обращаемся к тегу по его id напрямую:

Для того, чтобы обратиться к тегу напрямую... вам понадобится:

Html:

Используем div.

Внутри тега прописываем id:

+ Произвольный текст, чтобы мы могли увидеть куда нажимать!

<div id="id_example">Нажми на меня и обратись к тегу напрямую!</div>

Javascript:

В теге 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:

Помещаем код приведенный выше прямо здесь:

Нажми на меня и обратись к тегу используя querySelector

Как обратиться к тегу по idgetElementById.

Для того, чтобы обратиться к тегу по его id используя getElementById вам понадобится:

Опять нам понадобится какой то элемент и он опять будет div, но изменим id ещё раз на "id_example_3" , внутри нам нужен текст...

<div id="id_example_3">Нажми на меня и обратись к тегу используя getElementById</div>

Скрипт и используемый код практически одинаковый, но с некоторыми изменениями и с использованием getElementById:

Обращаю ваше внимание! если используется "getElementById", то решетку(#) перед "id" указывать не нужно - будет ошибка!

<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:

Помещаем код приведенный выше прямо здесь:

Нажми на меня и обратись к тегу используя getElementById

Как обратиться к тегу по id при нажатии на него.

И последний вариант : "обратиться к тегу по id при нажатии на него."... (здесь, id, конечно нет, но способ интересный во всех смыслах) как мне кажется и пояснения ни к чему...

<div onclick='alert("ты нажал на меня в теге!");'>Нажми на меня и обратись к тегу в самом теге</div>

Пример: обратиться к тегу по id при нажатии на него.

Нажми на меня и обратись к тегу в самом теге