Wikibooks

「JavaScript/DOM」の版間の差分

履歴の双方向閲覧
← 古い編集次の差分 →
削除された内容 追加された内容
ビジュアルウィキテキスト
編集の要約なし
U14269 (トーク | 投稿記録)
640 回編集
JavaScript/DOMプログラミング 08:23, 9 August 2015‎ UTC を転記
32 行
 
[[en:JavaScript/Introduction to the Document Object Model (DOM)]]
 
{{Pathnav|メインページ|工学|工学情報|プログラミング|JavaScript|frame=1|small=1}}
 
== 動的なWebページの操作 ==
 
JavaScriptを学びたいと言う人間の多くは、おそらくよりダイナミックなWebページを作製したいという方だと思われる。
 
そこで、この項ではWebページの操作を行うための方法であるDOMプログラミングを解説する。
 
=== DOM (Document Object Model) の解説 ===
 
DOM (Document Object Model) とはXML文書を読み込・加工・操作するためのデータ構造と、それを扱う方法を規格化したもので、XMLから派生したXHTMLや(ブラウザ上では)HTMLもその操作の対象となっている。
 
始めはJavaで実装・規格化されたため、XML黎明期はXMLを扱うならJavaという認識があった時期もあったが、現在ではほとんどの言語でDOMのプログラムインターフェースが整備されており言語の隔てなく、ほぼ同じ操作でXML文書を扱えるようになっている（代表的な言語でDOMが標準でバンドルされていないものはRubyくらいであるが、こちらはREXMLという、よりリッチなライブラリを積んでいる）。
 
DOMは、基本的にはオブジェクト指向的な扱いを考えながらも、Java以外にも多くの言語で動作することを期待して規格化されており、文法的には堅くやや面倒くさい記述法をしているが、Webブラウザ側でXMLを扱うための、ほぼ唯一の方法なので慣れる様努力して欲しい。
 
なお、DOMは現在では主流のブラウザほとんどで利用が出来るが、古いブラウザに関しては動かないものが多くある事を注意しておく（例としてはMicrosoftのInternetExplolerでは5.0以降で対応している）。
 
===　サンプル ===
 
XML文書は、文書をタグで囲い込んでいるが、タグは必ず入れ子になるように書かれないといけないため必然的に囲っているタグと囲われているタグとの間に親子関係がある。
そして、複数のタグを子として取ることが出来るため、タグはツリー状に整理することが出来る。
DOMとはXML文書がツリー構造になる事を強く意識して作成されているライブラリ群である。
 
DOMは内部の動作原理が最初は想像をしにくいライブラリであるので、これを習得する際には実際にXML文書を読み込んで、それを操作しながら、動作とプログラムとの対応関係を頭の中に焼き付けてしまうのが一番良い方法だと思われる。
 
まずは、次のサンプルを打ち込んでほしい。
 
<nowiki>
&lt;html&gt;
&lt;head&gt;&lt;title&gt;DOMでのデータ取り出しテスト&lt;/title&gt;&lt;/head&gt;
&lt;body&gt;
&lt;div&gt;
&lt;p&gt;DOM TEST&lt;/p&gt;
&lt;/div&gt;
&lt;script type="text/javascript"&gt;&lt;!--
alert( document.getElementsByTagName("body").item(0).getElementsByTagName("p").item(0).firstChild.nodeValue );
//--&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</nowiki>
 
この文書では、(x)html文書中のbodyタグ内部に、divタグが埋め込まれており、さらにその中にpタグ。その中にテキスト文書が埋め込まれている。
ここから「DOM TEST」の文字列を読み出したい場合には、サンプルコードの様に記述をすればよい。
 
何故この様にするのかを逐次解説していく。
まず最初のdocumentを解説する。
これはwebページでの文書本体を示す参照であるが、ここにはXML文書の一番上の要素。つまり、(x)html文書ではhtml要素が格納されている。
そのため、展開された文書の本体からそのツリーの枝葉に当たる要素を順番に手繰ってゆく。
html要素の下にはhead要素とbody要素があるので、まずbody要素を取得するためにgetElementsByTagNameメソッドでbodyタグが幾つあるか調べる。
そしてbodyタグは1つしか存在しないので、取得できたbodyタグのリストの最初の要素を取得する。
ここまでくればあとの動作は簡単なので、同じようにdivタグ、pタグの中身をgetElementsByTagNameメソッドを使って手繰って行き、最後にpタグの中身の最初の中身、つまりは「DOM TEST」のテキストを取得している。
 
それぞれのメソッドの解説を行うと、
 
*getElementsByTagName("タグ名")
:自分の子要素から、名前の合うものを探してリストとして返す
 
*item
:リストから番号を指定して要素を取り出す
 
*firstChild
:自分の一番最初の子要素を返す
 
*nodeValue
:要素内のデータを取り出す
 
この様に、ツリーを上側から順番に手繰っていくことにより、目標の要素に辿り着いて、その後にそこの情報を読み出したり変更したりする。
そのため、DOMプログラムでは、自分が今XML文書内の何処にいるのかをイメージ出来る様になる事が重要である。
 
=== 基本的単語の解説 ===
 
