[ JavaScript : DOM操作 ] マウスオーバーイベントで、HTML要素の値を変化させる方法

本記事では、JavaScriptにおけるDOM操作の一つであるマウスオーバーイベントの活用方法(mousedown, mouseup, mouseenter….)の解説に加えまして、JSコードにて、HTML要素の値を変化させる(innerHTML)方法について、サンプルコードを用いながらご紹介させて頂きます。

✅   DOM操作とは何かが分かる
✅   マウスオーバーイベントの使い方が分かる
✅   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 = "カーソルが要素の上から離れました。";
});