DOM/JavaScript

ブラウザ上に表示された文字を更新したり、削除したり、見えなくしたりしたい時があります。

本項では、DOMについて説明します。

DOMの概要

 DOMはDocument Object Modelの略で、HTMLやCSSの内容を書き換える事が出来ます。

DOMの概要

 例えば、DOMでは要素をオブジェクトとして扱います。このため、要素に付随する情報をプロパティとして使えるようになり、値を参照したり、変更したり出来るようになります。

HTMLやCSSの内容をオブジェクトとして扱う

 オブジェクトのため、メソッドを使う事も出来ます。

文章の書き換え

 DOMを使って、HTMLに記述された文章を書き換える方法は、以下の通りです。

【HTML文章の書き換え方法】
<p id ="dom-test">これはテストです。</p>

<script>
var x = document.getElementById("dom-test");
x.innerHTML = x.innerHTML + "JavaScriptで追記しました。";
</script>

 赤字部分は、id:dom-testをオブジェクトとしてxから参照できるようにしています。

 青字のinnerHTMLはオブジェクトのプロパティで、テキスト部分の「これはテストです。」が該当します。このため、「JavaScriptで追記しました。」が追加され、以下のように表示されます。

これはテストです。

 フォーム部品のボタン等と組み合わせると、以下のようにボタンをクリックした時だけ文章を変更する事も出来ます。

これはテストです。

 上記は、以下のように記述しています。

【DOMとフォームの組み合わせ例】
<script>
function testfunc() {
    var x = document.getElementById("dom-test2");
    x.innerHTML = "JavaScriptで更新しました。";
}
</script>

<form action="#" name="form1">
<button type="button" onclick="testfunc();">テキスト更新</button>
</form>
<p id ="dom-test2">これはテストです。</p>

 赤字部分は、テキストを書き換える処理を関数にしています。青字部分では、ボタンがクリックされると関数が呼び出されるようにしています。

 尚、innerHTMLではタグが解釈されます。このため、途中で改行が必要な時は、<br>が使えます。タグを解釈させたくない場合、x.textContent = "改行は<br>を使います";等と記述します。

DOMツリー

 文書をオブジェクトとして作成し、要素に取り込んで書き換える方法もあります。

【テキストノード追加方法】
<p id ="dom-test">これはテストです。</p>

<script>
var y = document.createTextNode("JavaScriptで追記しました。");
var x = document.getElementById("dom-test");
x.appendChild(y);
</script>

 赤字の要素は、DOMでは要素ノードと呼ばれます。この要素ノードには、子ノードとしてテキストノードが存在しています。「これはテストです。」の部分です。

 青字部分は、文章をテキストノードとして作成しています。緑字部分は、dom-testの子ノード(これはテストです。)に、作成したテキストノードを追加しています。このため、上記は「これはテストです。JavaScriptで追記しました。」と表示されます。この方法も、タグは解釈されません。

 x.removeChild(x.childNodes[0]);を実行すると、テキストノードを削除出来ます。つまり、文章を削除出来ます。又、x.parentNode.removeChild(x);を実行すると、要素ノード自体を削除出来ます。

 要素ノードとテキストノードは親子関係です。<p>を<div>の入れ子にすると、更に親子関係が構成されます。これらは全てオブジェクトで、ドキュメント全体は以下のような親子関係になっています。

DOMツリー

 このように、ドキュメントはオブジェクトツリーになっており、DOMツリーと呼ばれます。

 ツリー構造のため、要素ノードはdocument.getElementsByTagName("div")[1].getElementsByTagName("p")[0];等と指定も出来ます。[]内の数字は0から数えるため、2番目のdivの中の1番目のpを示しています。

属性変更

 画像を挿入する時、<img src="ファイル名" alt="説明">等と記述しますが、srcやaltは属性と呼ばれます。DOMを利用して属性を変更すると、画像等を変更する事が出来ます。

【属性変更方法】
<img src="旧ファイル名" alt="" id="dom-test">

<script>
var x = document.getElementById("dom-test");
x.src = "新ファイル名";
</script>

 赤字部分は、要素ノードのプロパティsrcを変更する事で、属性を変更しています。他にはa要素のhref属性を変更すると、リンク先を変える事も出来ます。又、class属性も変更出来るため、適用されているスタイルを変更する事も出来ます。以下は例です。

【クラス変更方法】
<style type="text/css">
.red { color:red; }
.blue { color:blue }
</style>

<p id="dom-test" class="red">これはテストです。</p>

<script>
var x = document.getElementById("dom-test");
x.className = "blue";
</script>

 赤字部分でp要素のクラスとしてredが指定されていますが、青字部分でblueに書き換えています。このため、文字は青で表示されます。

 フォームのボタン等と組み合わせると、ボタンをクリックする度に画像や色を変更するスクリプトが作成出来ます。

styleプロパティ

 スタイルを変更するもう1つの方法がstyleプロパティを使う方法です。

【CSSプロパティ変更方法】
<p id="dom-test" style="color:red;">これはテストです。</p>

<script>
var x = document.getElementById("dom-test");
x.style.color = "blue";
</script>

 赤字部分がCSSプロパティのcolorで、blueの値を代入しています。これにより、文字は青で表示されます。styleプロパティを使うと、多くのCSSプロパティの値を書き換える事が出来ます。

 もう1つの例です。

【表示の切替】
<form action="#" name="form1">
<button type="button" onclick="dom_test()" name="button1">表示切替</button>
</form>
<p id="dom-test1">これはテストです。</p>
<p id="dom-test2" style="display:none;">JavaScriptで表示されます。</p>

<script>
function dom_test() {
    var x = document.getElementById("dom-test1");
    var y = document.getElementById("dom-test2");
    x.style.display = "none";
    y.style.display = "block";
}
</script>

 赤字部分はボタンの作成です。ボタンがクリックされるとdom_test関数が呼び出されます。

 青字部分の2行目はdisplay:noneなので、最初はid:dom-test2が表示されません。id:dom-test1の「これはテストです。」だけが表示されます。

 緑字部分ではid:dom-test1とdom-test2を取り込んで、xとyに代入しています。又、displayを書き換える事でdom-test1を表示せず、dom-test2を表示するように切り替えています。

 これは、以下のように表示されます。

これはテストです。

 「表示切替」ボタンをクリックすると、文章が変わります。ラジオボタン等と組み合わせると、複数の表示を切り替える事も出来ます。

 又、divで囲った範囲全てを切替対象にする事も出来るため、「次へ」ボタンをクリックするとフォーム等の入力画面を丸ごと切り替えるといった使い方も出来ます。

次のページスクロール

  • このエントリーをはてなブックマークに追加