ゼロから始めるJavaScript講座Vol16 DOM操作


ゼロから始めるJavaScript講座Vol16 DOM操作
目次
  1. ゼロから始めるJavaScript講座 DOM操作
  2. DOMからHTMLやCSSを操作
  3. 課題

ゼロから始めるJavaScript講座 DOM操作

DOMからHTMLやCSSを操作

実際にDOMを利用し、HTMLやCSSをJavaScriptから操作してみましょう。 ファイル名: dom.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>DOMからHTMLやCSSを操作</title>
</head>
<body>
    <div>ボックス0</div>
    <div id="box1">ボックス1</div>
    <div id="box2">ボックス2</div>
    <div id="box3">ボックス3</div>
    <script>
        var box1 = document.getElementById('box1'); // id="box1"の要素を取得
        var box2 = document.getElementById('box2'); // id="box2"の要素を取得
        var box3 = document.getElementById('box3'); // id="box3"の要素を取得

        box1.innerHTML = '文字列を入れ替え'; // id="box1"の要素内容を変更
        box2.innerHTML = '<a href="http://codecamp.jp/">CodeCamp</a>'; // id="box2"の要素内容を変更
        box3.style.color = '#ff0000'; // id="box3"の要素CSSを変更
    </script>
</body>
</html>

javascript-dom2-639

DOMを利用し、HTML要素の内容変更やCSSプロパティの値変更を行っています。

javascript-dom2-2-639

getElementByIdメソッドは引数にHTMLのid属性の値を指定することで、値が一致した要素をdocumentオブジェクト内から取得することができます。

javascript-dom2-3-639

取得した要素のオブジェクトには様々なプロパティがあり、innerHTMLプロパティは[要素の内容]が値となります。innerHTMLプロパティの値を上書きすることで、要素の内容が変更されます。

javascript-dom2-4-639

styleというプロパティもあり、この中にCSSに関するデータがたくさん入っています。このデータを書き換えることで、CSSが変更されます。今回はcolorプロパティの値を書き換え文字色を赤にしています。

このようにgetElementByIdメソッドでdocumentオブジェクトから特定の要素を取得し、取得した要素のプロパティの値を変更することで、HTMLやCSSをJavaScriptから操作することができます。

各要素のプロパティとメソッドを取得する方法はgetElementByIdメソッド以外にもあります。

メソッド 取得する方法
getElementById(id) 指定したidを属性値に持つ要素を検索
getElementsByClassName(class) 指定したclassを属性値に持つ要素を全て検索
querySelector(selector) 指定したCSSセレクタを持つ要素のうち1つ目を検索
querySelectorAll(selector) 指定したCSSセレクタを持つ要素のを全て検索

例えばgetElementsByClassNameメソッドはid属性ではなくclass属性の値を指定し、値が一致した要素をdocumentオブジェクト内から取得することができます。

課題

DOMからHTMLとCSSを操作により、以下に示す画像と同じ内容になるよう追記してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>challenge_dom</title>
</head>
<body>
    <div id="large">
        <div id="box1">1行目(赤文字)</div>
        <div id="box2">2行目(白文字)</div>
    </div>
    <script>
        // ここに追記
    </script>
</body>
</html>

javascript-dom2-5-639

#largeの背景は黒にしています。

NEXT LESSON ☛ DOM操作〜イベントハンドラ〜

PREV LESSON ☛ DOMとは


CodeCampus編集部
この記事を書いた人
CodeCampus編集部
まずは7日間お試し!人気プログラミング講座を無料公開中
オンライン・プログラミングレッスンNo.1のCodeCamp