Получение данных из атрибута js примеры

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

Как получить данные из атрибута, как обратиться к атрибуту элемента, все способы получения данных из атрибутов! Пример, примеры получить данные атрибутов js. И когда мы говорим о получении атрибута - мы все-таки говорим о значении атрибута!

Все способы получения данных из атрибута

1. Как получают данные из атрибута!? -> теория
2. Как получить данные class атрибута -> через id
3. Как получить данные data атрибута -> через class
4. Как получить данные id атрибута -> через тег
5. Как получить данные placeholder атрибута -> через name
6. Как получить данные атрибута -> value
7. Как получить данные атрибута -> jquery
8. Вывод : как получить любое значение любого атрибута!?
9. Скачать можно здесь

Как получают данные из атрибута!? -> теория

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

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

Что мы будем делать!? Невозможно объять необъятное! Поэтому... мы на каждый вариант обращения к атрибуту будем применять новый метод обращения к тегу, но и будем менять еще и атрибут! Чтобы не было скучно!

+ Сделаем это живым способом... с кнопкой, т.е. при нажатии мы будем получать какие-то данные из атрибутов тега!

Это не похоже на теорию - это скорее аннотация... к теме...

Как получить данные class атрибута -> через id

Предположим, что у нас есть в нашем подопытном теге id(вообще это очень удобный селектор, потому, что обратиться к тегу с id феноменально просто!) атрибут align со значением center и наш блок будет иметь такую конструкцию:

<div align="center" id="id_1">Здесь текст с атрибутом, из котрого и будем получать значение!</div>

Чтобы оживить процесс получения данных из атрибута в js... добавим кнопку и простой скриптик... который и получит данные из атрибута

<button id="button_id">получить значение атрибута</button>

<script>

button_id .onclick = function(){

alert(id_1.align);

};

</script>

Нажми, чтобы получить значение из атрибута ! Если требуется получить значение атрибута в переменную, то заменяем alert на переменную!

Здесь текст с атрибутом, из котрого и будем получать значение!
получить значение атрибута

Как получить данные атрибута data через class

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

Создадим новый блок с нашим атрибутом data
<div data-user="Вася Пупкин" class="class_1">здесь.... текст...</div>

Не будем подробно останавливаться на скриптах, вот тут мы много про onclick написали и про то как обратиться к тегу

далее опять кнопка... + скрипт -> единственное, что здесь надо уточнить, что мы используем метод dataset к обращение к атрибуту data-user(первая часть атрибута(data-) и тире отбрасывается, поэтому dataset.user, а не dataset.data-user )


<button id="button_id_2">нажми</button>

<script>

button_id_2.onclick = function(){

alert(document.getElementsByClassName("class_1")[0].dataset.user);

};

</script>

Чтобы получить данные в атрибуте data - нажми на кнопку...

здесь.... текст...
нажми

Как получить данные id атрибута -> через тег

Теперь... предположим, что у нас есть атрибут id и его значение нам нужно получить, и теперь мы сделаем уникальный тег newBlock
<newBlock id="example">здесь.... текст...в новом теге newBlock </newBlock >
Опять кнопка и скрипт. Теперь обратимся к тегу через querySelector и в конце прибавляем атрибут из которого хотим получить данные это: id


<button id="button_id_3">нажми</button>

<script>

button_id_3 .onclick = function(){

alert(document.querySelector("newBlock").id);

};

</script>

Для того, чтобы получить данные из атрибута id - нажими на кнопку...
здесь.... текст...в новом теге newBlock нажми

Как получить данные placeholder атрибута -> через name

Следующим примером рассмотрим тег textarea и у него есть атрибут name, к которому обратиться с помощью getElementsByName и у нас есть какое-то значение в атрибуте placeholder - это значение данного атрибута будем получать!

<textarea name="textarea_name" placeholder="Здесь тег textarea с атрибутом placeholder который равен дофига текста"></textarea>

Пример:

Код:

<textarea name="textarea_name" placeholder="Здесь тег textarea с атрибутом placeholder который равен дофига текста" class="width_100pro"></textarea>

<button id="button_id_4">нажми</button>

<script>

button_id_4.onclick = function(){

alert(document.getElementsByName("textarea_name")[0]. placeholder);

};

</script>

Чтобы получить значение из атрибута placeholder, нажми на кнопку:

нажми

Как получить данные атрибута -> value

Является ли атрибутом тега value - конечно! Как получить данные из атрибута тега мы очень подробно рассказывали -> здесь


Как получить данные атрибута jquery

Естественно, что первым шагом для получения атрибута в jquery надо подключить подключить jquery

Какой атрибут еще остался не окученный!? . В этот раз получим данные атрибута с помощью jquery.

Кнопку вообще не будем делать! click повесим прямо на фото!

Что за главный атрибут у фото!? Правильно - src, данные из атрибута src и получим с помощью jquery, в отличии от javascript
для jquery требуется указать метод attr


Прямо в alert поместим наше обращение к атрибуту src:

alert( $("#img").attr("src") );

Соберем весь код вместе...

<img src="https://dwweb.ru/__img/About_me/about_me.jpg" id="img">

<script>

$( "#img" ).click(function() {

alert( $("#img").attr("src") );

});

</script>

Чтобы увидеть в действии получение данный из атрибута javascript jquery - нажмите по фото, которой идет ниже...



Вывод : как получить любое значение любого атрибута!?

Если для вас кажется, что обратиться к тегу и получить значение атрибута - это сложная вещь, то уверяю вас! Что это вовсе не так! Вам просто нужно планомерно изучать javascript ...