JavaScriptによる基本的なDOM操作：要素の取得と変更の徹底解説

JavaScriptを学ぶ上で欠かせないのが、DOM（Document Object Model）の操作です。DOM操作を理解することで、Webページ上の要素を動的に変更したり、ユーザーの操作に応じたインタラクティブなコンテンツを作成することが可能になります。本記事では、JavaScriptを用いた基本的なDOM操作について、要素の取得方法から、テキストや属性の変更、スタイルの適用方法までを徹底的に解説します。これにより、あなたのWeb開発スキルが一段と向上することでしょう。

DOMとは何か

DOM（Document Object Model）は、HTMLやXML文書をプログラムから操作するためのAPI（Application Programming Interface）です。DOMは、文書の構造をツリー状に表現し、各要素や属性をオブジェクトとして扱います。このツリー構造により、JavaScriptなどのプログラミング言語を使って、Webページの内容や構造、スタイルを動的に変更することが可能になります。

DOMの重要性

DOMは、以下の理由からWeb開発において非常に重要です。

動的なコンテンツの生成

JavaScriptを使って、ページロード後に新しい要素を追加したり、既存の要素を削除したりすることができます。これにより、ユーザーの操作に応じたインタラクティブなWebページを作成することが可能です。

リアルタイムのユーザーインタラクション

DOMを操作することで、ユーザーの入力やイベント（クリックやキーボード入力など）に応じて、ページの内容を即座に変更することができます。これにより、ユーザー体験を大幅に向上させることができます。

アクセスと操作の容易さ

DOMは標準化されているため、ブラウザ間で一貫した操作が可能です。また、豊富なメソッドやプロパティが用意されているため、要素の取得や変更が簡単に行えます。

以上のように、DOMはWebページの動的な操作を実現するための基盤であり、JavaScriptを使って効果的に操作することで、より魅力的でインタラクティブなWebサイトを構築することができます。

要素の取得方法

JavaScriptを用いてDOM要素を操作するためには、まず操作対象の要素を取得する必要があります。DOM要素の取得にはいくつかの方法があり、それぞれ用途に応じて使い分けることが重要です。ここでは、主な要素取得方法について説明します。

getElementById

getElementByIdメソッドは、指定されたid属性を持つ要素を取得するために使用されます。ページ内で一意のidを持つ要素を取得する際に便利です。

let element = document.getElementById("exampleId");

getElementsByClassName

getElementsByClassNameメソッドは、指定されたクラス名を持つすべての要素を取得します。取得される要素はHTMLCollectionとして返されます。

let elements = document.getElementsByClassName("exampleClass");

getElementsByTagName

getElementsByTagNameメソッドは、指定されたタグ名を持つすべての要素を取得します。こちらもHTMLCollectionとして返されます。

let elements = document.getElementsByTagName("div");

querySelector

querySelectorメソッドは、指定されたCSSセレクタに一致する最初の要素を取得します。クラスやid、タグ名、属性セレクタなど、複雑なセレクタも使用可能です。

let element = document.querySelector(".exampleClass");

querySelectorAll

querySelectorAllメソッドは、指定されたCSSセレクタに一致するすべての要素を取得します。返されるのはNodeListです。

let elements = document.querySelectorAll("div.exampleClass");

これらのメソッドを組み合わせることで、目的に応じたDOM要素の取得が可能になります。次に、これらのメソッドを実際のコード例を交えて詳しく解説していきます。

getElementByIdの使用例

getElementByIdメソッドは、指定したid属性を持つ要素を取得するための最もシンプルかつ一般的な方法です。idはHTML文書内で一意であるため、特定の要素を確実に取得できます。ここでは、getElementByIdを使用した具体的な例を見てみましょう。

基本的な使用例

以下の例では、idが”myElement”の要素を取得し、その内容を変更します。

<!DOCTYPE html>
<html>
<head>
    <title>getElementById Example</title>
