СКРИПТЫ
ТЕГИ:
php (282)
js (144)
html (132)
css (99)
html tags (58)
jquery (39)
edit text (37)
php array (30)
form html (29)
fonts (22)
foto (21)
ruweb.net (19)
atom (19)
forum (19)
html book (17)
board (17)
Показать еще :
php file (16)
svg (16)
js method (16)
hosting (16)
link (15)
htaccess (13)
color (13)
osclass (13)
path (12)
table (12)
js delete (11)
icon (11)
php date (11)
jsphp (11)
notepad (11)
input (11)
online (11)
php img (10)
yandex (10)
url (10)
form (10)
mouse (9)
info (9)
comment (7)
img (7)
cookie (7)
task (7)
ftp (7)
php url (7)
dosite (6)
click (6)
hover (6)
js url (6)
reg.ru (5)
chart (5)
php get (5)
adminka (5)
value (5)
mb (5)
js id (4)
bbcode (4)
submit (4)
js form (4)
browser (4)
select (4)
search (4)
js copy (4)
iframe (4)
symbols (4)
captcha (3)
https (3)
js post (3)
vk (3)
scandir (3)
js time (3)
ssl (3)
vs code (3)
height (2)
details (2)
youtube (2)
tag hr (2)
sitemap (2)
title (2)
ukoz (2)
cursor (2)
console (2)
seo (2)
js vars (2)
video (2)
smile (1)
windows (1)
numbers (1)
archive (1)
header (1)
books (1)
domen (1)
padding (1)

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

Как обратиться к тегу 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_2pro 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_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 тег

Пользуйтесь на здоровье! Не забудьте сказать спасибо
Теги :
Как обратиться к тегу
как обратиться к тегу через javascript

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

01.09.2021

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

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

Построение гравиков
Основа для графика : счетчик посещаемости.
Последние комментарии :
Марат :
17.10.2021 39:28
Давно не делал и страницу и видео в один день... чет, как-то выжитый как…
подробнее.
Марат :
10.10.2021 17:20
Добавлен новый смайл
подробнее.
Марат :
05.10.2021 26:37
Страница sitemap.html восстановлена. Но будут вводиться только страницы…
подробнее.
Марат :
04.10.2021 38:22
Добавил несколько вариантов поставить смайл на страницу своего сайта! 3 варианта! Кроме варианта скачать…
подробнее.
Марат :
17.09.2021 28:02
Установка Яндекс поиск на сайт! Контент обновлен на 100%. Такое ощущение, что старый текст не я…
подробнее.
Марат :
07.09.2021 23:21
Частенько приходится исправлять ошибки и вот...как-то я обратил внимание на надпись: "нажми ctrl enter" на сайте и…
подробнее.
ruweb