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

Как обратиться к тегу js ?

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

Как обратиться к тегу js? Все способы обращения к тегу в javascript , как можно получить данные тега! Давно надо было сделать такую страницу. чтобы рассмотреть все возможные способы обратиться к тегу!

В первом пункте я объясню, как обратиться к тегу, по его каким-то свойствам, очень подробно! Так, чтобы можно было иметь представление, о самом процессе обращения к тегу, а все остальные пункты будут аналогичные, лишь будет меняться элемент обращения!

Навигация по странице :
  1. Как обратиться к тегу по его названию!? -> querySelector
  2. Как обратиться к тегу по его id!? -> getelementbyid
  3. Как обратиться к тегу по его id без функции!?
  4. Как обратиться к тегу по его классу !? -> getElementsByClassName
  5. Как обратиться к тегу по его атрибуту Name!? -> getElementsByName

    Как обратиться к тегу по его названию!?(querySelector)

  1. Чтобы обратиться к тегу по его названию, нужен тег, который будет уникальным на странице!

    Придумайте любой, какой-то только сможете:

    <rezult1>Тег rezult1 </rezult1>

    Теперь мы к нашему тегу обратимся с помощью querySelector
    Если мы таким образом передадим в переменную querySelector, тега rezult1, то в переменной окажется object HTML
    var perem_1 = document.querySelector("rezult1");
    Теперь мы уже можем делать с нашим объектом, все, что захотим... давайте на этот тег повесим onclick и выведем что находится в переменной через alert и console

    perem_1 .onclick = function (){

    console.log(perem_1);

    alert(perem_1);

    }

    Зачем мы это сделали!? Чтобы видеть процесс вживую! Теперь выведем наш тег rezult1, открываем консоль... и вам остается нажать по этому тегу(текст Тег rezult1)!
    Тег rezult1
    После того, как вы нажали по нашему тегу, то должны были увидеть два действия... в alert у нас объект, в console наш тег, по которому нажали!
    Что дальше!?

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

    Чтобы не смешивать все в одно, напишем новый тег и новую функцию и заново обратимся уже к новому тегу... можно заменить текст в теге...

    <rezult2>Тег rezult2</rezult2>

    var perem_2 = document.querySelector("rezult2");

    perem_2 .onclick = function (){

    perem_2.innertHTML = "новый текст";

    }

    Нажмите по тексту и вы увидите результат обращения к данному тегу!

    Тег rezult2

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

  2. Если у тега есть id - уникальный идентификатор , то мы можем обратиться к данному тегу через его id используя функцию getElementById

    Создаем тег, любой тег с id :

    <div id="rezult3">ЗДЕСЬ ОБРАЩАЕМСЯ К ТЕГУ ПО ID</div>

    Пишем функцию, которая теперь обратиться к данному тегу по его id:

    var perem_3 = document.getElementById("rezult3");

    perem_3 .onclick = function (){

    perem_3 .innerHTML = "как обратиться к тегу по id с помощью getElementById";

    }

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

    ЗДЕСЬ ОБРАЩАЕМСЯ К ТЕГУ ПО ID


    Как обратиться к тегу по его id без функции!?

  3. Если у вас есть id, то можно не использовать никакие функции... достаточно написать такую конструкцию:

    <div id="rezult_4 ">ЗДЕСЬ ОБРАЩАЕМСЯ К ТЕГУ ПО ID БЕЗ ФУНКЦИИ</div>

    <script>

    rezult_4 .onclick = function (){

    rezult_4 .innerHTML = "ОБРАЩЕНИЕ К ТЕГУ БЕЗ ФУНКЦИИ";

    }

    </script>

    Нажмите ниже по тексту - вы увидите результат обращения к тегу без функции!

    ЗДЕСЬ ОБРАЩАЕМСЯ К ТЕГУ ПО ID БЕЗ ФУНКЦИИ

    Функции onclick применяется здесь для иллюстрации живого примера обращения к тегу!

    Еще пример обращения к тегу, с добавление цвета текста:

    <div id="rezult_5">ЕЩЕ ПРИМЕР ОБРАЩЕНИЯ К ТЕГУ БЕЗ ФУНКЦИИ</div>

    <script>

    rezult_5.onclick = function (){

    rezult_5.style = "color:red;";

    }

    </script>

    ЕЩЕ ПРИМЕР ОБРАЩЕНИЯ К ТЕГУ БЕЗ ФУНКЦИИ

    Как обратиться к тегу по его классу с помощью getElementsByClassName

  4. Абсолютно такая же история и для функции getElementsByClassName, с единственной разницей, что мы получаем массивоподобный объект поэтому нам потребуется ячейка [0]

    <div class="rezult_6">обращаемся к тегу по его классу 1</div>

    rezult_6 = document.getElementsByClassName("rezult_6")[0];

    rezult_6.onclick = function (){

    rezult_6.innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО КЛАССУ getElementsByClassName";

    }

    </script>

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

    обращаемся к тегу по его классу 1
    Вопрос на засыпку...

    Как обратиться к этому же классу с абсолютно одинаковым тегом и классом...!?

    <div class="rezult_6">обращаемся к тегу по его классу 2 тег</div>
    Если вы не разобрались, то для того, чтобы обратиться ко второму тегу по счету сверху страницы с таким же классом, нам нужно заменить 0 в
    getElementsByClassName("rezult_6")[0] на 1

    rezult_7 = document.getElementsByClassName("rezult_6")[1];

    rezult_7 . onclick = function (){

    rezult_7 . innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО КЛАССУ ВТОРОЙ ПО СЧЕТУ ТЕГ";

    }

    Результат:

    обращаемся к тегу по его классу 2 тег


    Как обратиться к тегу по его атрибуту Name getElementsByName

  5. Как обратиться к тегу по его атрибуту Name, если вы не в курсе, то атрибут name используется в тегах input и textarea
    Для того, чтобы обратиться к тегу по его name нам потребуется тег, который имеет этот атрибут:
    <textarea name="textarea_primer">Здесь тег textarea с name = textarea_primer</textarea>

    И втрое, что нам потребуется - это опять какое-то действие, давайте повесим действие на кнопку...

    <button onclick="alert(document.getElementsByName('textarea_primer')[0].innerHTML)">Обращаемся к тегу по его атрибуту name !?</button>

    Результат:

    Для того, чтобы проверить результат обращения к тегу по Name - нажмите кнопку!


    А почему бы не нажать по самой форме!?

    Nne мне подумалось, а почему бы не нажать по самой форме и обратиться к этому тегу и изменить что-то в нем!

    ЛЕГКО!

    rezult_8 = document.getElementsByName("textarea_primer")[1];

    rezult_8 .onclick = function (){

    rezult_8 .innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО АТРИБУТУ NAME ВТОРОЙ ПО СЧЕТУ ТЕГ";

    }

    Результат:



Вас может еще заинтересовать список тем : #JS | #QUERYSELECTOR | Теги:
Как обратиться к тегу

Последние комментарии :
admin :
21/05/2020 05:03
Я Вас помню! Вы частенько оставляли сообщения на сайте!Все никак не мог спросить!? У Вас есть сайт -> зачем это…
подробнее.
Паула :
21/05/2020 04:48
Вообще мне очень нравится, что вы делаете! И ваш подход! И ваш стиль!И не обращайте внимание на всяких…
подробнее.
admin :
20/05/2020 10:36
Как бы смешно это не звучало! Но! Запускается новая система комментирования COMMENTS+ 1.5. в тестовом режиме!От…
подробнее.

НАШИ ПРОЕКТЫ : Проекты находятся в разной степени готовности (просто их столько, что времени не хватает…) Все статьи авторские, при копироавании активная ссылка обязательна DwWeb.ru! © 2015 - 2020 Мы на лучшем хостинге -> ruweb