JavaScript でDOM ２

　今回もDOMという概念を学んでいきます。

１　ｉｄセレクタを使ってみる

　下は前回のものです。

HTML（一部）

<body>
    <ul>
        <li>１年生</li>
        <li>２年生</li>
        <li>３年生</li>
    </ul>

    <script>
        let grade = document.querySelector("ul");
        let add = document.createElement("li");
        add.textContent = "４年生";
        grade.appendChild(add);
    </script>
</body>

ブラウザ

 ・１年生
 ・２年生
 ・３年生
 ・４年生

　追加するのはいいのですが、特定の項目を操作するにはどうしたらいいのでしょうか。

HTML（一部）

<body>
    <ul id = "schoolyear">
        <li id =  "schoolyear1">１年生</li>
        <li id =  "schoolyear2">２年生</li>
        <li id =  "schoolyear3">３年生</li>
    </ul>

    <script>
        let grade = document.getElementById("schoolyear");
        let add = document.createElement("li");
        add.textContent = "４年生";
        add.id = "schollyear4";
        grade.appendChild(add);
    </script>
</body>

ブラウザ

 ・１年生
 ・２年生
 ・３年生
 ・４年生

　idセレクタを使います。これは要素を区別するためのもので、ページ内には一つしか記述することができないものです。

　これを使用して要素を特定するのですね。
　つまり getElementById メソッドは schoolyear という引数を指定することにより、オブジェクトを指定しているのです。
　しかし、項目の追加なので、最初の例とあまり変わりはありませんね。

　そこで、テキストの変更の例を見てみましょう。

HTML（一部）

<body>
    <ul id = "schoolyear">
        <li id =  "schoolyear1">１年生</li>
        <li id =  "schoolyear2">２年生</li>
        <li id =  "schoolyear3">３年生</li>
    </ul>

    <script>
        let schoolyear3 = document.getElementById("schoolyear3");
        schoolyear3.textContent = "さんねんせい";
    </script>
</body>

ブラウザ

 ・１年生
 ・２年生
 ・さんねんせい

　これは Script 以下の２行目で Id “schoolyear3” を指定し、オブジェクトを変数に代入しています。
　そして、そのテキストを「さんねんせい」に変更しているのですね。

　次は削除です。

HTML（一部）

<body>
    <ul id = "schoolyear">
        <li id =  "schoolyear1">１年生</li>
        <li id =  "schoolyear2">２年生</li>
        <li id =  "schoolyear3">３年生</li>
    </ul>

    <script>
        let schoolyear3 = document.getElementById("schoolyear3");
        schoolyear3.remove();
    </script>
</body>

ブラウザ

 ・１年生
 ・２年生

　この例でも同様にidセレクタでオブジェクトを指定して、remove メソッドにより削除しています。

３　次回

　さて、ここまで JavaScript の基本的な事項を確認してきました。
　次回からは、もう少しステップアップして実践的な例をみていきます。

１ ｉｄセレクタを使ってみる

HTML（一部）

ブラウザ

HTML（一部）

ブラウザ

HTML（一部）

ブラウザ

HTML（一部）

ブラウザ

３ 次回

カテゴリー

更新記事

タグ

１　ｉｄセレクタを使ってみる

３　次回