</head>
<body>
    <div id="myElement">元のテキスト</div>
    <button onclick="changeText()">テキストを変更</button>

    <script>
        function changeText() {
            let element = document.getElementById("myElement");
            element.textContent = "新しいテキスト";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされるとchangeText関数が呼び出され、idが”myElement”の要素のテキスト内容が「新しいテキスト」に変更されます。

スタイルの変更例

次に、getElementByIdを使用して要素のスタイルを変更する例を示します。

<!DOCTYPE html>
<html>
<head>
    <title>Style Change Example</title>
</head>
<body>
    <div id="myElement" style="color: black;">スタイルを変更するテキスト</div>
    <button onclick="changeStyle()">スタイルを変更</button>

    <script>
        function changeStyle() {
            let element = document.getElementById("myElement");
            element.style.color = "red";
            element.style.fontSize = "20px";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされるとchangeStyle関数が呼び出され、idが”myElement”の要素のテキストカラーが黒から赤に、フォントサイズが20pxに変更されます。

属性の変更例

次に、getElementByIdを使用して要素の属性を変更する例を示します。

<!DOCTYPE html>
<html>
<head>
    <title>Attribute Change Example</title>
</head>
<body>
    <img id="myImage" src="old_image.jpg" alt="古い画像">
    <button onclick="changeAttribute()">画像を変更</button>

    <script>
        function changeAttribute() {
            let image = document.getElementById("myImage");
            image.src = "new_image.jpg";
            image.alt = "新しい画像";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされるとchangeAttribute関数が呼び出され、idが”myImage”の画像要素のsrc属性とalt属性がそれぞれ新しい値に変更されます。

以上の例から、getElementByIdを使った基本的なDOM操作方法を理解できたでしょう。次に、より複雑な要素取得方法であるquerySelectorとquerySelectorAllについて解説します。

querySelectorとquerySelectorAllの違い

querySelectorとquerySelectorAllは、CSSセレクタを使用してDOM要素を取得する非常に強力なメソッドです。これらのメソッドを使うことで、複雑なセレクタを用いた要素取得が可能になりますが、それぞれの違いと使い方を理解することが重要です。

querySelectorの使い方

querySelectorメソッドは、指定されたCSSセレクタに一致する最初の要素を返します。最初の一致する要素のみを取得するため、取得対象が1つである場合に適しています。

let element = document.querySelector(".exampleClass");

この例では、クラス名がexampleClassの最初の要素が取得されます。

querySelectorの具体例

以下のHTMLでは、querySelectorを使用して特定の要素を取得し、テキストを変更する例を示します。

<!DOCTYPE html>
<html>
<head>
    <title>querySelector Example</title>
</head>
<body>
    <div class="exampleClass">最初の要素</div>
    <div class="exampleClass">2番目の要素</div>
    <button onclick="changeFirstElement()">最初の要素を変更</button>

    <script>
        function changeFirstElement() {
            let element = document.querySelector(".exampleClass");
            element.textContent = "変更された最初の要素";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると最初のexampleClassクラスを持つ要素のテキストが変更されます。

querySelectorAllの使い方

querySelectorAllメソッドは、指定されたCSSセレクタに一致するすべての要素をNodeListとして返します。複数の要素を一度に取得する場合に適しています。

let elements = document.querySelectorAll(".exampleClass");

この例では、クラス名がexampleClassのすべての要素が取得されます。

querySelectorAllの具体例

以下のHTMLでは、querySelectorAllを使用して特定の要素を取得し、それぞれのテキストを変更する例を示します。

<!DOCTYPE html>
<html>
<head>
    <title>querySelectorAll Example</title>
</head>
<body>
    <div class="exampleClass">最初の要素</div>
    <div class="exampleClass">2番目の要素</div>
    <div class="exampleClass">3番目の要素</div>
    <button onclick="changeAllElements()">すべての要素を変更</button>

    <script>
        function changeAllElements() {
            let elements = document.querySelectorAll(".exampleClass");
            elements.forEach((element, index) => {
                element.textContent = `変更された要素 ${index + 1}`;
            });
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされるとすべてのexampleClassクラスを持つ要素のテキストが、それぞれ「変更された要素 1」「変更された要素 2」「変更された要素 3」に変更されます。

以上のように、querySelectorとquerySelectorAllは、それぞれの用途に応じて使い分けることで、柔軟なDOM操作が可能になります。次に、取得した要素のテキストを変更する方法について解説します。

要素のテキスト変更方法

DOM要素を取得した後、その要素のテキストを変更する方法を理解することは非常に重要です。JavaScriptでは、textContentプロパティとinnerHTMLプロパティを使用して、要素のテキストやHTML内容を変更することができます。

textContentプロパティを使用する方法

textContentプロパティは、要素内のテキスト全体を変更します。このプロパティは、要素内のテキストのみを扱い、HTMLタグは無視されます。

使用例

以下の例では、button要素をクリックすることで、div要素のテキストを変更します。

<!DOCTYPE html>
<html>
<head>
    <title>textContent Example</title>
</head>
<body>
    <div id="textElement">元のテキスト</div>
    <button onclick="changeText()">テキストを変更</button>

    <script>
        function changeText() {
            let element = document.getElementById("textElement");
            element.textContent = "新しいテキスト";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”textElement”のdiv要素のテキストが「新しいテキスト」に変更されます。

innerHTMLプロパティを使用する方法

innerHTMLプロパティは、要素内のHTMLコンテンツ全体を変更します。これにより、テキストだけでなく、HTMLタグも含めて要素の内容を変更することができます。

使用例

以下の例では、button要素をクリックすることで、div要素のHTML内容を変更します。

<!DOCTYPE html>
<html>
<head>
    <title>innerHTML Example</title>
</head>
<body>
    <div id="htmlElement">元の<span>HTML</span></div>
    <button onclick="changeHTML()">HTMLを変更</button>

    <script>
        function changeHTML() {
            let element = document.getElementById("htmlElement");
            element.innerHTML = "新しい<strong>HTML</strong>";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”htmlElement”のdiv要素の内容が「新しいHTML」に変更され、HTMLタグも反映されます。

注意点

innerHTMLを使用する際は、セキュリティ上の注意が必要です。ユーザーからの入力を直接innerHTMLに挿入すると、クロスサイトスクリプティング（XSS）攻撃のリスクがあります。そのため、ユーザー入力を扱う際は、適切なエスケープ処理を行うことが重要です。

以上のように、textContentとinnerHTMLを使い分けることで、要素のテキストやHTML内容を柔軟に変更することができます。次に、DOM要素の属性を変更する方法について解説します。

要素の属性変更方法

DOM要素の属性を変更することで、要素の振る舞いや表示を動的に制御することができます。JavaScriptでは、setAttributeメソッドと属性プロパティを使って要素の属性を変更できます。ここでは、これらの方法について具体的な例を交えて解説します。

setAttributeメソッドを使用する方法

setAttributeメソッドは、指定した属性の値を設定します。このメソッドは、存在しない属性を新しく追加することもできます。

使用例

以下の例では、button要素をクリックすることで、img要素のsrc属性とalt属性を変更します。

<!DOCTYPE html>
<html>
<head>
    <title>setAttribute Example</title>
</head>
<body>
    <img id="myImage" src="old_image.jpg" alt="古い画像">
    <button onclick="changeImage()">画像を変更</button>

    <script>
        function changeImage() {
            let image = document.getElementById("myImage");
            image.setAttribute("src", "new_image.jpg");
            image.setAttribute("alt", "新しい画像");
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”myImage”のimg要素のsrc属性とalt属性が新しい値に変更されます。

属性プロパティを使用する方法

属性プロパティを使用して、要素の属性を直接変更することもできます。これは、特定の属性にアクセスしてその値を設定する簡便な方法です。

使用例

以下の例では、button要素をクリックすることで、a要素のhref属性を変更します。

<!DOCTYPE html>
<html>
<head>
    <title>属性プロパティ Example</title>
</head>
<body>
    <a id="myLink" href="https://oldsite.com">古いリンク</a>
    <button onclick="changeLink()">リンクを変更</button>

    <script>
        function changeLink() {
            let link = document.getElementById("myLink");
            link.href = "https://newsite.com";
            link.textContent = "新しいリンク";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”myLink”のa要素のhref属性とテキストが新しい値に変更されます。

クラスの操作

classListプロパティを使用して、要素のクラスを追加、削除、および切り替えることができます。これにより、スタイルや振る舞いを動的に制御できます。

使用例

以下の例では、button要素をクリックすることで、div要素に新しいクラスを追加します。

<!DOCTYPE html>
<html>
<head>
    <title>classList Example</title>
    <style>
        .newClass {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="myDiv">このテキストのスタイルを変更</div>
    <button onclick="addClass()">クラスを追加</button>

    <script>
        function addClass() {
            let div = document.getElementById("myDiv");
            div.classList.add("newClass");
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”myDiv”のdiv要素にnewClassクラスが追加され、その結果スタイルが変更されます。

以上の方法を使い分けることで、DOM要素の属性を柔軟に変更することができます。次に、要素のクラスの追加と削除について詳しく解説します。

クラスの追加と削除

DOM要素にクラスを追加・削除することで、要素のスタイルや振る舞いを動的に変更できます。JavaScriptでは、classListプロパティを使用してクラスの操作を行います。ここでは、classListを用いた具体的な方法について解説します。

クラスの追加

クラスを追加するには、classListプロパティのaddメソッドを使用します。

使用例

以下の例では、button要素をクリックすることで、div要素に新しいクラスを追加します。

<!DOCTYPE html>
<html>
<head>
    <title>classList.add Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv">このテキストにクラスを追加</div>
    <button onclick="addClass()">クラスを追加</button>

    <script>
        function addClass() {
            let div = document.getElementById("myDiv");
            div.classList.add("highlight");
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”myDiv”のdiv要素にhighlightクラスが追加され、背景色が黄色に変更されます。

クラスの削除

クラスを削除するには、classListプロパティのremoveメソッドを使用します。

使用例

以下の例では、button要素をクリックすることで、div要素から特定のクラスを削除します。

<!DOCTYPE html>
<html>
<head>
    <title>classList.remove Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv" class="highlight">このテキストのクラスを削除</div>
    <button onclick="removeClass()">クラスを削除</button>

    <script>
        function removeClass() {
            let div = document.getElementById("myDiv");
            div.classList.remove("highlight");
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”myDiv”のdiv要素からhighlightクラスが削除され、背景色が元に戻ります。

クラスの切り替え

クラスを追加・削除する動作を切り替えるには、classListプロパティのtoggleメソッドを使用します。このメソッドは、指定されたクラスが存在する場合は削除し、存在しない場合は追加します。

使用例

以下の例では、button要素をクリックすることで、div要素のクラスを切り替えます。

<!DOCTYPE html>
<html>
<head>
    <title>classList.toggle Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv">このテキストのクラスを切り替え</div>
    <button onclick="toggleClass()">クラスを切り替え</button>

    <script>
        function toggleClass() {
            let div = document.getElementById("myDiv");
            div.classList.toggle("highlight");
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”myDiv”のdiv要素にhighlightクラスが存在する場合は削除され、存在しない場合は追加されます。

クラスの確認

特定のクラスが要素に存在するかどうかを確認するには、classListプロパティのcontainsメソッドを使用します。

使用例

以下の例では、button要素をクリックすることで、div要素に特定のクラスが存在するかどうかを確認し、結果をコンソールに出力します。

<!DOCTYPE html>
<html>
<head>
    <title>classList.contains Example</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv" class="highlight">このテキストのクラスを確認</div>
    <button onclick="checkClass()">クラスを確認</button>

    <script>
        function checkClass() {
            let div = document.getElementById("myDiv");
            if (div.classList.contains("highlight")) {
                console.log("highlightクラスが存在します");
            } else {
                console.log("highlightクラスが存在しません");
            }
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”myDiv”のdiv要素にhighlightクラスが存在するかどうかが確認され、結果がコンソールに出力されます。

以上の方法を使い分けることで、DOM要素のクラスを柔軟に操作することができます。次に、DOM要素のスタイルを変更する方法について解説します。

スタイルの変更

JavaScriptを使用してDOM要素のスタイルを動的に変更することで、Webページの見た目やレイアウトを柔軟に制御できます。ここでは、styleプロパティを使用した基本的なスタイル変更方法について説明します。

styleプロパティを使用する方法

styleプロパティを使用すると、要素のインラインスタイルを直接変更することができます。これにより、CSSプロパティを動的に設定することが可能です。

使用例

以下の例では、button要素をクリックすることで、div要素のスタイルを変更します。

<!DOCTYPE html>
<html>
<head>
    <title>Style Change Example</title>
</head>
<body>
    <div id="styledElement" style="color: black;">このテキストのスタイルを変更</div>
    <button onclick="changeStyle()">スタイルを変更</button>

    <script>
        function changeStyle() {
            let element = document.getElementById("styledElement");
            element.style.color = "blue";
            element.style.fontSize = "24px";
            element.style.backgroundColor = "lightgray";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”styledElement”のdiv要素の文字色が黒から青に、フォントサイズが24pxに、背景色がライトグレーに変更されます。

複数のスタイルを変更する

styleプロパティを使用すると、複数のスタイルプロパティを一度に変更することができます。以下の例では、複数のCSSプロパティを設定してスタイルを変更します。

使用例

以下の例では、button要素をクリックすることで、div要素の複数のスタイルプロパティを変更します。

<!DOCTYPE html>
<html>
<head>
    <title>Multiple Style Change Example</title>
</head>
<body>
    <div id="styledElement" style="color: black; margin: 10px;">このテキストの複数のスタイルを変更</div>
    <button onclick="changeMultipleStyles()">複数のスタイルを変更</button>

    <script>
        function changeMultipleStyles() {
            let element = document.getElementById("styledElement");
            element.style.color = "green";
            element.style.fontSize = "20px";
            element.style.padding = "15px";
            element.style.border = "2px solid red";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”styledElement”のdiv要素の文字色が黒から緑に、フォントサイズが20pxに、パディングが15pxに、ボーダーが赤の2pxの実線に変更されます。

スタイルのリセット

特定のスタイルプロパティをリセットして、デフォルトのスタイルに戻すことも可能です。以下の例では、特定のスタイルプロパティを空文字列に設定してリセットします。

使用例

以下の例では、button要素をクリックすることで、div要素のスタイルをリセットします。

<!DOCTYPE html>
<html>
<head>
    <title>Style Reset Example</title>
</head>
<body>
    <div id="styledElement" style="color: blue; font-size: 24px; background-color: lightgray;">このテキストのスタイルをリセット</div>
    <button onclick="resetStyle()">スタイルをリセット</button>

    <script>
        function resetStyle() {
            let element = document.getElementById("styledElement");
            element.style.color = "";
            element.style.fontSize = "";
            element.style.backgroundColor = "";
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”styledElement”のdiv要素の文字色、フォントサイズ、背景色がリセットされ、デフォルトのスタイルに戻ります。

以上のように、styleプロパティを使用することで、DOM要素のスタイルを柔軟に変更することができます。次に、DOM要素にイベントリスナーを追加する方法について解説します。

イベントリスナーの追加

JavaScriptを使ってDOM要素にイベントリスナーを追加することで、ユーザーの操作（クリック、入力、マウスオーバーなど）に応じた動作を実現できます。ここでは、addEventListenerメソッドを用いたイベントリスナーの追加方法について解説します。

addEventListenerメソッドの使い方

addEventListenerメソッドは、指定したイベントが発生したときに実行する関数を要素に追加します。このメソッドは、複数のイベントリスナーを同じ要素に追加することが可能で、柔軟なイベント処理を実現します。

使用例

以下の例では、button要素をクリックすることで、div要素にクリックイベントリスナーを追加します。

<!DOCTYPE html>
<html>
<head>
    <title>addEventListener Example</title>
</head>
<body>
    <div id="clickableElement">この要素をクリックしてください</div>
    <button onclick="addClickListener()">クリックリスナーを追加</button>

    <script>
        function addClickListener() {
            let element = document.getElementById("clickableElement");
            element.addEventListener("click", function() {
                element.textContent = "クリックされました";
            });
        }
    </script>
</body>
</html>

このコードでは、ボタンがクリックされると、idが”clickableElement”のdiv要素にクリックイベントリスナーが追加され、クリックされるとテキストが「クリックされました」に変更されます。

イベントリスナーの削除

不要になったイベントリスナーは、removeEventListenerメソッドを使って削除することができます。これにより、メモリリークや不要なイベント処理を防ぐことができます。

使用例

以下の例では、button要素をクリックすることで、div要素のクリックイベントリスナーを削除します。

<!DOCTYPE html>
<html>
<head>
    <title>removeEventListener Example</title>
</head>
<body>
    <div id="clickableElement">この要素をクリックしてください</div>
    <button onclick="addClickListener()">クリックリスナーを追加</button>
    <button onclick="removeClickListener()">クリックリスナーを削除</button>

    <script>
        function handleClick() {
            let element = document.getElementById("clickableElement");
            element.textContent = "クリックされました";
        }

        function addClickListener() {
            let element = document.getElementById("clickableElement");
            element.addEventListener("click", handleClick);
        }

        function removeClickListener() {
            let element = document.getElementById("clickableElement");
            element.removeEventListener("click", handleClick);
        }
    </script>
</body>
</html>

このコードでは、最初のボタンがクリックされるとクリックイベントリスナーが追加され、2つ目のボタンがクリックされるとそのイベントリスナーが削除されます。

他のイベントの例

addEventListenerメソッドは、クリックイベントだけでなく、様々なイベントに対応しています。以下は、マウスオーバーイベントの例です。

使用例

以下の例では、div要素にマウスオーバーイベントリスナーを追加します。

<!DOCTYPE html>
<html>
<head>
    <title>Mouseover Event Example</title>
</head>
<body>
    <div id="hoverElement" style="width: 200px; height: 100px; background-color: lightblue;">マウスをこの上に移動してください</div>

    <script>
        let element = document.getElementById("hoverElement");
        element.addEventListener("mouseover", function() {
            element.style.backgroundColor = "lightgreen";
        });

        element.addEventListener("mouseout", function() {
            element.style.backgroundColor = "lightblue";
        });
    </script>
</body>
</html>

このコードでは、マウスが要素に移動すると背景色がライトグリーンに変わり、マウスが離れるとライトブルーに戻ります。

以上のように、addEventListenerメソッドを使用することで、DOM要素に柔軟なイベント処理を追加することができます。次に、これまでの内容を確認するための演習問題を提示します。

演習問題

ここでは、これまで学んだJavaScriptによる基本的なDOM操作を実際に試してみるための演習問題を提示します。各演習問題を解きながら、DOM操作のスキルを実践的に磨きましょう。

演習1: 要素の取得とテキスト変更

以下のHTMLを使用して、JavaScriptでp要素のテキストを変更してください。

<!DOCTYPE html>
<html>
<head>
    <title>Exercise 1</title>
</head>
<body>
    <p id="myParagraph">このテキストを変更してください</p>
    <button onclick="changeParagraphText()">テキストを変更</button>

    <script>
        function changeParagraphText() {
            // ここにコードを追加
        }
    </script>
</body>
</html>

ヒント

getElementByIdメソッドを使用して要素を取得します。
textContentプロパティを使用してテキストを変更します。

演習2: 属性の変更

以下のHTMLを使用して、JavaScriptでimg要素のsrc属性とalt属性を変更してください。

<!DOCTYPE html>
<html>
<head>
    <title>Exercise 2</title>
</head>
<body>
    <img id="myImage" src="old_image.jpg" alt="古い画像">
    <button onclick="changeImageAttributes()">画像を変更</button>

    <script>
        function changeImageAttributes() {
            // ここにコードを追加
        }
    </script>
</body>
</html>

ヒント

getElementByIdメソッドを使用して要素を取得します。
setAttributeメソッドを使用して属性を変更します。

演習3: クラスの追加と削除

以下のHTMLを使用して、JavaScriptでdiv要素にクラスを追加・削除してください。

<!DOCTYPE html>
<html>
<head>
    <title>Exercise 3</title>
    <style>
        .highlight {
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div id="myDiv">この要素にクラスを追加・削除します</div>
    <button onclick="addClass()">クラスを追加</button>
    <button onclick="removeClass()">クラスを削除</button>

    <script>
        function addClass() {
            // ここにコードを追加
        }

        function removeClass() {
            // ここにコードを追加
        }
    </script>
</body>
</html>

ヒント

getElementByIdメソッドを使用して要素を取得します。
classListプロパティのaddメソッドとremoveメソッドを使用します。

演習4: スタイルの変更

以下のHTMLを使用して、JavaScriptでdiv要素のスタイルを変更してください。

<!DOCTYPE html>
<html>
<head>
    <title>Exercise 4</title>
</head>
<body>
    <div id="styledElement" style="color: black;">このテキストのスタイルを変更</div>
    <button onclick="changeStyle()">スタイルを変更</button>

    <script>
        function changeStyle() {
            // ここにコードを追加
        }
    </script>
</body>
</html>

ヒント

getElementByIdメソッドを使用して要素を取得します。
styleプロパティを使用してCSSスタイルを変更します。

演習5: イベントリスナーの追加

以下のHTMLを使用して、JavaScriptでdiv要素にクリックイベントリスナーを追加してください。

<!DOCTYPE html>
<html>
<head>
    <title>Exercise 5</title>
</head>
<body>
    <div id="clickableElement">この要素をクリックしてください</div>
    <button onclick="addClickListener()">クリックリスナーを追加</button>

    <script>
        function addClickListener() {
            // ここにコードを追加
        }
    </script>
</body>
</html>

ヒント

getElementByIdメソッドを使用して要素を取得します。
addEventListenerメソッドを使用してイベントリスナーを追加します。

以上の演習問題を解くことで、JavaScriptによる基本的なDOM操作の理解が深まるでしょう。次に、この記事のまとめと今後の学習に向けたアドバイスを記載します。

まとめ

本記事では、JavaScriptによる基本的なDOM操作について学びました。DOMの基本概念から始まり、要素の取得方法、テキストや属性の変更、クラスの追加・削除、スタイルの変更、そしてイベントリスナーの追加方法まで、さまざまなテクニックを具体例を通じて解説しました。これらの技術を習得することで、Webページをより動的でインタラクティブなものにすることができます。

次のステップとして、この記事の演習問題を解きながら、実際に手を動かしてコードを書くことをお勧めします。また、さらに高度なDOM操作やJavaScriptの機能について学び、実践していくことで、Web開発スキルを一層向上させることができるでしょう。継続的な学習と実践が、プロフェッショナルなWeb開発者への道を切り開きます。