
本記事では、JavaScriptにおけるDOM操作の一つであるマウスオーバーイベントの活用方法(mousedown, mouseup, mouseenter….)の解説に加えまして、JSコードにて、HTML要素の値を変化させる(innerHTML)方法について、サンプルコードを用いながらご紹介させて頂きます。
✅ マウスオーバーイベントの使い方が分かる
✅ JSにてHTML要素の値を変化させる方法が分かる
DOM操作とは??
DOMとは、HTML要素へアクセスし、値を動的に操作できるオブジェクトであり、HTML要素をJavaScriptにて取得し、ボタンが押されたりなどの動的なイベントが発生した際に、取得したHTML要素へ変化を与えることが出来ます。例えば、CSSを追加したり、削除したりなどが主にその変化にあたります。
マウスオーバーイベント
マウスオーバーイベントとは??
「クリックした時」,「クリックした状態から離した時」など、ある要素の上をマウスカーソルで操作した際に発生するイベントになります。
種類
使い方

例のようなコードの書き方をしますが、コード的に何をしているかと言いますと、mousedownイベントを設定しておりますので、定数mouseにて受け取ったHTML要素がクリックされた際に、クリックしたHTML要素の背景色を赤に変化させています。
HTML要素の値を更新

マウスオーバーイベントの使い方が分かったところで、今回のタイトルにもあるように、HTML要素の値を更新する方法について、サンプルコードを用いながら、一緒に確認していきましょう。
まずは、ベースとなるHTMLファイルを用意する必要がありますので、以下のコードをコピペして、作成してください。
※ JSコードは、HTMLに埋め込みながら動作させていきます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js_dom_sample</title>
</head>
<body>
<div class="main">
<!-- 今回操作する要素 -->
<div id="Mouse"></div>
<div id="Mouse02"></div>
<!-- -->
</div>
<script>
<!-- ここにJSコードを記述していきます。 -->
</script>
</body>
<style>
.main {
width: 70%;
height: 700px;
border: 2px dashed black;
display: flex;
justify-content: center;
align-items: center;
}
#Mouse, #Mouse02 {
width: 300px;
height: 300px;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
background-color: aquamarine;
}
</style>
</html>

続きまして、HTMLファイルが準備出来ましたら、[ ここにJSコードを記述していきます。 ]の箇所に以下のJSコードを記述してください。
// HTML要素の取得
const mouse = document.querySelector('#Mouse');
const mouse02 = document.querySelector('#Mouse02');
// mousedown : 指定のHTML要素が押下された時
mouse.addEventListener('mousedown', () => {
// innerHTMLで、HTML要素の中身を更新する
mouse.innerHTML = "要素をクリックしました。";
});
// mouseup : 押された状態から離した時
mouse.addEventListener('mouseup', () => {
mouse.innerHTML = "クリックした状態から離れました。";
});
// mouseenter : マウスのカーソルが要素の上に乗った時
mouse02.addEventListener('mouseenter', () => {
mouse02.innerHTML = "カーソルが要素の上に乗りました。";
});
// mouseleave : マウスのカーソルが要素の上から離れた時
mouse02.addEventListener('mouseleave', () => {
mouse02.innerHTML = "カーソルが要素の上から離れました。";
});

実行結果としましては、以下のようになりますので、ご確認ください。
[ 実行結果 ]
[ DEMO ]

ここまでお疲れ様でした。
全てのコードを確認したい場合は、DEMOページの画面上で右クリックして頂き、ページのソースを表示を選択して、ご確認くださいませ。
まとめ
⇨ HTML要素へアクセスし、値を動的に操作できるオブジェクトであり、HTML要素をJavaScriptにて取得し、ボタンが押されたりなどの動的なイベントが発生した際に、取得したHTML要素へ変化を与えることことが可能です。
⇨ 「 クリックした時 」,「 クリックした状態から離した時 」など、ある要素の上をマウスカーソルで操作した際に発生するイベントになります。
✅ JSにてHTML要素の値を変化させる方法
⇨ innerHTMLを用いて、値の変化を行います。テキストのみではなく、画像(img)や動画(video)なども操作可能です。
コメント