2011-06-05 151 views
55

在JavaScript中,我可以这样做:'new Image()`和`document.createElement('img')`有区别吗?

img1 = new Image(); 
img2 = document.createElement('img'); 

我的问题是,有两个方法之间的差异?我读过ImageFormElement被称为主对象,这是真的吗?如果是,主机对象是什么?

哪种方法更可取?

+0

[如'新Image'定义?](http://stackoverflow.com/questions/6936071/where-are-constructors-such-as-new-image-and-new-option-documented ) – 2014-06-12 20:21:11

回答

44

我找不到任何详细的参考,但基于MDC - HTMLImageElement示例中的评论,似乎Image是DOM级别0而document.createElement is part of DOM level 2

DOM级别0是Netscape发明的,它提供了访问网站某些元素的方法。基本上所有浏览器都支持它以实现向后兼容。
但说实话,我不明白为什么构造Image存在那里,因为,据我的理解是,有没有办法操纵与DOM级别文档0也许它只是使用由浏览器在内部创建对象。

DOM级别2是由W3C开发的官方标准。

有关DOM级别的更多信息,请参阅quirksmode.org - Level 0 DOMWikipedia


我在什么地方读到ImageForm,并且Element被称为主机对象,这是真的吗?

是的。

如果是,主对象是什么?

ECMAScript specification激励主机对象这样:

ECMAScript是一种面向对象的编程语言用于在主机环境中执行计算和操作的计算对象。这里定义的ECMAScript不是计算上的自给自足;实际上,本规范中没有关于输入外部数据或输出计算结果的规定。相反,预计ECMAScript程序的计算环境不仅可以提供本规范中描述的对象和其他功能,还可以提供某些特定于环境的主机对象,其描述和行为超出了本规范的范围,除了表明他们可能会提供某些可以访问的属性以及某些可以从ECMAScript程序中调用的函数。

宿主对象
由主机环境提供的对象来完成的ECMAScript的执行环境。
注意任何非本地对象都是主机对象。

所以未在规范中定义和由环境提供的任何对象是宿主对象。这些例如在浏览器中(等等):windowdocumentconsole

+0

好的答案!我想问,为什么'document'被认为是* host object *?它不是在DOM级别1规范中定义的吗? http://www.w3.org/TR/REC-DOM-Level-1/level-one-core.html#i-Document – rickchristie 2011-06-05 09:10:17

+7

@rickchristie:不要混淆DOM规范和ECMAScript规范。 'document'由浏览器提供,作为JavaScript的接口来访问DOM。它不是ECMAScript规范(JavaScript本身)的一部分。 – 2011-06-05 09:12:26

+0

明白了。谢谢! – rickchristie 2011-06-05 09:14:36

7

这两行等同,都创建HTMLImageElement对象。 唯一的区别在于混合命名空间的XML文档 - new Image()始终使用XHTML命名空间返回<img>元素,document.createElement('img')并不总是这样做。

+2

谢谢!你能详细说明为什么'document.createElement('img')'并不总是这样做(这取决于文档的文档类型)吗? – 2011-06-05 08:54:04

+5

关于命名空间:这就是'document.createElementNS'的用途:https://developer.mozilla.org/en/DOM/document.createElementNS – 2011-06-05 08:58:22

4

我个人会坚持createElement,因为然后它不是一个特殊的情况下,使图像一切都是相同的方式,因为他们是相同的我也注意到,jquery使用appendChild(节点)方法的一切,我不知道在你的问题,但与jQuery的两种方法之间的差异,但jQuery的确可以跨浏览器工作

1

我不知道的技术差异应该是什么,但我只是在下面的代码从new Image()变为document.createElement('img')固定在IE8的bug。在IE8中,使用Image构造函数时,onload回调从未触发。

newImage = document.createElement('img'); 
//newImage = new Image(); 

newImage.onload = function() { 
    callback(this.width, this.height); 
}; 

newImage.src = image.src; 
相关问题