はじめに
JSを勉強している中で、「HTMLImageElementインターフェース」というモノを知り、最初は何を言っているのかさっぱりわからなかったところから少しづつ理解したこととまとめてみます。
HTMLImageElementとは
HTMLImageElement インターフェースは、
タグに相当します。
エレメントの一種です。
画像を読み込んで表示するための機能がまとまっています。
つまり、JS上で <img>タグ に相当するモノ(オブジェクト)を作成し、htmlに反映できるだと理解しました。
こちらのサイトがわかりやすかったので引用させていただきました。
どんな感じに使うのか
使い方：Image() コンストラクタを使用する
コンストラクタを使用
// HTMLImageElement オブジェクトを作成する
var image = new Image();
簡単にボタンクリックで画像切り替え処理を作成しました。
See the Pen LYEBEGd by RS (@shimamar) on CodePen.
まとめ
簡単な処理を作成してみましたが、まだまだ理解仕切れてないことが多いなと痛感しました。
もっと画像をJSで扱う動作を勉強してもっと臨機応変なコードを描けるようにしたいと改めて思いました！
勉強をしていく上でもっと良い方法や内容があれば更新していきます。