JavaScript での DOM による (X)HTML 操作
目次
- #1 はじめに
- #2 要素の取得
- #3 ノード木の探索
- #4 ノードの生成・追加
はじめに
DOM についての簡単な説明を行い、この文書の目的を述べます。
DOM とは
DOM (Document Object Model) とは、XML 文書をプログラムから扱うためのデータ構造とそれを扱う方法を規格化したもので、インターフェース群であるといえます。 DOM について理解すれば、どの言語でも (JavaScript でも Java でも Ruby でも) ほとんど同じように XML を操作できるという利点があります。 (もちろんその言語が DOM のプログラムインタフェースをサポートしている必要はありますが。)
「XML 文書をプログラムから扱う」 と言いましたが、当然 XHTML は XML の一部であり、XHTML の操作を行うことも出来ます。 また、ブラウザ上では HTML に対しても操作を行うことが出来ます。 具体的にどのようなことが出来るのか以下に挙げます。
- ID や要素名を指定して要素を取得 (ノードの探索)
- 新しい要素を生成し、指定した要素の子要素に加える (ノードの作成)
- 指定した要素を取り除く (ノードの削除)
もちろん属性の変更やテキストの変更なども行うことができ、DOM 操作によって全く新しいコンテンツを生成することが可能です。
この文書の目的
上で述べたように、DOM 操作を行うことで (X)HTML 文書を動的に変更することが出来ます。
近年は web ブラウザの進歩に従い、JavaScript により DOM 操作を行うことが多くなっています。 特に Ajax という単語が有名になっていますが、非同期通信の結果を用いてページ内の内容を変更する Ajax において DOM は必須とも言えるでしょう。
この文書では 「web ページを動的に変化させる」 ということを主眼に置き、JavaScript を用いた DOM 操作についての基本を述べることを目的とします。
対象読者
対象とする読者は、
- JavaScript に関する基本的な知識がある
- XML に関する基本的な知識がある
という人です。