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

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

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

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

Подробно об обращении к тегу js.

  1. Как обратиться к тегу!?
  2. Обратиться к тегу по его названию!?
  3. Как обратиться к тегу по его классу!?
Если перечисленного не хватит смотри ещё

  1. Как обратиться к тегу!?

    Что, вообще,означает обратиться к тегу!? Сколько способов существует обращения к тегу!?

    Чтобы не рассказывать в самом начале скучную теорию! Давайте приведу самый простой и эффективный способ обратиться к тегу - для некоторых способов сделаем отдельные страницы.

    Код не буду приводить, можете его посмотреть по ссылке

    Что мы получили в данном примере обращения к тегу!?

    Мы получили объект(object HTML).

    И знаете, что есть ещё и второе, если вы не поленились почитать по ссылке, там мы этот объект отправили в console вы тоже может его(объект посмотреть там)

    Кто заметил нестыковку - давай зачетку!

    Если не нашли или поленились

    , то вот вам скрин:

    Что мы получили в данном примере обращения к тегу!?

    Если мы получили объект тега, то далее мы можем манипулировать с ним. как нам захочется и в следующих пунктах, мы разберем это очень подробно.

    Перечисли все способы обратиться к тегу.

    Из выше приведенного примера с использованием селектора идентификатора(id) смогли описать 4 способа.

    Следующий вариант - если тег является уникальным. Например :

    <result>Тег result</result>

    Кстати... удивительно, ни одной страницы(на момент обновления 28.03.2021) не написано о "Element.getElementsByTagName()" - с ним тоже можно обратиться к тегам.

    Если у тега есть селектор класс-а.

    Если у тега есть атрибут name.

    Если у тега есть атрибут data.

    Внимание! Уточнение!

    Как-то я уже убежал, но вспомнил.... в выше перечисленных способах есть разделение на;

    Получение объекта .

    И получение "HTMLCollection"

    Разница между ними, что первый - это скорее строка, а второй это массив. И соответственно, если у вас функция возвращает "HTMLCollection", то обращаться к тегу, чуть сложнее...

    Как узнать, что возращает функция!?
    Это зависит от атрибута....
    Например:

    Атрибут class - функция, которая работает с классом - вернет массив. Потому, что класс - не является уникальным атрибутом.

    А вот, все атрибуты, которые должны быть уникальными, то с ними очень легко обращаться к тегу! Например, уже скзано было селектор идентификатора(id)


  2. Обратиться к тегу по его названию!?

    Сверху, я уже привел пример придуманного тега! Его и будем использовать!

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

    <result>Тег result</result>

    Теперь разберем все по пунктам в подробностях!

    Погнали!

    Нам потребуется... :

    Тег сверху мы уже написали.

    Нам нужна функция, которая сможет обратиться к тегу(сейчас мы рассматриваем чистый javascript) - это функция querySelector.

    Получим объект в переменную javascript

    var the_oblect = document.querySelector("result");

    Теперь нам нужно, что-то вытянуть из тега, что есть у него!? Это название тега и текст. Ну, что ж, думаю для этого примера возьмем название тега -поскольку он уникальный! Его получим с помощью tagName и выведем с помощью alert

    alert(the_oblect.tagName);

    И чтобы весь процесс обращения к тегу и получения каких-то данных был вживую... нам понадобится кнопка button + onclick + foo внутри, соберем кнопку:

    Соберем весь код обращения к имени тега.

    Вроде бы совсем простая операция. а сколько действий пришлось проделать!

    <result>текст внутри тега result</result><br>

    <button onclick="foo();" class="width_96_2x2 margin_10_0">Обратитесь к тегу</button>

    <script>

    var the_oblect = document.querySelector("result");

    function foo(){alert(the_oblect.tagName);}

    </script>

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

    Напоминаю, что "tagName" - возвращает название тега в верхнем регистре!

    текст внутри тега result


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

    Чуть менее подробно, второй пример, обращения к тегу!

    Создаем первый div - он будет создавать массовку... wall

    <div class="rezult_6">Здесь будет первый div с классом</div>

    К данному тегу будем обращаться :

    <div class="rezult_6" style="color:red;">обращаемся к тегу по его классу 2 тег</div>

    Опять кнопка:

    <button onclick="foo_class();" class="width_96_2x2 margin_10_0">Обратитесь к тегу</button>

    Далее javascript, который обратится ко второму тегу по счету(отчет начинается с 0) по атрибуту и передаст туда новый текст.

    <script>
    the_objekt = document.getElementsByClassName("rezult_6")[1];
    function foo_class(){
    the_objekt . innerHTML = "ОБРАЩЕНИЕ К ТЕГУ ПО ЕГО КЛАССУ ВТОРОЙ ПО СЧЕТУ ТЕГ";
    }
    </script>

    Соберем весь код вместе обращения к тегу:

    <div class="rezult_6">Здесь будет первый div с классом</div>

    <div class="rezult_6" style="color:red;">обращаемся к тегу по его классу 2 тег</div>

    <button onclick="foo_class();" class="width_96_2x2 margin_10_0">Обратитесь к тегу</button>

    <script>

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

    function foo_class(){

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

    }

    </script>

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

    Здесь будет первый div с классом
    обращаемся к тегу по его классу 2 тег


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

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

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

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
12/06/2021 10:04
Рад, что понравилось!Приходите ещё!
подробнее.
Марат :
12/06/2021 10:03
Есть наглядное редактирование на самой странице - где есть? достаточно дописать в адресной строке что-то -…
подробнее.
Знаток :
11/06/2021 11:37
Есть наглядяное редактирование на самой странице (типа в реальном временем)- достаточно дописать в адресной…
подробнее.
Сергей :
09/06/2021 05:20
Спасибо за статью. Отличная работа!
подробнее.
Марат :
19/05/2021 12:38
Справа есть соц сети.... напишите личное сообщение...На главной(пункт №5) они также…
подробнее.