Обращаемся к тегу в javascript
Подробно об обращении к тегу js.
Если перечисленного не хватит смотри ещёКак обратиться к тегу!?
Что, вообще,означает обратиться к тегу!? Сколько способов существует обращения к тегу!?
Чтобы не рассказывать в самом начале скучную теорию! Давайте приведу самый простой и эффективный способ обратиться к тегу - для некоторых способов сделаем отдельные страницы.
Код не буду приводить, можете его посмотреть по ссылкеЧто мы получили в данном примере обращения к тегу!?
Мы получили объект(object HTML).
И знаете, что есть ещё и второе, если вы не поленились почитать по ссылке, там мы этот объект отправили в console вы тоже может его(объект посмотреть там)
Кто заметил нестыковку - давай зачетку!
, то вот вам скрин:
Если мы получили объект тега, то далее мы можем манипулировать с ним. как нам захочется и в следующих пунктах, мы разберем это очень подробно.
Перечисли все способы обратиться к тегу.
Из выше приведенного примера с использованием селектора идентификатора(id) смогли описать 4 способа.
Следующий вариант - если тег является уникальным. Например :
Кстати... удивительно, ни одной страницы(на момент обновления 28.03.2021) не написано о "Element.getElementsByTagName()" - с ним тоже можно обратиться к тегам.
Если у тега есть селектор класс-а.
Если у тега есть атрибут name.
Если у тега есть атрибут data.
Как-то я уже убежал, но вспомнил.... в выше перечисленных способах есть разделение на;
Получение объекта .
И получение "HTMLCollection"
Разница между ними, что первый - это скорее строка, а второй это массив. И соответственно, если у вас функция возвращает "HTMLCollection", то обращаться к тегу, чуть сложнее...
Атрибут class - функция, которая работает с классом - вернет массив. Потому, что класс - не является уникальным атрибутом.
А вот, все атрибуты, которые должны быть уникальными, то с ними очень легко обращаться к тегу! Например, уже скзано было селектор идентификатора(id)
Обратиться к тегу по его названию!?
Сверху, я уже привел пример придуманного тега! Его и будем использовать!
В чем его замечательность для нас - что он уникальный, поэтому обратиться к нему будет очень просто!
Теперь разберем все по пунктам в подробностях!
Погнали!
Нам потребуется... :
Тег сверху мы уже написали.
Нам нужна функция, которая сможет обратиться к тегу(сейчас мы рассматриваем чистый javascript) - это функция querySelector.
Получим объект в переменную javascript
Теперь нам нужно, что-то вытянуть из тега, что есть у него!? Это название тега и текст. Ну, что ж, думаю для этого примера возьмем название тега -поскольку он уникальный! Его получим с помощью tagName и выведем с помощью alert
И чтобы весь процесс обращения к тегу и получения каких-то данных был вживую... нам понадобится кнопка 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" - возвращает название тега в верхнем регистре!
Как обратиться к тегу по его классу
Чуть менее подробно, второй пример, обращения к тегу!
Создаем первый div - он будет создавать массовку... 
К данному тегу будем обращаться :
Опять кнопка:
Далее javascript, который обратится ко второму тегу по счету(отчет начинается с 0) по атрибуту и передаст туда новый текст.
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>
Результат обращения к тегу по его классу:
Как обратиться к тегу как обратиться к тегу через javascript
