Chrome和Firefox在这里有什么区别？ [英] How come there is a difference between Chrome and Firefox here?

问题描述

我使用基于（.. 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在这里有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！