Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

Как обратиться к id javascript

Поддержи проект!!! smile

Обратиться к id - сколько возможных способов существует обращения к id элемента. Рассмотрим максимальное количество таких способов с примерами!
На сайте сделал отдельная страница по возможностям обращения к ID

Подробно об обращении к id.

  1. Способ №1 обращения к id.
  2. Обращение к id пример 2.
  3. Обращение к id с помощью функции.
  4. Обращение к id с помощью функции №2.
  1. Способ №1 обращения к id.

    Скучно будет рассказывать без живого примера! Поэтому, обратимся к тегу и получим живой результат! Для этого нам понадобится:

    Кнопка button, по которой будем нажимать...

    Нам нужен id, к которому будем обращаться. И у него должно быть о какое-то значение "example_id".

    Класс и текст - не имеет значение... соберем кнопку:

    <button id="example_id" class="width_96_2x2 margin_20_0">Обратись к тегу</button>

    Далее нам потребуется script, где пропишем простую команду... с использованием "onclick" и выведем сообщение "alert" + "console"

    <script>example_id.onclick = function(){ alert(example_id); console.log(example_id);}</script>

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

    Html:

    <button id="example_id" class="width_96_2x2 margin_20_0">Обратись к тегу</button>

    javascript

    <script>

    example_id.onclick = function()

    {

    alert(example_id);

    console.log(example_id);

    }

    </script>

    Что дальше!? Теперь нажмите по кнопке с надписью "Обратись к id"..

    ...и вы получите два результата:

    Во всплывающем окне(alert) вы получите объект.

    Способ  №1 обращения к id.

    А в консоли получите тот самый объект, к которому принадлежит наш ид(id) - вот... собственно вы обратились к id элемента... - это конечно не совсем корректно звучит, но по смыслу похоже...

    Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!Способ  №1 обращения к id.

    Теперь, когда вы получили объект по его id? то вы сомжете получить любую часть вашего элемента.

  2. Обращение к id пример 2.

    Естественно, что "обращение к id" - происходит не просто так, а с целью! wall

    Поэтому продолжим, обращаться к id и рассмотрим немного другой способ и получим что-то из полученного объекта...

    Пример обращения к id.

    Язык javascript - очень гибкий, поэтому с полученным объектом можно как вам вздумается...

    Не буду каждую строчку описывать, лишь скажу. что теперь onclick поместим во вторую кнопку.

    А с помощью innerHTML получим содержание id(выделено красным).

    <blackblock id="example_id_2">сюда передадим</blackblock>

    <button onclick="my_click();" class="width_96_2x2 margin_20_0" id="example_id_22">Обратись к id второй раз</button>

    <script>

    function my_click()

    {

    example_id_2.innerHTML = example_id_22.innerHTML;//из первой кнопки в другой элемент

    }

    </script>

    Попробуйте нажать кнопку и посмотрите, что будет...

    сюда передадим

  3. Обращение к id с помощью функции.

    Для обращения к id существует специальная функция GetElementById...

    Что сделаем!?

    Возьмем код из первого пункта и заменим "example_id" на "document.getElementById("example_id_3")" ...

    Честно сказать, не знаю, чем результат из первого пункта, будет отличаться от этого варианта обращения к id.

    <button id="example_id_3" class="width_96_2x2 margin_20_0">Обратись к id 3</button>

    <script>

    document.getElementById("example_id_3").onclick = function()

    {

    alert(document.getElementById("example_id_3"));

    console.log(document.getElementById("example_id_3"));

    }

    </script>

    Результат обращения к id:

    Бонус :

    Ну да... еще один способ, ну, так себе, ничего интересного, но давайте теперь используем, обращение к id, чтобы получить очередную часть объекта...

    Будем получать, что выделено красным..

    <blackblock id="example_id_4">сюда передадим</blackblock>

    <button onclick="my_click_2();" class="width_96_2x2 margin_20_0">Обратись к id второй раз</button>

    <script>

    function my_click_2()

    {

    document.getElementById("example_id_4").innerHTML = document.getElementById("example_id_4").tagName ;

    }

    </script>

    Пример обращения к id:

    Попробуйте нажать кнопку и посмотрите, что будет...

    сюда передадим

  4. Обращение к id с помощью функции №2.

    Функция querySelector отличается тем от GetElementById, что в скобках нужно указывать решетку "#"

    Здесь вообще, совсем скучно... возьмем предыдущий скрипт обращения в id и одну функцию заменим на другую... и про "#" не забываем....

    <button id="example_id_5" class="width_96_2x2 margin_20_0">Обратись к id 5</button>

    <script>document.querySelector("#example_id_5").onclick = function()

    {

    alert(document.querySelector("#example_id_5"));

    console.log(document.querySelector("#example_id_5"));}

    </script>

    Результат обращения к id:

    Теперь можно подытожить, что эти варианты, ничем друг от друга не отличаются(но это не точноwall)....

    alert(example_id);

    alert(document.getElementById("example_id"));

    alert(document.querySelector("#example_id"));

    Бонус:

    Бонус намного интереснее... теперь получим опять, что-то новое!

    <blackblock id="example_id_6">сюда передадим</blackblock>

    <button id="example_id_7" class="width_96_2x2 margin_20_0">Обратись к id третий раз</button>

    <script>

    example_id_7.onclick = function()

    {

    example_id_6.innerHTML = example_id_7.className;

    }

    </script>

    Результат обращения к id:

    сюда передадим


Последняя дата редактирования : 27.03.2021 20:24
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
как обращаться к id как обратиться к id в javascript

Счетчик в график :

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
08/04/2021 07:12
Сам афигеваю!
подробнее.
stream :
07/04/2021 05:56
Неплохо)
подробнее.
Марат :
24/03/2021 11:01
Да что вы!? За что обижаться то?Вы тот редкий человек, который смог написать! Вы молодец!Человек, же который не…
подробнее.
Виталий :
24/03/2021 06:05
Не стоит обижаться, люди могут не понимать что ошибка не критична. Может быть до конца не изучали…
подробнее.
Марат :
23/03/2021 02:09
Спасибо, за сообщение! В архив попал вариант, который был на тестировании и там остались некоторые…
подробнее.