JavaScript – DOMの基本操作

ブラウザのDOM(Document Object Model)は、HTML文章を受け取ると、まず開始タグと終了タグの区切りをひとかたまりとしてエレメント(要素)を生成し、次にJavaScriptがエレメントを操作するためのツリー状のnodeインターフェイスを提供します。

JavaScriptのwindowオブジェクトとdocumentオブジェクト

JavaScriptのDOMを操作するためのオブジェクトは階層構造で管理されており、その最上位にあるオブジェクトがwindowオブジェクトであり、JavaScriptが起動するタイミングで自動的に生成されます。

JavaScriptのwindowオブジェクトとdocumentオブジェクトの関係ですが、ドキュメントを表示するウィンドウに対応するのがWindowオブジェクトで、HTMLドキュメントに対応するのが documentオブジェクトになります。

例えばダイアログボックスを表示するのはWindowオブジェクトの機能(メソッド)であるwindow.alert(“ダイアログメッセージ”);で行ないますが、HTMLページ中に文字を出力させるにはdocument.write(“テキスト”);で行ないます。

DOMにより生成されるエレメントオブジェクト

サーバーから送られるHTMLをブラウザが描画(rendering)してWEBサイトが見られるわけですが、ブラウザがHTMLのタグに対応するオブジェクトを生成する機能がDOM(Document Object Model)であり、ブラウザのDOMはJavaScriptに操作してもらうために存在するとも言えます。

<html>~</html>がdocumentオブジェクトであり、そのプロパティとして<body>~</body>がありdocument.bodyでアクセスします。

そしてbody内のタグにはDOMの機能によって対応するエレメントオブジェクトが生成されます。

エレメントの参照

DOMはNodeインターフェイスというツリー構造のインターフェイスを装備しており、JavaScriptはNodeを通じてDOMにアクセスします。Nodeインターフェイスの最上位がhtml要素から生成されるdocumentオブジェクトです。

HTMLタグはDOMによりオブジェクト化されていますがこれらをエレメントと呼び、getElementByIdやgetElementsByName(引数のnameのDOMオブジェクトを配列を返す)のようにid属性やname属性を指定することでエレメントのオブジェクトにアクセスします。

エレメントの更新

HTMLタグの場合、style属性を定義することで表示を変化させますが、エレメントオブジェクトのstyleプロパティを変更することで、関数からこれを実行することができます。

getElementByIdメソッドで該当エレメントへの参照を取得し、styleプロパティを変更します。ちなみにプロパティは資産とか土地とか所有物という意味でオブジェクトの所有物を表します。

エレメントの追加

createElementメソッドで空のdivエレメントオブジェクトを作成して、innerHTMLメソッドで空のdivエレメントに表示する数字を設定して、appendChildメソッドで作成したエレメントをHTML中のid属性countの場所に表示します。

エレメントの削除

getElementIdで該当idエレメントへの参照を取得し、lastChildプロパティで最後の子要素を取得し、removeChildメソッドで該当エレメントを削除します。

こんな投稿も読まれています