phpjshtmlcssblog

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

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

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

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

Если перечисленного не хватит смотри ещё

Скопировать ссылку



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

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

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

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

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

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

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

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

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

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



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

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

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

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

<result>Тег result</result>

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

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

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

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

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

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

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

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

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

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

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

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

Скопировать ссылку



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

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

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

<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_2pro margin_10_0">Обратитесь к тегу</button>

<script>

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

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

</script>

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

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

текст внутри тега result
Обратитесь к тегу
Скопировать ссылку



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

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

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

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

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

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

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

<button onclick="foo_class();" class="width_96_2pro 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_2pro margin_10_0">Обратитесь к тегу</button>

<script>

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

function foo_class(){

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

}

</script>

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

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

Сообщение системы комментирования :

01.09.2021

Форма пока доступна только админу... скоро все заработает...надеюсь...