How come the same object may return different instanceof in different browsers?

Question

I am using the AOS plugin and it passes an object on custom event. The object looks like this:

[object Object]: {detail: Object}

detail: Object
accessKey: ""
align: ""

attributes: Object
baseURI: "http://localhost:3000/docs/countup.html"
childElementCount: 0

childNodes: Object

children: Object

classList: Object
className: "aos-init aos-animate"
clientHeight: 0
clientLeft: 0
clientTop: 0
clientWidth: 788
contentEditable: "inherit"

dataset: Object
dir: ""
draggable: false
firstChild: null
firstElementChild: null
hidden: false
hideFocus: false
id: ""
innerHTML: ""
innerText: ""
isContentEditable: false
lang: ""
lastChild: null
lastElementChild: null
localName: "h1"
msContentZoomFactor: 1
msRegionOverflow: "undefined"
namespaceURI: "http://www.w3.org/1999/xhtml"

nextElementSibling: Object

nextSibling: Object
nodeName: "H1"
nodeType: 1
nodeValue: null
offsetHeight: 0
offsetLeft: 32

offsetParent: Object
offsetTop: 48
offsetWidth: 788
onabort: null
onactivate: null
onbeforeactivate: null
onbeforecopy: null
onbeforecut: null
onbeforedeactivate: null
onbeforepaste: null
onblur: null
oncanplay: null
oncanplaythrough: null
onchange: null
onclick: null
oncontextmenu: null
oncopy: null
oncuechange: null
oncut: null
ondblclick: null
ondeactivate: null
ondrag: null
ondragend: null
ondragenter: null
ondragleave: null
ondragover: null
ondragstart: null
ondrop: null
ondurationchange: null
onemptied: null
onended: null
onerror: null
onfocus: null
ongotpointercapture: null
oninput: null
oninvalid: null
onkeydown: null
onkeypress: null
onkeyup: null
onload: null
onloadeddata: null
onloadedmetadata: null
onloadstart: null
onlostpointercapture: null
onmousedown: null
onmouseenter: null
onmouseleave: null
onmousemove: null
onmouseout: null
onmouseover: null
onmouseup: null
onmousewheel: null
onmscontentzoom: null
onmsgesturechange: null
onmsgesturedoubletap: null
onmsgestureend: null
onmsgesturehold: null
onmsgesturestart: null
onmsgesturetap: null
onmsinertiastart: null
onmsmanipulationstatechanged: null
onpaste: null
onpause: null
onplay: null
onplaying: null
onpointercancel: null
onpointerdown: null
onpointerenter: null
onpointerleave: null
onpointermove: null
onpointerout: null
onpointerover: null
onpointerup: null
onprogress: null
onratechange: null
onreset: null
onscroll: null
onseeked: null
onseeking: null
onselect: null
onselectstart: null
onstalled: null
onsubmit: null
onsuspend: null
ontimeupdate: null
onvolumechange: null
onwaiting: null
onwebkitfullscreenchange: null
onwebkitfullscreenerror: null
onwheel: null
outerHTML: "<h1 class="aos-init aos-animate" data-aos="" data-toggle="countup" data-to="256" data-from="0" data-aos-id="countup:in"></h1>"
outerText: ""

ownerDocument: Object

parentElement: Object

parentNode: Object
prefix: null

previousElementSibling: Object

previousSibling: Object
scrollHeight: 0
scrollLeft: 0
scrollTop: 0
scrollWidth: 788
spellcheck: true

style: Object
tabIndex: 0
tagName: "H1"
textContent: ""
title: ""

__proto__: Object

__proto__: Object

The object above is passed as e.detail. The problem is when I run e.detail instanceof Element it returns true in all browsers but IE and Edge. In IE and Edge it returns false, so I cannot work with it as a normal DOM Element. Any ideas why? Is there a way to parse it or something?

Answer 1

You cannot rely on much when it comes to host-provided objects like DOM elements. As you've found, different hosts are free to implement things in different ways.

Separately: instanceof isn't reliable cross-realm. So if you're getting an object (of any kind, not just a host-provided object) from another window (which is another realm), instanceof will probably fail. That's because the way instanceof works is by checking the prototype chain of the object you all it on and seeing if any of its prototypes is the object on the prototype property of the function you're comparing it to (Element, in your example). That's part of why we have Array.isArray, because a instanceof Array fails if the array comes from another window.

There's no reason to use instanceof on a DOM element. Just use the element. If you want to make sure it's an element, a fairly reliable check is a.detail.nodeType === 1. (Reliable as in: It'll work for any DOM element. Naturally, if someone gives you an object with a nodeType property with the avlue 1 that isn't a DOM element, it'll pass the check, but...)