Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ 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 |
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
Как обратиться к тегу

Последние комментарии :
Марат :
02/09/2020 03:25
Рад, что помог! Приходите еще!
подробнее.
Алексей :
02/09/2020 01:16
Спасибо Кое-что пригодилось!
подробнее.
Павел :
26/08/2020 05:57
textarea В таблице, а таблица в родительском div, а этот див является частью аккордеона, сам textarea без displey: none, но…
подробнее.
Марат :
26/08/2020 04:22
Столько написали и ничего не понятно!У вас есть textarea со свойством "display: none;" - непонятно... зачем textarea скрытый и…
подробнее.
Павел :
26/08/2020 08:02
Здравствуйте. Пишу плагин для таблицы, в таблице много textarea, плагин и таблица расположены в скрытой вкладке…
подробнее.