034.4 WebサイトのコンテンツとスタイリングのJavaScript操作（1）

Web Development Essentials | 2024/07/17

DOMを使うと、HTMLとCSSを書き換えることができるため、動的なWebページの作成や、ユーザーの操作に応じたWebページの変更が容易に行うことができます。本章では、DOMの仕組みを理解し、JavaScriptを使ったDOMの操作方法について学習します。なお、内容が豊富であるため、記事を二部に分けて詳しく説明します。

DOMとは

DOMとは、ドキュメントオブジェクトモデル（Document Object Model）の略で、JavaScriptを使ってHTMLを取り扱うためのプログラミングインターフェースです。DOMはHTMLドキュメントに含まれる要素をオブジェクトとして扱います。また、ドキュメントを構成するオブジェクトのことを「ノード」と呼び、HTMLのタグにある属性やテキストなどが全てDOMのノードとして取り扱われます。DOMによって加えられた変更は、すぐにWebページに反映されます。

以下はDOMの操作によって<body>タグ内の要素をコンソールに表示する記述例です。

■記述例（HTML）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>DOMの操作</title>
    </head>
    <body>
        <h1>操作前の要素</h1>
        <p id="event">操作前の要素の中身</p>
        <script>
            let body = document.getElementsByTagName("body")[0];
            console.log(body.innerHTML);
        </script>
    </body>
</html>

DOMはHTMLを「DOMツリー」という形で表現しており、「document」というオブジェクトが最上位のDOM要素と位置づけられています。このオブジェクトから他のすべての要素が分岐し、各ノードが親子関係を持って、階層構造が形成されています。

上記の記述例（HTML）の「DOMツリー」は以下のように表現されます。

DOMはノードの階層構造や関係性を把握することで、特定のテキストや要素にアクセスし、操作することができます。本試験では、DOMの仕組みについて問われることはないかと思いますが、次項からはDOMを使って基本操作を学びますので、しっかりと理解しておきましょう！

特定の要素の選択

DOMでは、documentオブジェクトを介してHTML要素を選択し操作するために、様々なメソッドが用意されています。これらのメソッドを理解し、適切に使いこなすことで、HTMLとJavaScriptを組み合わせた動的なWebページを作成することができます。

メソッドを使用するには「document」と「メソッド名」をドットで繋げて記述します。主なメソッドには以下のものがあります。

getElementsByTagName()

概要：指定されたタグ名を持つすべての要素を取得し、HTMLCollection（配列のようなオブジェクト）として返します。getElementsByTagName()メソッドは引数にタグ名をシングルクォーテーション（またはダブルクォーテーション）で囲み、HTMLCollectionから要素を取り出すには、該当するHTMLの記述された順番に従ってインデックスを指定します。<body>タグのようなドキュメント内に1つしか存在しないタグであってもHTMLCollectionとして取得されます。

innerHTML

概要：該当する要素のHTMLを取得したり、設定することができます。HTML要素の中身を自由に変更する事で、動的なWebページを作成することができます。
以下はgetElementsByTagName()を使って、2番目のp要素のテキストを書き換えた記述例と表示結果です。

■記述例（HTML）

<body>
    <div>div要素</div>
    <p>p要素1</p>
    <p>p要素2</p>
    <script>
        let element = document.getElementsByTagName("p")[1];/* 2番目のp要素を取得 */
        element.innerHTML = "p要素2の中身を変更";/* p要素の中身（テキスト）を変更 */
    </script>
</body>

上記では、getElementsByTagName(”p”)にインデックスの1番目を指定することで、ソースコードに記述された2番目のp要素「p要素のテキスト」を変数elementとして定義しています。

更にinnerHTMLを使用して「p要素2の中身を変更」というテキストを代入することで、要素内のテキストが書き換えられWebページに変更が反映されて表示されます。

getElementById()

概要：指定したid属性を持つ要素を返します。引数には指定するid名を記述します。id属性はドキュメント内で一意であり、もし重複したid名がある場合はソースコード内で最初に現れる要素のみを返します。また、一致するid名がない場合はnullを返します。
以下はgetElementById()を使ってid名がorangeの要素のテキストを書き換えた記述例と表示結果です。

■記述例（HTML）

<body>
    <div id="apple">りんご</div>
    <div id="orange">みかん</div>
    <div id="banana">バナナ</div>
    <script>
        let element = document.getElementById("orange");
        element.innerHTML = "オレンジ";
    </script>  
</body>

上記では、idが「orange」の要素を取得し、その要素内のテキストを「みかん」から「オレンジ」に更新しています。

getElementsByClassName()

概要：指定されたクラス名を持つすべての要素をHTMLCollectionとして返します。getElementsByClassName()メソッドは引数にクラス名を記述し、HTMLCollectionから要素を取り出すには、getElementsByTagName()と同様に、該当するHTMLの順番に沿って、インデックスを指定します。
以下はgetElementsByClassName()を使って、1番目のvegetablesクラスを持つ<div>タグ内のテキストを書き換えた記述例と表示結果です。

■記述例（HTML）

<body>
    <div class="fruits">りんご</div>
    <div class="fruits">みかん</div>
    <div class="vegetables">ナス</div>
    <div class="vegetables">きゅうり</div>
    <script>
        let element = document.getElementsByClassName("vegetables")[0];
        element.innerHTML = "キャベツ";
    </script>    
</body>

上記では、document.getElementsByClassName(”vegetables”)を使用して、更にインデックスに0を指定することで、クラス名にvegetablesを持つ全ての要素の中から1つ目の要素を指定して、テキストを変更しています。

querySelector()

概要：指定されたセレクタまたはセレクタ群に一致する、文書内の最初の要素を返します。クラス名で指定する場合は引数に「.(ドット)」で指定します。
以下はquerySelector()を使って「fruits」クラスの最初の要素を書き換えた記述例と表示結果です。

■記述例（HTML）

<body>
    <div class="fruits">
        <p>りんご</p>
        <p>みかん</p>
    </div>
    <div class="fruits">
        <p>バナナ</p>
        <p>ぶどう</p>
    </div>
    <script>
        let element = document.querySelector(".fruits");
        element.innerHTML = "<p>メロン</p>";
    </script>    
</body>

上記のように記述すると、HTML要素（タグ）も含めた文字列の変換が行われ、「りんご」と「みかん」が「メロン」に書き換えられます。

なお、以下のようにCSSの子孫セレクタを指定すると、要素のテキストのみを変更することもできます。（CSSセレクタの指定方法はこちらの記事からご確認ください。）

■記述例（HTML）

<body>
    <div class="fruits">
        <p>りんご</p>
        <p>みかん</p>
    </div>
    <div class="fruits">
        <p>バナナ</p>
        <p>ぶどう</p>
    </div>
    <script>
        let element = document.querySelector(".fruits p");
        element.innerHTML = "メロン";
    </script>    
</body>

上記では、querySelector(”.fruits p”)を使って1つ目のfruitsクラスに含まれる最初のタグを選択し、テキストの内容を「りんご」から「メロン」に変更しています。

querySelectorAll()

概要：指定されたセレクタに一致する全ての要素を取得し、それらをNodeList（配列のようなオブジェクト）として返します。
以下はquerySelectorAll()を使って、fruitsクラスを持つ2番目の要素を書き換えた記述例と表示結果です。

■記述例（HTML）

<body>
    <div class="fruits">りんご</div>
    <div class="fruits">みかん</div>
    <div class="fruits">バナナ</div>
    <script>
        let element = document.querySelectorAll(".fruits")[1];
        element.innerHTML = "メロン";
    </script>    
</body>

前述のとおり、querySelectorAll()メソッドはHTMLCollectionではなく、NodeListとしてオブジェクトを返します。HTMLCollectionやNodeListでは使用できるメソッドや要素の増減時の挙動に違いがありますが、どちらも該当するHTMLの記述順に従ってインデックスを指定します。
そのため、インデックスに1を指定すると、クラス名にfruitsをもつ全ての要素の中から、2つ目に記述されている要素の内容が変更されています。

上記のように、HTMLの要素の操作には、多くのメソッドが用意されています。本試験ではこれらのメソッドの記述方法について問われやすいかなと思うので、しっかりと覚えましょう！後半では「属性の操作」と「クラスの操作」について学習します。

それでは、今回はここまで〜。

<<前のページ

目次に戻る

次のページ>>