我使用基于（.. in ..）和hasOwnProperty的递归函数来克隆对象，这在IE和FF中可以正常工作，但不能用于Chrome。
使用for（... in）迭代对象的成员时，如果对象是DOM对象，则Firefox和Chrome会为hasOwnProperty提供不同的结果。 / p>
在Chrome控制台中输入以下内容与Firebug（FF）中的控制台给出不同的结果：
var t = document.createElement（table）; var tr = t.insertRow（-1）; for（var p in tr）if（tr.hasOwnProperty（p））console.log（p）;Firefox输出：
构造函数 addEventListener
Chrome输出：
clientLeft scrollHeight firstElementChild offsetParent offsetWidth isContentEditable hidden previousElementSibling parentElement localName 儿童 ownerDocument nodeValue lastElementChild rowIndex offsetLeft tagName className > 前缀 innerHTML 前同步 namespaceURI id childElementCount innerText scrollLeft clientHeight align textContent $ b $ nextSibling scrollWidth offsetHeight chOff clientWidth nodeName $ b $风格 lang scrollTop offsetTop chi ldNodes aseURI nextElementSibling vAlign sectionRowIndex classList title < firstChild 属性 数据集 outerText 单元格 parentNode clientTop tabIndex contentEditable $ b $ outerHTML dir lastChild bgColor nodeType 拼写检查 可拖动
标记为true的所有额外属性hasOwnProeperty在我的代码中造成'无限/足以崩溃'recusion。有没有办法确定一个proeperty是否是一个内置的DOM对象属性？或者其他一些解决方案。最简单的解决方案是检查 .cloneNode 方法，如果存在的话。这意味着您的克隆方法将检查任何DOM节点，并使用预定义的DOM方法。这应该完全避免你的问题。
至于你的实际问题。看来Chrome和Firefox不同意属于原型的属性，以及属于HTMLTableRowElement对象的属性（以及任何其他元素）。
比较在firefox和chrome中使用console.dir（HTMLTableRowElement）
在firefox中，所有这些属性都位于 HTMLTableRowElement 原型。铬原型只有几个方法在那里。 （ delecteCell 和 insertCell ）。
DOM规范是否说明了HTMLElements的属性是应该在原型上还是在对象上定义，所以这只是你不应该依赖的东西而已。
无论哪种方式 .cloneNode ，因为这是一个本地方法，因此比JavaScript更好/更快。
Chrome psuedo执行： $ p $ lt; code> function HTMLTableRowElement（）{ ... this.nextSibling = ...; this.nodeName = ...; this.nodeType = ...; ... } HTMLTableRowElement.prototype.deleteCell = function（）{...}; HTMLTableRowElement.prototype.insertCell = function（）{...};
Firefox伪执行
function HTMLTableRowElement（）{ ... } HTMLTableRowElement.prototype.nextSibling = ...; HTMLTableRowElement.prototype.nodeName = ...; HTMLTableRowElement.prototype.nodeType = ...; ... HTMLTableRowElement.prototype.deleteCell = function（）{...}; HTMLTableRowElement.prototype.insertCell = function（）{...};
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..
解决方案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() { ... };
更多推荐
Chrome和Firefox在这里有什么区别？
发布评论