更新日: 2017年04月11日
公開日: 2015年12月05日

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

ゼロから始めるJavaScript講座　DOM操作
DOMからHTMLやCSSを操作
課題

ゼロから始める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>

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

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

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

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>