jQuery: как получить имя тега выбранного HTML-элемента

Быстрый ответ

Чтобы получить имя тега любого выбранного элемента с помощью jQuery, используйте следующий код:

var tag = $('selector').prop('tagName');

Примите к сведению, что имя тега в переменной tag будет представлено в верхнем регистре, например, 'DIV' или 'SPAN'. В $('selector') вставьте селектор вашего конкретного элемента.

Чтобы получить имя тега в нижнем регистре, используйте такую форму записи:

var tag = $('selector').prop('tagName').toLowerCase();

Так вы обеспечите единообразие стиля наименования в различных проектах.

Определение имена тега в старых версиях jQuery

В старых версиях jQuery (ниже 1.6), где не поддерживается метод .prop(), имеет смысл применить .attr("tagName") или обратиться прямо к свойству nodeName DOM:

var oldTagName = $('selector').attr('tagName') || $('selector')[0].nodeName;

Также прямой доступ к DOM возможен и без использования .prop() jQuery:

var directDOMTagName = $('selector')[0].tagName;

Такой подход дает возможность работать напрямую с встроенной моделью объектов документа (DOM).

Создание вспомогательных функций в jQuery

Если вам часто приходится определять имена тегов, вполне продуктивным шагом будет создание личных утилит в jQuery для экономии времени:

// Важно знать своё название!".
jQuery.fn.tagName = function() {
    return this.prop('tagName');
};

// Используйте свою утилиту для получения имени тега.
var tag = $('#element').tagName();

Чтобы получить имя тега в нижнем регистре, предпримите следующие действия:

// Имена тегов тоже могут быть не формальными.
jQuery.fn.tagNameLowerCase = function() {
    return this.prop('tagName').toLowerCase();
};

var tag = $('#element').tagNameLowerCase();

Визуализация

Представьте каждый HTML-элемент как индивидуальную сущность, со своей специфической ролью:

Персонаж: $('#element') 🎯

Задав вопрос "Что за роль ты играешь?" ($(element).prop('tagName')) вы сможете получить ответ:

Ответ Персонажа:
- Для `<a>`:     "Я проводник 🚪 (направляю пользователей на другие страницы)."
- Для `<div>`:    "Я контейнер 📦 (храню в себе контент)."
- Для `<input>`: "Я участник ✍️ (прием пользовательского ввода)."

Вот так наш детектив (🕵️‍♀️) устанавливает связь между ролью персонажа и именем его тега.

Различные способы определения имен тегов

Получение имени тега в реальном времени

Можно определить имя тега элемента прямо в процессе выполнения обработчика событий:

$('selector').on('click', function() {
    var clickTagName = $(this).prop('tagName').toLowerCase();
    console.log('Вы щёлкнули элемент с тегом:', clickTagName);
    // В консоли вы увидите: "Вы щёлкнули элемент с тегом: ссылка" – информационный бюллетень от "папарацци"
});

Подробнее об этом расскажет наш спикер на видео

Использование имен тегов для логических проверок

Применяя имена тегов, можно построить условные выражения:

var tagName = $('selector').prop('tagName');
if (tagName === 'INPUT') {
    console.log('Это поле ввода.'); // "Скажите ваши пароли!" – взбудоражило поле ввода
} else if (tagName === 'DIV') {
    console.log('Это блок.');
}

С помощью .toLowerCase() будет удобно сравнивать имена тегов без учета регистра и упростить обработку строк:

if (tagName.toLowerCase() === 'input') {
    // Модернизация интерфейса пользовательских полей ввода
}

Использование специальных селекторов для проверки тегов

Когда работаете с конкретным селектором, функция .is() поможет подтвердить соответствие:

if ($('selector').is('input')) {
    // Тонкая настройка пользовательского опыта именно для полей ввода
}

Ловушки и способы их обхода

Ловушка: Различие в регистрах при отображении имен тегов

Применение .toLowerCase(), позволит уклониться от проблем, связанных с различием регистров, обеспечив по сути нормализацию данных.

Ловушка: Несогласованность между .attr() и .prop()

В версиях jQuery 1.6 и выше рекомендуется использовать .prop() вместо .attr(), так как это более эффективный и точный метод определения имен тегов.

Ловушка: Сложности восприятия тегов в пользовательских XML пространствах имен

При работе с XML или SVG будьте аккуратны: учитывайте особенности именных пространств и выбирайте методы, соответствующие этим стандартам, чтобы корректно определить имена тегов.

Полезные материалы

1. .prop() | Документация API jQuery — официальная документация jQuery по методу .prop().
2. javascript – Различия между .tagName и .nodeName – Stack Overflow — обсуждение на форуме StackOverflow, где разъясняется разница между .tagName и .nodeName.
3. Свойство Element: tagName – Веб API | MDN — подробное описание свойства tagName на портале документации MDN.
4. .is() | Документация API jQuery — пошаговое руководство по методу .is() в рамках jQuery.
5. Селектор элемента | Документация API jQuery — развернутое руководство по использованию селекторов элементов в jQuery для идентификации имен тегов.