在javascript中，我可以这样做：
img1 = new Image();
img2 = document.createElement('img');
我的问题是，这两种方法有区别吗？我在某处读到过Image，Form,Element被称为宿主对象，这是真的吗？如果是，什么是宿主对象？
哪种方法更可取？
`new Image()` 和 `document.createElement('img')` 之间有区别吗？
IT技术
javascript
dom
2021-02-21 22:03:28
6个回答
我找不到任何详细的参考资料，但根据MDC 中HTMLImageElement的评论-例如，它似乎Image是 DOM level 0document.createElement的一部分，而是DOM level 2 的一部分。
DOM level 0 是由 Netscape 发明的，它提供了一种访问网站某些元素的方法。基本上所有浏览器都支持它向后兼容。
但说实话，我不明白为什么在Image构造函数中存在那里，因为，据我的理解是，有没有办法来处理与DOM级别为0的文件也许它只是通过浏览器内部使用，以创建对象。
DOM 级别 2 是 W3C 制定的官方标准。
有关 DOM 级别的更多信息，请查看quirksmode.org - Level 0 DOM和Wikipedia。
我在某处读到过
Image，Form,Element被称为宿主对象，这是真的吗？
是的。
如果是，什么是宿主对象？
在ECMAScript规范能够激励主机对象是这样的：
ECMAScript 是一种面向对象的编程语言，用于在宿主环境中执行计算和操作计算对象。此处定义的 ECMAScript 并非旨在计算自给自足；实际上，本规范中没有关于外部数据输入或计算结果输出的规定。相反，期望 ECMAScript 程序的计算环境不仅会提供本规范中描述的对象和其他设施，还会提供某些特定于环境的宿主对象，这些对象的描述和行为超出本规范的范围，除非表明它们可能提供某些可以访问的属性和可以从 ECMAScript 程序调用的某些函数。
和
宿主
环境提供的宿主对象对象来完成ECMAScript的执行环境。
注意任何非本机对象都是宿主对象。
因此，任何在规范中未定义并由环境提供的对象都是宿主对象。例如，这些在浏览器中（以及其他）：window、document和console。
要求：
在我的团队中，我们正在构建 angular 5 应用程序。功能要求是在组件加载时预加载图像，以便在我们的单页应用程序中的特定位置需要时重用它们而无需再次加载。
1. img = new Image(); 大大地：
我们尝试在 DOM 中预加载图像，create new Image()
但是当我们重用图像 src URL 时，浏览器总是重新加载源文件或检查标头是否被修改（如果启用缓存），这意味着预加载成功但对于每次重用，到服务器的往返是再次制作。
2. img = document.createElement('img') 方式：
当我们document.createElement('img')
对图像源做同样的事情时，没有重新加载，而是从文档的本地内存中重用，并且没有对 img src URL发出额外的请求。
我真的不明白为什么，但这是我们发现的一个主要区别。如果其他人需要重用预加载的图像，后者将是节省一些带宽和很少请求往返的方法:)
这两行是等效的，都创建 HTMLImageElement 对象。唯一的区别在于具有混合命名空间的 XML 文档 -new Image()总是返回<img>具有 XHTML 命名空间的元素，document.createElement('img')并不总是这样做。
我个人会坚持使用 createElement 因为那样它不是制作图像的特例，一切都以相同的方式制作，因为它们完全相同我还注意到 jquery 对所有内容都使用 appendChild(node) 方法，我不确定两者之间的区别那以及您问题中的两种方法，但 jquery 确实可以跨浏览器工作
我不知道技术上的区别应该是什么，但我只是通过在以下代码中更改为new Image()来修复了 IE8 中的错误document.createElement('img')。在 IE8 中，onload 回调在使用Image构造函数时从未被触发。
newImage = document.createElement('img');
//newImage = new Image();
newImage.onload = function () {
callback(this.width, this.height);
};
newImage.src = image.src;