Работа с атрибутами элементов в JavaScript

В JavaScript существует набор методов для изменения, создания, удаления и проверки существования атрибутов HTML тегов.

Рассмотрим четыре метода:

getAttribute('X') - возвращает значение атрибута с названием 'X'
setAttribute('X', 'Y') - устанавливает значение атрибута с названием 'X' в значение 'Y'
removeAttribute('X') - удаляет атрибут 'X'
hasAttribute('X') - проверяет наличие атрибута 'X'

Попробуем придумать примеры со всеми методами по порядку. Получим значение атрибута "mouse" (мы сами придумали название атрибута) через getAttribute:

<div onclick="MyFunc(this);" mouse="Мыши любят сыр!">Кликни на меня!</div>
<script>
   function MyFunc(a){
      alert(a.getAttribute('mouse'));
   }
</script>

Если загрузить страницу браузера с таким примером и кликнуть на "Кликни на меня!", то появится всплывающее окно:

В примере использован атрибут, название которого придумано самостоятельно. Но для таких случаев лучше создавать атрибуты с префиксом data-. К примеру, data-mouse.

Используем остальные методы. Попробуем установить значение атрибута "mouse" в "Сыр!" с помощью setAttribute. Для этого напишем следующий код:

<div onclick="MyFunc(this);" mouse="Мыши любят сыр!">Кликни на меня!</div>
<script>
   function MyFunc(a){
      a.setAttribute('mouse', 'Сыр!');
      alert(a.getAttribute('mouse'));
   }
</script>

В этом примере мы сначала установили значение атрибута "mouse" в "Сыр!", а затем прочитали его. В итоге получилось всплывающее окно с текстом "Сыр!":

Немного модифицируем предыдущий пример, чтобы продемонстрировать работу removeAttribute на удалении атрибута "mouse".

<div onclick="MyFunc(this);" mouse="Мыши любят сыр!">Кликни на меня!</div>
<script>
   function MyFunc(a){
      a.removeAttribute('mouse');
      alert(a.getAttribute('mouse'));
   }
</script>

Очевидно, что если атрибут будет удалён, то функция getAttribute не сможет ничего вернуть (точнее вернёт отсутствие значение - "null"):

Осталось продемонстрировать последний метод hasAttribute, который служит для проверки существования атрибута. Этот метод возвращает логические "true" ("правда") или "false" ("ложь"). Составим пример, который будет наглядно показывать разницу

<div onclick="MyFunc(this);" mouse="Мышь">Кликни на меня!</div>
<script>
   function MyFunc(a){
      if(a.hasAttribute('cat')){
         alert('Атрибут "cat" существует!');
      }
      if(a.hasAttribute('mouse')){
         alert('Атрибут "mouse" существует!');
      }
   }
</script>

При выполнении такого кода мы увидим всплывающее окно с текстом "Атрибут mouse существует!":

Но всплывающего окна с текстом "Атрибут cat существует!" не будет, потому что такого атрибута у элемента нет.