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

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

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

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

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



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

Как развеять туман у вас в голове по поводу "обращения к тегу в javascript ".


Существует несколько типов атрибутов.

Эти типы атрибутов ведут себя немного по разному. Убедитесь, что вы правильно понимаете слово атрибут.


Тип атрибута - уникальный, например id. Это самый удобный атрибут для обращения к тегу подробнее

Тип атрибута - не уникальный, например class - это уже не совсем удобно, если совсем грубо, то class можно сравнить с массивом. Это уже не совсем так просто, как в первом пункте.

Не самостоятельные атрибуты(моё название) - например value в js, к нему нельзя обратиться напрямую. Только через самостоятельные атрибуты, в двух первых пунктах были примеры.

Обращение к атрибуту тега на javascript

С чем можно сравнить из жизни - "обращение к тегу в javascript" - это, как будто у вас есть лассо, а любой атрибут - это как короткая ветка на бревне, которое плывет по реке, на ветку можно набросить лассо и уже тогда вы сможете вытащить бревно на берег и сделать с ним всё, что захотите.

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



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

Тема id в js - теперь выделена в отдельную тему.
Предположим, что у нас есть в нашем подопытном теге 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 на переменную!

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



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

Теперь... предположим, что:

У нас есть атрибут id и его значение мы не знаем, и нам нужно получить его.

Но зато, у нас есть уникальный тег newBlock

Html:
<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 - конечно! Как получить данные из атрибута тега мы очень подробно рассказывали -> здесь

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



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

Предположим, что нам требуется узнать значение атрибута src, нам потребуется:


Адрес картинки : https://dwweb.ru/__img/php/img_php/morning.png.

Тег img.

Добавим в него id со значением "example_src".

Далее нм нужна кнопка button, чтобы в живую получить из атрибута значение.

На нее повесим onclick.

Внутрь onclick поместим alert

И собственно получим из атрибута значение src :

example_src.src

Соберем все вместе:

Html:

<img id="example_src" src="https://dwweb.ru/__img/php/img_php/morning.png">

<button onclick="alert(example_src.src)">Получи значение атрибута src</button>

Результат:



Получи значение атрибута src
Скопировать ссылку



Как получить данные атрибута 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 ...

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

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