Працюючи з HTML-елементами, я часто стикаюся з необхідністю коректної перевірки наявності у них тих чи інших атрибутів. Для зручності я використовую бібліотеку jQuery, але тут немає чогось на кшталт hasAttr (). Та як же перевірити чи є атрибут у елемента? Ось про це ми і поговоримо в даній статті.
А почну я з того, що нам тут потрібно чітко розділити атрибути і властивості HTML-елементів. Для роботи з атрибутами в jQuery використовується метод attr (). а для властивостей елемента - метод prop (). Метод attr () повертає строкове значення атрибута, в той час як prop () інтерпретує його в потрібному типовому вигляді. Наприклад: $ (elem) .attr ( "checked") - може повернути стічне значення checked. в той час як: $ (elem) .prop ( "checked") - поверне TRUE. Для вирішення поставленого перед нами завдання краще використовувати метод attr (). наприклад:
if ($ ( "em"). attr ( "alt")) console.log ( "ok");
Найчастіше цього буде достатньо, тому що в разі помилки: $ ( "em"). attr ( "alt") - поверне значення undefined (з англ. не визначене) або FALSE. в залежності від використовуваного браузера.
Якщо ж Ви хочете бути впевненим, що все буде працювати саме так як Вам потрібно, можна використовувати наступну конструкцію:
var attr = $ ( "em"). attr ( "alt");
if (attr! == undefined attr! == false) console.log ( "ok");
Звертаю вашу увагу на те, що тут використовується оператор строгої нерівності (! ==). тобто з урахуванням типу значення. Звичайно, при бажанні, ви можете використовувати і оператор typeof. наприклад:
var attr = $ ( "em"). attr ( "alt");
if (typeof attr! == 'undefined' attr! == false) alert ( "ok");
У такому випадку потрібно буде порівнювати зі строковим значенням типу даних. Втім, мене трохи бентежить таке ускладнення конструкції.
Є і ще один, більш простий, але, з моєї точки зору, і більш ресурсномісткий варіант. Хоча, проблем у мене з ним поки не виникало. Заснований він на використанні методу is (). який вміє працювати з селекторами і повертати конкретне логічне значення TRUE або FALSE. Таким чином, перевірка наявності атрибута у елемента може мати вигляд:
if ($ ( "em"). is ( "[alt]")) console.log ( "ok");
На цьому у мене все. Дякуємо за увагу. Успіхів!