Работа с атрибутами элементов в 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, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: