要素の取得 document.getElement…

ちょっとした便利な小技

毎回 index.html と main.js を作成するわけですが、実は 一部の手順をスキップ することができます。

【手順】
①まず、 index.html を作成します。VSCodeなら ! + Enter で簡単に基本の形は作れますね。
②scriptタグで対象ファイルを読み込む時、 <script src="js/main.js"></script> とします。
（この時 jsフォルダ 、main.js は作成していなくてOKです）
③js/main.jsにカーソルを合わせると「 リンク先を表示(cmd + クリック) 」と表示されるのでクリックします。
すると「ファイルが無いから表示できませんよ」と言われますが「ファイルの作成」をクリックすると、階層まで考慮したフォルダとファイルを自動的に作成してくれます。

要素の取得

JavaScript側からHTMLに対して指示を出すためには「 要素を取得する 」→「 取得した要素を操作する 」といった流れが基本になります。
要素を取得するには、いくつか方法があるので一つずつ見ていきます。

document.getElementById

document.getElementById('') はHTMLで指定されている「 id 」を頼りに要素を取得する方法です。
('') の中にid名を書くことで要素を取得することができます。

今回「Hello World!」と表示されているdivタグのidは target なので document.getElementById('target') とすれば要素を取得できます。

取得した要素を変数targetに代入して、console.logで中身を確認してみましょう。

<!-- <index.html> -->
<body>
    <div id="target">Hello World!</div>
    <script src="js/main.js"></script>
</body>

// main.js
let target = document.getElementById('target');
console.log(target);

では、document.getElementByIdで要素が取得できると何ができるのか…?
「 ボタンがクリックされたら、文字を変える 」
というプログラムを作ってみましょう。（少しだけ、初めて見る記述が出てきます）

<!-- HTML -->
<body>
    <!-- pタグに、targetというidをつけます。 -->
    <p id="target">Hello World!</p>

    <!-- onclick属性を使って、クリックされたら「myfunc」という関数を実行するように設定
    myfuncの処理はmain.js側で書きます。 -->
    <input type="button" value="クリック！" onclick="myfunc()">
    <script src="js/main.js"></script>
</body>

// main.js
// 「myfunc」という関数を用意。
function myfunc() {

    // idが「target」の要素を取得して、変数changeに代入
    let change = document.getElementById('target');

    // textContentを使って「こんにちは」で書き変える
    change.textContent = 'こんにちは!';
}

処理の流れは以下のような感じです。

【onclickで起動する関数を指定】

【JavaScript側からHTMLのid、targetを指定】

【idで取得した要素を変数changeに代入】

【textContentを使って、テキストを書き換える】

「Hello World!」の文字が、ボタンを押すと「こんにちは!」に変わりました。

ボタンを押すと、画面の表示が切り替わるという処理を実装できるようになりました。
少しずつJavaScriptっぽくなってきましたね。

document.getElementsByTagName

document.getElementsByTagNameはその名の通り タグを指定して要素を取得します。
よく見ると、 getElementsと複数形になってます。
これは、HTMLの中に同じタグの名前は複数存在することが許可されているからです。

idは一意のものしか存在できませんが、h1やp、divなどのタグは同じものがいくつ出てきても問題ありませんよね。
そのため、 Elements と複数形になっています。一文字でも間違えると、上手く取得できないので注意してください。

（例：h1タグの要素だけを取得します）

<!-- <index.html> -->
<body>
    <h1>Hello World!</h1>
    <p>Let's study JavaScript</p>

    <h1>こんにちは！</h1>
    <p>JavaScriptを勉強しましょう</p>

    <script src="js/main.js"></script>
</body>

h1のタグを持っている要素を全て取得して、変数elemsに代入します。
この時「 NodeList 」という配列に似た形で取得できます。
厳密には配列ではないのですが、同じように添字（インデックス）を指定してアクセスすることができます。
なのでconsole.logで確認する時は以下のようにしてください。

// main.js
let elems = document.getElementsByTagName('h1');
//HTMLを上から順番に探した時に、最初に見つかったh1タグが0番目の要素として取得できます。
console.log(elems[0]);
console.log(elems[1]);

これで、pタグは無視されて、指定したh1タグだけが取得できているのが確認できます。

document.getElementsByName

続いて、nameで要素を探す方法です。
以下の例では、name属性がboxの要素を取得しています。

<!-- <index.html> -->
<body>

    <div name="box">BOX1</div>
    <div name="box">BOX2</div>
    <div name="box">BOX3</div>
    <div name="elem">BOX4</div>

    <script src="js/main.js"></script>
</body>

今回は box と言うname属性を指定しています。
「 BOX４ 」だけはnameが elem で対象外なので取得できないはずです。
確認のために、今度はfor文を使って取得できた中身の要素を全部出して見てみましょう。

let boxs = document.getElementsByName('box');
for (let i = 0; i < boxs.length; i++) {
    console.log(boxs[i]);
}

document.getElementsByClassName

では最後にClass名から要素を取得する方法です。
と言っても、今まで見てきた 〜ByTagName や 〜ByNameと使い方は同じです。

<!-- <index.html> -->
<body>

    <div class="box">BOX1</div>
    <div class="box">BOX2</div>
    <div class="box">BOX3</div>
    <div class="elem">BOX4</div>

    <script src="js/main.js"></script>
</body>

// main.js
let boxs = document.getElementsByClassName('box');
//for文を使っても良いのですが、ここでは単純に一つずつ出力しています。
console.log(boxs[0]);
console.log(boxs[1]);
console.log(boxs[2]);

まとめ

以下に使い分けを載せておきます。

何から取得するか	書き方	注意点
id	document.getElementById	idはHTMLに一つしか存在しない
タグ	document.getElementsByTagName	Elements と複数形で書く
name	document.getElementsByName	Elements と複数形で書く
class	document.getElementsByClassName	Elements と複数形で書く

今回は、 「要素を取得する」 という内容をメインにやっていきました。

idから要素を取得する話のところで、ボタンを押して文字を変化させるプログラムを作成しました。
今後、触れていく「取得した要素を操作」するというイメージはこれと同じです。

課題

理解度チェック
JavaScript→2-1というフォルダの中に作成してください。
出力の結果はconsole.logで表示してください。

確認方法は、htmlの画面をリロードして確認してください。
（この問題は、ファイルを一つにするために、HTMLの中でCSSとJavaScriptを読み込む書き方をしています。以下のコードをコピーして問題を解いてください。）

問1：JavaScriptから要素を操作して、四角の色が赤色に変わるようにしてください。
※色を変える方法は、このカリキュラムでは触れていないので、調べて解いてみてください。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <script>
        //問題①：idで要素を取得して、背景色を赤色に変更する処理を記述してください。

    </script>
</body>
</html>