Определение типа элемента (div, ul, blockquote) в jQuery

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

Если перед вами стоит задача быстро определить, что данный элемент является <div>, обратите внимание на свойство element.tagName, которое всегда возвращается в верхнем регистре.

if (element.tagName === 'DIV') {
  // Отлично! Это именно div-блок.
}

Углубляемся в нюансы проверки элементов

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

Производим проверку на уровне прототипа при помощи instanceof

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

if (element instanceof HTMLDivElement) {
  // Это точно div-блок.
}

Данный способ позволяет учесть конкретный тип элемента, делегируя выявление более сложных различий механизмам JavaScript.

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

Используем возможности современного JavaScript

Для всесторонней проверки типа элемента, способной учесть селекторы разной степени сложности, можно воспользоваться методом Element.matches():

if (element.matches('div')) {
  // Действительно, это div-блок.
}

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

Комбинированная проверка: div, ul или blockquote?

Если перед вами встаёт задача идентифицировать сразу несколько типов элементов, вы можете применить следующую стратегию:

if (/DIV|UL|BLOCKQUOTE/.test(element.tagName)) {
  alert(`Вот и ${element.tagName.toLowerCase()}!`);
}

Такой подход сразу отсеивает несколько вариантов, демонстрируя эффективность данного метода.

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

Для более наглядного представления процесса поиска div используем аналогию с разными типами домов:

🏠 = <div>
🏡 = <span>
🏢 = <p>
🏬 = <section>

Обнаружение div можно сравнить с поиском дома 🏠 среди других:

if(element.tagName === 'DIV') {
  // Вот он, наш 🏠. Это именно div!
}

Полагаясь на tagName, мы выявляем искомый div, как ищем дом среди других зданий.

Выход из-под покрова jQuery: отдаем предпочтение нативным DOM-методам

Тенденция использования чистого JavaScript вместо jQuery продолжает набирать обороты. Изучим, какие нативные варианты нам предлагаются:

Применение DOM-запросов

Вместо $ из jQuery мы можем активно использовать нативные DOM-методы, как document.querySelector() и document.querySelectorAll():

const isDiv = document.querySelector(element).tagName === 'DIV';

Ориентир на понятность и эффективность написания кода

Мы можем без проблем обойтись без избытка jQuery, сделав упор на ясность и производительность нативного DOM:

if (element.matches('div.someClass')) {
  // Вот он, div с конкретным классом!
}

Ситуации, в которых tagName недостаточно эффективен

Несмотря на надёжность tagName, случаются ситуации, когда его возможности недостаточны:

Взаимодействие с SVG и пользовательскими элементами

В таких ситуациях кроме tagName можно попробовать использовать instanceof или nodeName.

Специфика взаимодействия с прототипами, наследованием и не стандартными элементами!

Тэги с необычным именем обрабатываются как HTMLUnknownElement. Понимание наследования в DOM в таких случаях становится крайне важным.

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

1. Тег элемента: свойство tagName — Web API на MDN — подробное описание свойства .tagName для проверки элементов.
2. Освоение нативного взаимодействия с DOM в чистом JavaScript — познакомимся с манипулирующими методами DOM без использования jQuery.
3. Свойства узлов: type, tag и content на javascript.info — все о разнообразных свойствах DOM-узлов и именах тегов.
4. Element matches / matchesSelector на сайте davidwalsh.name — интерактивный обзор использования метода element.matches.
5. HTML-стандарт на html.spec.whatwg.org — подробное описание спецификации элемента <div> в HTML.
6. .is() в API jQuery — описание метода .is() jQuery для уточнения типа элемента.