How come there is a difference between Chrome and Firefox here?

Question

I am using a recursive function based around for(.. in ..) and hasOwnProperty to clone objects, which works fine in IE and FF... but not Chrome.

When iterating over members of an object using for(... in ...) Firefox and Chrome gives different results for hasOwnProperty if the object is a DOM object.

Typing the following into the Chrome console vs. the console in Firebug(FF) gives different results:

var t = document.createElement("table");
var tr = t.insertRow(-1);
for(var p in tr) if(tr.hasOwnProperty(p)) console.log(p);

Firefox output:

constructor
addEventListener

Chrome output:

clientLeft
scrollHeight
firstElementChild
offsetParent
ch
offsetWidth
isContentEditable
hidden
previousElementSibling
parentElement
localName
children
ownerDocument
nodeValue
lastElementChild
rowIndex
offsetLeft
tagName
className
prefix
innerHTML
previousSibling
namespaceURI
id
childElementCount
innerText
scrollLeft
clientHeight
align
textContent
nextSibling
scrollWidth
offsetHeight
chOff
clientWidth
nodeName
style
lang
scrollTop
offsetTop
childNodes
baseURI
nextElementSibling
vAlign
sectionRowIndex
classList
title
firstChild
attributes
dataset
outerText
cells
parentNode
clientTop
tabIndex
contentEditable
outerHTML
dir
lastChild
bgColor
nodeType
spellcheck
draggable

All the extra properties flagged as true for hasOwnProeperty is causing 'infinite/enough to crash' recusion in my code. Is there a way to determine if a proeperty is a built in DOM object property? Or some other solution..

Answer 1

The easiest solution to this is checking for .cloneNode method and using that if it exists.

This means that your cloning method will check for any DOM nodes and use the pre defined DOM method on it. This should avoid your issue completely.

As for your actual problem. It seems Chrome and Firefox disagree on what belongs on the prototype and what belongs on the object for HTMLTableRowElement (And any other element aswell).

Compare console.dir(HTMLTableRowElement) in both firefox and chrome.

In firefox all those properties live on the HTMLTableRowElement prototype. Where as the chrome prototype only has a few methods on it. (delecteCell and insertCell).

No where in the DOM specification does it say whether propertys of HTMLElements should be defined on the prototype or on the object specifically so this is just something you should not rely on.

Either way use .cloneNode because it's a native method and therefore better/faster then anything you can write in JavaScript.

Chrome psuedo implementation:

function HTMLTableRowElement() {
    ...
    this.nextSibling = ...;
    this.nodeName = ...;
    this.nodeType = ...;
    ...
}

HTMLTableRowElement.prototype.deleteCell = function() { ... };
HTMLTableRowElement.prototype.insertCell = function() { ... };

Firefox pseudo implementation

function HTMLTableRowElement() {
    ...
}

HTMLTableRowElement.prototype.nextSibling = ...;
HTMLTableRowElement.prototype.nodeName = ...;
HTMLTableRowElement.prototype.nodeType = ...;
...
HTMLTableRowElement.prototype.deleteCell = function() { ... };
HTMLTableRowElement.prototype.insertCell = function() { ... };

Answer 2

I think @Raynos offers a good solution in his answer. As to why things are so different, I suspect the basic issue is that a DOM element is not a JavaScript object — that is, it does not inherit from the JavaScript "Object" class in any way. DOM elements are provided by the runtime, and have behaviors and semantics that (usually) make sense to JavaScript code, but they're not really JavaScript objects internally. Thus, to me it's somewhat amazing the "hasOwnProperty" is available to be called at all.

Answer 3

The easiest way to determine whether or not an object is a DOM object would be to check if that object has the nodeName, nodeValue or nodeType properties.

if ( tr.nodeType > 0 ) {
    // tr is a DOM object
} else {
    // tr is not a DOM object
}

All DOM objects implement the Node interface and therefore contain the above mentioned properties.