DOMはその名の中にある「ドキュメント」「オブジェクト」「モデル」の名の通り、XMLの各部分をオブジェクト（モノ）として分割して、それぞれを参照して扱える様にする方法である。XML内部には、タグで区切られた数々のデータがあり、それぞれを種類分けしてプログラムで扱っている。その中でも特によく使うDOMのデータ型は次の3種類である。
 
*Node（ノード）
:何処のデータ型でも使う様な基本的な部分を扱っているので、後に理解すれば問題ない。
 
*Element（要素）
:HTMLのコードで書くなら、内部テキストのタグ部分に当たる。
 
*Attribute（属性）
:また、これはHTMLのコードで書くなら、
:<img src="seen01.jpg" alt="海沿いの海岸" />
:の「src="seen01.jpg"」や「alt="海沿いの海岸"」の部分に当たる。
 
最終的には、これらのデータのある、場所まで辿りついて、その部分のデータを加工する事を続けるのがJavaScriptによるWebプログラミングになる。
 
=== DOM-HTML拡張 ===
 
DOMは、XMLを広くカバーする仕様となっているが、特にHTMLに関しての特別の拡張が行われており、簡潔な書式でHTMLの機能を呼び出せるようになっている。この拡張の中でよく使うのが次の2つである。
 
=== getElementById ===
 
document.getElementByIdはDOMプログラミングを実際に行う際に最もよく使う機能で、指定したIDのHTML要素を参照することが出来る。
具体的には、
 
<nowiki>
var elem = document.getElementById("sample");
elem.firstChild.nodeValue = "てすと";
</nowiki>
 
とする事で、sampleとidを打ったHTML要素の内部のテキストを置き換える事が出来る。
 
=== document.body ===
 
これは、実際に使用する際には、
 
<nowiki>
document.getElementsByTagName("body").item(0);
</nowiki>
 
とまったく同じものである。
 
*ノードの概念
**DOM要素一覧
**CDATAの説明
 
=== 余談:メモリ内部でのDOMデータ ===
 
DOMを正しく使おうと思えば、最終的には何故、DOMの文法はこの様に出来ているのか？
ということを理解する必要がある。DOMはXML文書を解析して、その内容をメモリ上に展開するとき、イテレーター同士がツリー状に繋がっている。既にJava等でデザインパターンを修得している上級者にはCOMPOSITE型を取っている、と言えば分かっていただけるであろう（分からない方はここは飛ばして良い<!-- 初心者の理解する次元ではありませんので -->）。DOMに存在する種々の「データ型」というのは、これの先にある様々な枝が何処でどう繋がれるのかを想像しながら使うものである。使っていく内に実感が追いついて慣れていくと思うが、初学者にはそこまでが単純ではないので頑張って欲しい。
 
DOMについての項に関しては、解説すべき項目が多く、とても扱いきれない部分があるので
http://www.doraneko.org/misc/dom10/19981001/cover.html
を参照のこと。
 
 
==関連リンク ==
*[[JavaScript/オブジェクト1|簡単なオブジェクト指向入門]]
* JavaScript復習
** [[JavaScript/オブジェクト1/型の解説]]　：Null型、Undefined型、数値型、文字型
** [[JavaScript/オブジェクト1/If文の復習と、三項演算子|If文の復習と、三項演算子]]
** [[JavaScript/オブジェクト1/ビット演算|ビット演算]]
** [[JavaScript/オブジェクト1/多次元配列と連想配列|多次元配列と連想配列]]
** [[JavaScript/オブジェクト1/ループ文復習|ループ文復習]]
** [[JavaScript/演算子#演算子の優先順位|演算子の優先度と順序]]
** [[JavaScript/オブジェクト1/try-catch文|try-catch文]]
** [[JavaScript/オブジェクト1/その他の制御文|その他の制御文]]
 
* [[JavaScript/オブジェクト2|簡単なオブジェクト指向入門2]]
 
* オブジェクト指向言語としてのJavaScript
** [[JavaScript/オブジェクト2/オブジェクトの作り方と使い方|オブジェクトの作り方と使い方]]
** [[JavaScript/オブジェクト2/標準ライブラリへの機能の拡張|標準ライブラリへの機能の拡張]]
** [[JavaScript/オブジェクト2/メッセージの柔軟性と多様性|メッセージの柔軟性と多様性(ポリモーフィズム)]]
** [[JavaScript/オブジェクト2/外部に対するデータのカプセル化|外部に対するデータのカプセル化]]
** [[JavaScript/オブジェクト2/継承と再利用性の確保|継承と再利用性の確保]]
 
* [[JavaScript/オブジェクト3|簡単なオブジェクト指向入門3]]
 
* JavaScriptの深層とオブジェクト
** [[JavaScript/オブジェクト3/すべてがハッシュでできている|すべてがハッシュで出来ている]]
** [[JavaScript/オブジェクト3/JavaScript的プログラミング|JavaScript的プログラミング]]
 
==== 発展編 ====
*[[JavaScript/DOMプログラミング|HTML、XML文書の操作]]
**[[JavaScript/XML|XHTMLへの対応]]
** [[JavaScript/DOMプログラミング]]
** [[JavaScript/BOM、DOM、DOM-HTML|BOM、DOM、DOM-HTML]]
** [[JavaScript/ドキュメント型の解説|JavaScript ドキュメントオブジェクトの解説]] ：documentオブジェクト
 
[[Category:JavaScript]]
"https://ja.wikibooks.org/wiki/JavaScript/DOM" より作成