Крестик‑тест: div ли элемент?

В веб‑разработке часто возникает задача быстро определить, является ли
какой‑то элемент <div>. Обычные способы (просмотр кода,
использование консоли) подходят, но иногда нужен более «интерактивный» метод,
который можно встроить в пользовательский интерфейс. В этой статье мы
расскажем, как создать простой «крестик» (кнопку с символом ✖) и
использовать его для проверки, является ли выбранный элемент div.
Все примеры написаны на чистом JavaScript и полностью совместимы с современными
браузерами.

Содержание

1. Зачем нужен крестик‑тест?
2. Логика проверки: JavaScript‑код
3. Полный рабочий пример
4. Полезные советы и типичные ошибки

Зачем нужен крестик‑тест?

Крестик‑тест удобен в следующих сценариях:

• Обучающие интерактивные уроки. Ученики могут кликнуть по любому
  элементу страницы, а крестик сразу покажет, является ли он div.
• Отладка в продакшн‑окружении. Иногда нет доступа к DevTools, но
  есть возможность добавить небольшую кнопку‑крестик, которая будет
  выполнять проверку «на лету».
• Геймификация UI. В некоторых проектах (например, квест‑игры) требуется
  «проверить» объект, и крестик служит визуальным индикатором.

Самый простой способ – создать <div>‑кнопку с символом
крестика. Ниже пример разметки:

<!-- Кнопка‑крестик, которую пользователь нажимает для проверки -->
<div id="crossCheck" class="cross-btn">✖</div>

<!-- Элемент, который будем проверять (может быть любой) -->
<div id="targetElement" class="some-class">Я могу быть div</div>

С помощью CSS задаём визуальный стиль: красный контур, центрированный
символ ✖ и курсор pointer, чтобы пользователь понял,
что элемент кликабельный.

Логика проверки: JavaScript‑код

Ниже пошаговое объяснение того, как реализовать проверку:

1. Получаем ссылку на элемент‑крестик. При клике будем запускать функцию.
2. Определяем «целевой» элемент. В примере он имеет id targetElement,
   но в реальном проекте можно брать элемент, над которым находится курсор,
   или выбранный пользователем через document.querySelector.
3. Проверяем тип тега. Свойство nodeName (или tagName)
   возвращает название тега в верхнем регистре. Сравниваем его с "DIV".

Код функции выглядит так:

document.addEventListener('DOMContentLoaded', function  {
 const crossBtn = document.getElementById('crossCheck');
 const resultBox = document.createElement('div');
 resultBox.className = 'result';
 crossBtn.parentNode.insertBefore(resultBox, crossBtn.nextSibling);

 crossBtn.addEventListener('click', function  {
 // 1. Выбираем элемент, который нужно проверить.
 // В примере – фиксированный id, но можно заменить на любой селектор.
 const target = document.getElementById('targetElement');

 // 2. Защита от ситуации, когда элемент не найден.
 if (!target) {
 resultBox.textContent = 'Элемент не найден!';
 resultBox.style.color = 'red';
 return;
 }

 // 3. Проверяем, является ли элемент DIV.
 const isDiv = target.nodeName === 'DIV'; // или target.tagName

 if (isDiv) {
 resultBox.textContent = '✅ Это DIV!';
 resultBox.style.color = 'green';
 } else {
 resultBox.textContent = '❌ Это НЕ DIV.';
 resultBox.style.color = 'orange';
 }
 });
});

Полный рабочий пример

крестик – появится сообщение, указывающее, является ли элемент
#targetElement div.

<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Крестик‑тест: div ли элемент?</title>
<style>
.cross-btn {
width: 40px; height: 40px;
line-height: 40px;
text-align: center;
border: 2px solid #c00;
color: #c00;
font-size: 24px;
font-weight: bold;
cursor: pointer;
user-select: none;
margin-bottom: 10px;
}
;result {font-size: 1.2em; margin-top: 5px;}
</style>
</head>
<body>

<h2>Пример проверки с помощью крестика</h2>

<!— Кнопка‑крестик —>
<div id=»crossCheck» class=»cross-btn»>✖</div>

<!— Элемент, который будем проверять. Попробуйте изменить тег на <section> или <span> —>
<div id=»targetElement» class=»some-class»>Это потенциальный DIV</div>

<script>
document.addEventListener(‘DOMContentLoaded’, function {
const crossBtn = document.getElementById(‘crossCheck’);
const resultBox = document.createElement(‘div’);
resultBox.className = ‘result’;
crossBtn.parentNode.insertBefore(resultBox, crossBtn.nextSibling);

crossBtn.addEventListener(‘click’, function {
const target = document.getElementById(‘targetElement’);
if (!target) {
resultBox;textContent = ‘Элемент не найден!’;
resultBox.style.color = ‘red’;
return;
}
const isDiv = target.nodeName === ‘DIV’;
resultBox.textContent = isDiv ? ‘✅ Это DIV!’ : ‘❌ Это НЕ DIV.’;
resultBox.style.color = isDiv ? ‘green’ : ‘orange’;
});});
</script>

</body>

Полезные советы и типичные ошибки

• Регистрозависимость. Свойство nodeName всегда возвращает
  название тега в верхнем регистре. Сравнивайте с "DIV", а не
  с "div".
• Проверка нескольких элементов. Если нужно проверять не один, а
  несколько элементов, используйте document.querySelectorAll
  и проходите по NodeList в цикле.
• Отладка в консоли. Для быстрой проверки можно выполнить:
  document.querySelector('#targetElement').tagName – он тоже
  вернёт "DIV".
• Кросс‑браузерность. Свойства nodeName и tagName
  поддерживаются во всех современных браузерах, включая мобильные.
• Стилизация крестика. Если хотите, чтобы крестик выглядел как
  «кнопка закрытия», добавьте border-radius: 4px; и
  плавный переход transition: background 0.2s;.
• Альтернативные способы проверки. Можно использовать

  const isDiv = target instanceof HTMLDivElement;

  Это более «объектно‑ориентированный» подход, но работает только в
  браузерах, поддерживающих соответствующие конструкторы.

Крестик‑тест – это простой, но эффективный способ интерактивно проверить,
является ли выбранный элемент div. Он не требует
установки сторонних библиотек, легко встраивается в любой проект и
может стать частью обучающих материалов, отладочных панелей или
геймифицированных интерфейсов.

Помните о следующих ключевых моментах:

1. Сделайте кнопку‑крестик заметной и понятной пользователю.
2. Обрабатывайте случаи, когда целевой элемент отсутствует – это избавит от
   непонятных ошибок в продакшене.

Надеемся, что статья помогла вам понять, как реализовать такой проверочный
механизм и адаптировать его под свои задачи.