Как зарабатывать больше и получать удовольствие от работы?
Вебинар

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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

JS
Скопировать код
if (element.tagName === 'DIV') {
  // Отлично! Это именно div-блок.
}
Кинга Идем в IT: пошаговый план для смены профессии

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

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

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

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

JS
Скопировать код
if (element instanceof HTMLDivElement) {
  // Это точно div-блок.
}

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

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

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

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

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

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

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

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

JS
Скопировать код
if (/DIV|UL|BLOCKQUOTE/.test(element.tagName)) {
  alert(`Вот и ${element.tagName.toLowerCase()}!`);
}

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

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

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

Markdown
Скопировать код
🏠 = <div>
🏡 = <span>
🏢 = <p>
🏬 = <section>

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

JS
Скопировать код
if(element.tagName === 'DIV') {
  // Вот он, наш 🏠. Это именно div!
}

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

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

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

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

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

JS
Скопировать код
const isDiv = document.querySelector(element).tagName === 'DIV';

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

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

JS
Скопировать код
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 для уточнения типа элемента.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Какое свойство позволяет определить тип элемента в jQuery?
1 / 5