Как определить, является ли объект JavaScript DOM объектом?

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

Для проверки принадлежности объекта к DOM-объектам, воспользуйтесь оператором instanceof:

const isDOM = obj => obj instanceof Node;

// Пример использования
console.log(isDOM(document.getElementById('myElement'))); // вернёт true, если 'myElement' — DOM-элемент, иначе false.

Мы опираемся на интерфейс Node, обеспечивающий надёжность проверки принадлежности объекта к DOM.

Не только DOM: Узлы и Элементы

Применение instanceof Node отлично подходит для общего случая, но иногда может потребоваться уточнить тип узла DOM. Чтобы определить, является ли объект элементом:

const isElement = obj => obj instanceof HTMLElement;

// Пример использования
console.log(isElement(document.createElement('div'))); // true для элемента 'div'.

Подготовка к особым случаям: Совместимость и Редкие Ситуации

В небраузерных окружениях и при работе с нестандартными элементами, например, с SVG, рекомендуется использовать Element:

const isDOMElement = obj => obj instanceof Element;

// Пример использования
console.log(isDOMElement(document.createElementNS('http://www.w3.org/2000/svg', 'svg'))); // вернёт true для SVG-элементов.

Этот способ охватывает HTML и SVG элементы и подходит даже для Internet Explorer 8.

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

Определяем, принадлежит ли наш объект к DOM:

Сообщество Объектов  | Королевство DOM
-----------------| --------------
📦 Обычный Объект| 🌟 DOM Объект
-----------------| 🌌 Принадлежность к DOM?

Проверяем наследственность объекта в мире прототипов DOM:

'HTMLElement' in window && obj instanceof HTMLElement;

Это помогает отличать обычные JavaScript-объекты от DOM-элементов.

🏞 Земли Объектов  | 🏰 Замок DOM
------------------| ----------------
📦 = Простой объект 😑 | 🌟 = Подлинный DOM-элемент! ⚔️

Улучшение качества ваших проверок и преодоление браузерных препятствий

Утиная типизация: Хитрый метод DOM

Пользуйтесь принципом утиной типизации – проверьте наличие существенных свойств DOM-объекта:

const isDOMDuckType = obj => obj && typeof obj === 'object' && 'nodeType' in obj && obj.nodeType === Node.ELEMENT_NODE;

// Пример использования
console.log(isDOMDuckType(document.getElementById('myElement'))); // соответствует ли объект DOM-элементу.

Такой подход помогает надёжно идентифицировать DOM-объекты.

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

Быть или не быть (DOM)

Одного-двух свойств недостаточно для определения DOM-объекта. Проверьте исполнение какого-либо роли DOM:

const isTrulyDOM = obj => obj && typeof obj === 'object' && 'tagName' in obj && typeof obj.appendChild === 'function';

// Пример использования
console.log(isTrulyDOM(document.getElementById('myElement'))); // является ли это подлинным DOM-объектом.

Гиперссылка Internet Explorer

Будьте особенно внимательны с Internet Explorer, где ActiveX-объекты могут маскироваться под DOM-элементы:

const isDOMIE = obj => obj && obj.tagName && !(obj.propertyIsEnumerable('tagName'));

// Пример использования
console.log(isDOMIE(document.getElementById('example'))); // поведение в браузере может различаться.

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

1. Узел – Веб API | MDN — подробности о узлах в DOM.
2. Как проверить, является ли объект JavaScript объектом DOM? – Stack Overflow — ответы и примеры от сообщества.
3. instanceof – JavaScript | MDN — описание оператора instanceof в контексте прототипов.
4. Элемент – Веб API | MDN — описание интерфейса Element в DOM.
5. DOM Стандарт — информация о стандартах и интерфейсах DOM.
6. GitHub – camsong/You-Dont-Need-jQuery — истории разработчиков, предпочитающих чистый JavaScript вместо jQuery.