new Image() と createElement('img')の違いについて教えて下さい

Question

JavaScriptから画像要素を作成するときに、以下のような2種類の書き方があると思います。

const img1 = new Image();

const img2 = document.createElement('img');

どちらも同じ画像要素を生成していると思うのですが、何か違いはあるのでしょうか？
（なぜ2種類の書き方があるのか…）

ふと感じた疑問だったのですが、調べても答えらしき記事が見つからなかったのでこちらに質問致しました。

もし分かる方がいらっしゃいましたら、アドバイス頂けますと幸いです。

Answer 1

何か違いはあるのでしょうか？

特にありません。

（なぜ2種類の書き方があるのか…）

おそらくはブラウザ戦争（DOMがブラウザによってバラバラだった）の名残かと思われます。HTML LSには、new Imageの方は「legacy factory function」と書かれています。

Comments

[miyabi_pudding]

Chromeでの検証ですが、
constructorも全く同じになるようですね。
MDNの記載にも、同等との記載もあるようです。

Answer 2

両者は機能的には同じです。

Image() - Web API | MDN（英語ですがGoogle翻訳すればわかります）

なぜ2種類用意してあるのかについてはわからないです。new Image()の方が糖衣構文なのかな？と思います。

Comments

[miyabi_pudding]

どちらかというと、
createElementの方が糖衣な気がします。
どちらも、生成後のインスタンスのconstructorは、HTMLImageElementになりますが、
createElement自体のconstructorは、Functionになるようなので。
（Image自体のコンストラクターは、HTMLImageElementっぽい）

[ohys]

ご指摘ありがとうございます。糖衣云々は勝手な思いつきでしたので…

[miyabi_pudding]

あ、すみません、
Imageのプロトタイプが、HTMLImageElementでした。
document.createElementは、クラスメソッドっぽい・・・。（内部的にはプロトタイプメソッド）
（両者ともに、constructor自体はFunction、かな？）

Answer 3

前者はimageオブジェクトをつくっているだけなのでDOMとは関係ありません。
後者はimgタグをDOMでつくっているだけで画像自体の情報を直接もつっていません。

なんか違うので再検討

Comments

[yambejp]

Imageはサイズの指定がしやすいくらいですかね・・・

const img1 = new Image(100,200);
const img2 = Object.assign(document.createElement('img'),{width:100,height:200});
console.log([img1,img2]);