Работа с атрибутами элементов в 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 существует!" не будет, потому что такого атрибута у элемента нет.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, покупка SSL сертификатов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: