DOM（DocumentObjectModel）とは

XML文書やHTML文書（Document）をオブジェクトとして捉えて操作する方法。
文書をテキストとしてそのまま操作するのでは大変なので、DOMによって、タグによる階層構造をそれぞれオブジェクトと見立てて操作するわけです。

前回でも実はDOMで操作を行いました。

前回のDocument.write()メソッド。そのメソッドを持つDocumentオブジェクトは、読み込んだ文書（今回の場合はHTMLファイルそのもの）を表し、プロパティに各タグ要素を保持しています。

例えば

Document.body;

であれば、ドキュメント内の<body>要素か<frameset>要素を表し、それらがないドキュメントであればnullであるプロパティ。

例えば

Document.images;

であれば、ドキュメント内の<img>要素を配列で持つプロパティ、など。

ドキュメント内の要素を操作するメソッドもいくつかあります。
今回はその中でもドキュメント内の特定のタグ要素を抽出する、

Document.getElementById(string id) ;

というメソッドを見ていきます。
これは、引数のidに一致するタグ要素をElementオブジェクトとして返します。ネットで様々なJavaScriptのサンプルを見ると、大抵これを使って何かしていると思います。

JavaScriptによるHTML操作の基本形？

今回は次のようなHTMLファイルを基本に、6行目のファイル名を読み込みたいJavaScriptのファイル名に変更していきます。

<DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <title>テストケース</title>
    <script type="text/javascript" src="ファイル名"></script>
  </head>
  <body>
    <h1>Hello, HTML</h1>
    <div id="test">あああ</div>
  </body>
</html>

この状態だとこうなります。前と違うのは10行目にある<div>タグ要素です。こちらにid属性を付与して値をtestと定義しておきます。

そして、

window.onload = function(){  var divElement = document.getElementById("test");
  divElement.innerHTML = "アアア";
}

を「test01.js」として保存し先ほどのHTMLのファイル名でこのスクリプトを読み込むと、こうなります。
「test01.js」は下記のように動作しています。

まず1行目のwindow.onloadは、windowの読み込みが完了したら呼ばれるeventで、右辺にあるfunction(){ 処理 }で記述した関数を呼びます。
2行目のdocument.getElementById(“test”)で、ドキュメント内のid=”test”の属性を持つタグを検索し、左辺のdivElement変数に見つけたタグのElementオブジェクトを返しています。（頭についているvarは変数の宣言です）
3行目で、先ほど変数に代入したElementオブジェクトのinnerHTMLプロパティに”アアアア”を代入しています。

Element.innerHTMLプロパティはタグの中身を指します。
つまり<div id=”test”>を探しだし、そのタグの中身の”あああ”を”アアア”に変える操作をしているわけです。

前回のDocument.write()メソッドを用いた場合と違い、タグ要素自体に操作を加えているので、今回の<script>タグはどこに記述しても同じ結果を出します。
同じ結果を保証する代わりに、window.loadを使って読み込み終了後に処理することで<div>タグが読み込まれていない可能性を考慮してあります。

因みにinnerHTMLは文書の値なので、例えば

window.onload = function(){
  var divElement = document.getElementById("test");
  divElement.innerHTML = "<h1>アアア</h1>";
}

のようにHTMLタグを追記すると、このようにタグも反映されます。

また、今回利用したElementオブジェクトには、他にも中身だけでなくそのタグ自体を含めるプロパティのouterHTMLや、指定した名前のタグの属性の値をして返すgetAttribute(string attributeName)などがあります。

これらを利用することで様々な操作が行えるはずです。
そしてどの操作にしても、documentオブジェクトから対象を見つけて操作していく今回の形を基本形として覚えておけばうまくいくはずです。

JavaScript – 基本？ Part.2

DOM（DocumentObjectModel）とは

JavaScriptによるHTML操作の基本形？

コメントを残すコメントをキャンセル

DOM（DocumentObjectModel）とは

JavaScriptによるHTML操作の基本形？

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル