Как определить, является ли объект 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'))); // поведение в браузере может различаться.
Полезные материалы
- Узел – Веб API | MDN — подробности о узлах в DOM.
- Как проверить, является ли объект JavaScript объектом DOM? – Stack Overflow — ответы и примеры от сообщества.
- instanceof – JavaScript | MDN — описание оператора instanceof в контексте прототипов.
- Элемент – Веб API | MDN — описание интерфейса Element в DOM.
- DOM Стандарт — информация о стандартах и интерфейсах DOM.
- GitHub – camsong/You-Dont-Need-jQuery — истории разработчиков, предпочитающих чистый JavaScript вместо jQuery.