Why is there a difference between Chrome and Firefox?

I use a recursive function based on (.. in ..) and hasOwnProperty to clone objects, which works fine in IE and FF ... but not in Chrome.

When repeating elements of an object using for (... in ...), Firefox and Chrome give different results for hasOwnProperty if the object is a DOM object.

Putting the following content into the Chrome console into 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
h
offsetWidth
isContentEditable
hidden
previousElementSibling
parentElement
Localname
children
ownerDocument
nodeValue
lastElementChild
RowIndex
offsetLeft
Daegu

class name prefix
innerHTML
PreviousSibling
NamespaceURI
identifier
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
Data set
outerText
cells
Parentnode
clientTop
Tabindex
contentEditable
outerHTML
dir
Lastchild
BGColor
NODETYPE

spelling draggable

All additional properties marked true for hasOwnProeperty cause an "infinite / sufficient number of crashes" in my code. Is there a way to determine if proeperty is embedded in a property of a DOM object? Or some other solution.

+4
source share
3 answers

The easiest solution for this is to check the .cloneNode method and use it if it exists.

This means that your cloning method will check for any DOM nodes and use the predefined DOM method on it. This should completely eliminate your problem.

Regarding your real problem. It seems that Chrome and Firefox do not agree with what belongs to the prototype and what belongs to the object for HTMLTableRowElement (and any other element as well).

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

In firefox, all of these properties are in the HTMLTableRowElement prototype. Where as a chrome prototype there are only a few methods. ( delecteCell and insertCell ).

No, if the DOM specification states whether the HTMLElements properties should be defined on the prototype or on the object, so you should not rely on this.

In any case, use .cloneNode because it is a proprietary method and therefore better / faster than 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() { ... }; 
+4
source

I think @Raynos offers a good solution in his answer. Regarding why everything is so different, I suspect that the main problem is that the DOM element is not a JavaScript object β€” that is, it does not inherit from the JavaScript class β€œObject” in any way. DOM elements are provided by the runtime and have behaviors and semantics that (usually) make sense for JavaScript code, but they are not JavaScript objects inside. Thus, for me it is somewhat surprising that "hasOwnProperty" is available to call at all.

+1
source

The easiest way to determine if an object is a DOM object is to check whether the object has 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 properties.

0
source

Source: https://habr.com/ru/post/1343917/


All Articles