JavaScriptとDOM操作

こんにちは！株式会社アルシエで教育に関するサポートをしている岸本です。

今回は「JavaScriptとDOM操作」についてお伝えしていきます。

JavaScriptとDOM操作

Web開発でJavaScriptを使用してDOM操作をすることは重要です。

DOMはWebページの構成を表現し、JavaScriptを使用して操作することで、ページの動作を実現できます。

DOMとは何か？

DOMは、HTMLのプログラム内の表現です。

Webページの要素(タグ、テキストなど)にJavaScriptからのアクセスを可能にするオブジェクトです。

ページ上の要素を変更したり、イベントを処理したりすることができます。

DOM要素の選択

JavaScriptでDOM要素を選択する方法はいくつかあります。

getElementById、querySelector、getElementsByClassNameなどのメソッドを使用して、要素を取得します。

// IDを使用して要素を選択
const myElement = document.getElementById('my-element');

// セレクタを使用して要素を選択
const header = document.querySelector('header');

// クラス名を使用して要素を選択（複数の要素が返される）
const buttons = document.getElementsByClassName('btn');

DOM要素の変更

DOM要素を変更する方法には、テキストの変更、属性の変更、新しい要素の追加、要素の削除などがあります。

テキストの変更

// テキストの変更
myElement.textContent = '新しいテキスト';

属性の変更

// 属性の変更
myElement.setAttribute('src', 'new-image.jpg');

新しい要素を作成して追加

新しい段落要素が作成され、document.body（HTMLの<body>要素）に追加されます。

const newElement = document.createElement('p');
newElement.textContent = '新しい段落';
document.body.appendChild(newElement);

要素を削除

element-to-remove というIDを持つ要素が削除されます。

const elementToRemove = document.getElementById('element-to-remove');
elementToRemove.remove();

要素のスタイルを変更

styled-element というIDを持つ要素のテキストの色と背景色が変更されます。

const styledElement = document.getElementById('styled-element');
styledElement.style.color = 'red';
styledElement.style.backgroundColor = 'yellow';

下記は、HTMLも組み合わせた例です。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScriptとDOM操作</title>
    <style>
        /* CSSスタイルを追加 */
        #my-element {
            color: blue;
        }
    </style>
</head>
<body>
    <h1>JavaScriptとDOM操作</h1>

    <!-- IDが"my-element"の要素を選択してテキストを変更 -->
    <p id="my-element">初めてのDOM操作</p>

    <button id="change-text">テキストを変更</button>
    <button id="add-element">新しい要素を追加</button>
    <button id="remove-element">要素を削除</button>

    <script>
        // テキストを変更する関数
        function changeText() {
            const myElement = document.getElementById('my-element');
            myElement.textContent = 'テキストが変更されました！';
        }

        // 新しい段落要素を追加する関数
        function addNewElement() {
            const newElement = document.createElement('p');
            newElement.textContent = '新しい段落が追加されました！';
            document.body.appendChild(newElement);
        }

        // 要素を削除する関数
        function removeElement() {
            const elementToRemove = document.getElementById('my-element');
            elementToRemove.remove();
        }

        // クリックイベントのハンドリング
        document.getElementById('change-text').addEventListener('click', changeText);
        document.getElementById('add-element').addEventListener('click', addNewElement);
        document.getElementById('remove-element').addEventListener('click', removeElement);
    </script>
</body>
</html>

イベントハンドリング

DOM要素に対するイベント（クリック、マウスオーバー、フォーム送信など）を処理するには、イベントハンドラーを使用します。

クリックイベント

クリックをしたら、「要素がクリックされました！」というアラートが表示されます。

// クリックイベントのハンドリング
myElement.addEventListener('click', () => {
  alert('要素がクリックされました！');
});

キーボードイベントのハンドリング

ページ全体でキーが押されるのを監視し、Enterキーが押されたときにアラートを表示します。

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        alert('Enterキーが押されました！');
    }
});

フォーム送信イベントのハンドリング

フォームが送信されると、フォームのデフォルトの送信を防止し、入力フィールドの値をアラートで表示します。

const myForm = document.getElementById('my-form');
myForm.addEventListener('submit', function(event) {
    event.preventDefault(); // フォームのデフォルトの送信を防止
    const inputValue = document.getElementById('input-field').value;
    alert(`入力値: ${inputValue}`);
});