【JavaScript入門】DOMとHTML/CSSの操作

これまではJavaScriptの操作の結果をブラウザのJavaScriptコンソールに表示してきました。

ここではJavaScriptを使って、HTMLやCSSを操作してWebページの内容を変更する方法をみていきます。

この操作をするためにはDOMという仕組みとWebページのオブジェクトについて理解しておくことが必要です。

Webページとオブジェクト
HTML要素の変更
1. 要素の内容の変更 – getElementById()とinnerHTML
2. 要素のスタイルの変更 – styleプロパティ
HTML要素の追加と削除
1. createElement(), setAttribute(), insertBefore()
2. parentElementとremoveChild()
CSSセレクタで要素を取得
まとめ

Webページとオブジェクト

ここで扱うWebページとしてローカルファイルにhtmlファイルとJavaScriptファイルを用意します。htmlファイルはindex.htmlとして次のようなコードにしてみました。

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <title>JavaScriptの基礎</title>
    </head>
    <body>
        <h1>JavaScriptの基礎</h1>
        <div id="textChange"><p>Document Object Model(DOM)</p></div>

        <section class="content">
          <h2>内容</h2>
          <p>ここではDOMの操作を扱います。</p>
        </section>

    <script type="text/javascript" src="script.js"></script>
    </body>
</html>

script.jsファイルは現時点では何も中にはコードは書いていません。

これをブラウザで表示するとこうなります。

thisキーワードを扱った時に、windowオブジェクトというものが出てきましたが、このWebページとオブジェクトの関係は次のように表すことができます。

ブラウザ自体がwindowオブジェクトであり、コンソールの情報はcosoleオブジェクト、Webページの情報はdocumentオブジェクトにまとめられているということになります。

また、このdocumentオブジェクトは次のようなHTML構造になっていて、これを利用するための様々なメソッドが用意されています。

このHTMLの構造は、次のような要素オブジェクトをツリー状に繋げたものです。

このHTMLの構造化表現をDOM（Document Object Model）といい、このDOMをメソッドで操作することによって、HTML文書を変更することができるのです。

HTML要素の変更

では、用意したindex.htmlについて変更を加えていこうと思います。

JavaScriptを使ってDOM操作をしてみましょう。

要素の内容の変更 – getElementById()とinnerHTML

index.htmlにはJavaScriptで操作できるように<div id=”textChange”>と要素にidをつけています。このidを使って、script.jsファイルに次のように書き込むことで、htmlの要素を変更していくことになります。

var textChange = document.getElementById('textChange');
textChange.innerHTML = '<h2>DOMの操作</h2>';

documentにドット（.）接続でメソッドgetElementById()を使って、特定の要素を取り出しています。このとき、HTML文書の中で使っている要素のidを指定して要素を取得しています。

取り出したHTML要素を変更するには、innerHTMLプロパティを使って、内容を変更して上書きすることになります。

ブラウザを更新してみます。

<p>Document Object Model(DOM)</p>で記述していた部分が、<h2>DOMの操作</h2>に書き換えらえているのが確認できます。このようにしてHTMLの要素を変更していくわけです。

要素のスタイルの変更 – styleプロパティ

さらに要素を変更してみましょう。script.jsファイルに追記してみます。

var textChange = document.getElementById('textChange');
textChange.innerHTML = '<h2>DOMの操作</h2>';
textChange.style.fontSize = '30px';
textChange.style.color = '#ffff00';
textChange.style.backgroundColor = '#0000cd';

3行追加しています。ここではstyleプロパティを使ってスタイルを変更しています。

fontSizeを使って30pxに、colorを使って文字を黄色に、backgroundColorを使って背景を青色にしています。ここで注意が必要なのは、CSSでは「font-size」のようにハイフン（-）を使っているところをキャメルケースで書くという点です。

ファイルを保存してブラウザを更新します。

文字サイズ、文字色、背景色が変更されたのがわかります。

HTML要素の追加と削除

ここまでは、すでにあるHTMLの要素を変更して書き換えるというDOM操作をしてきました。

JavaScriptを使って、今度は新たに要素を作って追加していくという操作をしてみます。

createElement(), setAttribute(), insertBefore()

これまでのスクリプトファイルに次のように追記してみます。

var textChange = document.getElementById('textChange');
textChange.innerHTML = '<h2>DOMの操作</h2>';
textChange.style.fontSize = '30px';
textChange.style.color = '#ffff00';
textChange.style.backgroundColor = '#0000cd';

// 要素を追加
var element1 = document.createElement('div');
element1.setAttribute('id','element1');
element1.innerHTML = '<h3>Document Object Model</h3>';
textChange.insertBefore(element1, null);

createElement()を使って新たにタグを指定します。ここではdivタグを作りました。これに属性を指定する為にsetAttribute()を使って、属性名と属性値を渡しています。ここではidとelement1としています。innerHTMLプロパティを使って、書き込む内容を指定します。すでにある構造の要素のどこに新たな要素を追加するかをここではinsertBefore()を使って決定します。ここでは単に追加するだけなのでnullとすることで要素の一番最後になります。

ブラウザを更新してみます。

要素が追加されているのがわかりました。

さらに要素を追加してみましょう。

var textChange = document.getElementById('textChange');
textChange.innerHTML = '<h2>DOMの操作</h2>';
textChange.style.fontSize = '30px';
textChange.style.color = '#ffff00';
textChange.style.backgroundColor = '#0000cd';

// 要素を追加
var element1 = document.createElement('div');
element1.setAttribute('id','element1');
element1.innerHTML = '<h3>Document Object Model</h3>';
textChange.insertBefore(element1, null);

// 要素をさらに追加
var element2 = document.createElement('div');
element2.setAttribute('id','element2');
element2.innerHTML = '<p>HTML/CSSの操作</p>';
textChange.insertBefore(element2, element1);

やっていることは同じですが、insertBerore()で新しい要素を入れる位置を、先ほど追加した要素の前に指定しています。

表示するとこうなります。

前に追加した要素の上側に新たな要素が追加されているのがわかります。

parentElementとremoveChild()

ここまで新たに要素を追加してきましたが、今度は要素の削除をやっていきます。

これまでのコードに2行追記してみます。

var textChange = document.getElementById('textChange');
textChange.innerHTML = '<h2>DOMの操作</h2>';
textChange.style.fontSize = '30px';
textChange.style.color = '#ffff00';
textChange.style.backgroundColor = '#0000cd';

// 要素を追加
var element1 = document.createElement('div');
element1.setAttribute('id','element1');
element1.innerHTML = '<h3>Document Object Model</h3>';
textChange.insertBefore(element1, null);

// 要素をさらに追加
var element2 = document.createElement('div');
element2.setAttribute('id','element2');
element2.innerHTML = '<p>HTML/CSSの操作</p>';
textChange.insertBefore(element2, element1);

// 要素の削除
parent = element1.parentElement;
parent.removeChild(element1);

削除する要素の親要素を探す為にparentElementを使います。これで指定の要素（子要素）の親要素のオブジェクトを取得することができます。この親要素からremoveChild()を使って削除する子要素指定することで、要素の削除ができます。

ブラウザで確認してみます。

指定した要素が削除できているのがわかります。

CSSセレクタで要素を取得

これまではid属性を使って要素を取得していましたが、クラス名や特定のタグで取得する必要も出てきます。

ここではCSSで装飾する要素を、CSSセレクタを使って指定してみましょう。CSSセレクタで要素を一つ取得するにはquerySelectorメソッドを使います。

index.htmlの中の次の部分を利用します。

        <section class="content">
          <h2>内容</h2>
          <p>ここではDOMの操作を扱います。</p>
        </section>

ここで指定してるクラス名を手がかかりに、要素を取得して行きます。

これまでのスクリプトファイルに次のように3行追記します。

var textChange = document.getElementById('textChange');
textChange.innerHTML = '<h2>DOMの操作</h2>';
textChange.style.fontSize = '30px';
textChange.style.color = '#ffff00';
textChange.style.backgroundColor = '#0000cd';

// 要素を追加
var element1 = document.createElement('div');
element1.setAttribute('id','element1');
element1.innerHTML = '<h3>Document Object Model</h3>';
textChange.insertBefore(element1, null);

// 要素をさらに追加
var element2 = document.createElement('div');
element2.setAttribute('id','element2');
element2.innerHTML = '<p>HTML/CSSの操作</p>';
textChange.insertBefore(element2, element1);

// 要素の削除
parent = element1.parentElement;
parent.removeChild(element1);

// CSSセレクタ
var element3 = document.querySelector('.content p');
element3.style.fontSize = '20px';
element3.style.color = '#ff0000';

querySelector()を使って、先ほどのクラス名をドットで指定し、スペースを開けてここでは<p>要素を指定して取得しています。CSSセレクタの記述ですね。

これで取得した要素をstyleで文字サイズと文字色を変更しています。

ブラウザで確認してみます。