配置の指定を DOM と CSS と JavaScript でする例です。コード例を以下のように分類しました。
- *NEW* TreeWalker デモ が公開されました。W3C 仕様の実力を垣間見ることができす。
-
文字操作: DOM レベル 1 を使って HTML の要素を操作しています。JavaScript で CSS
を操作して文字を動かします。
デモ 元ファイル 説明 Color Fades
（現れる文字）元ファイル 文字を浮かび上がらせる効果を演出します。CSS の配置と文字色を動的に変更しています。 Text Interlace
（文字の織り交ぜ）元ファイル 文字列を二つ動かして、「織り交ぜ」 効果を生みだします。 Fade Spacing
（伸びる字）元ファイル 文字列が浮かび上がっては消えていく効果を演出します。CSS の配置と文字色と字間を動的に変更しています。
【訳注：IE6 sp1 では期待した通りには表示されませんでした】Bouncing Smile
（はずむ笑顔）元ファイル 動的に文字列を用意して動かします。
【訳注：IE6 sp1 では笑顔が固いようです】Gecko Wave
（Gecko 波）元ファイル 基本は Bouncing Smile と同じですが、波のような効果を生みだしています。 Round Title
（題名くるくる）元ファイル 動的に文字列を用意して動かします。 Scrolling Credits
（流れていく表示）元ファイル 動的に文字列を用意して、スタッフ ロールのように表示します。領域を動かしたり、文字位置と文字色を変えています。
【訳注：IE6 sp1 では期待した通りには表示されませんでした】
-
変わり種: DOM レベル 1 を使って HTML の要素を動的に用意しています。CSS の配置とクリッピング （表示領域の制限）
の使い方を示す例でもあります。
デモ 元ファイル 説明 3D Text
（立体的な文字列）元ファイル 文字列を入力すると、三次元の遠近感を表現します。複数の text オブジェクトを動的に用意して、それぞれをクリッピングします。
【訳注：Firefox 1.0、IE6 sp1 では作者の期待した動作とは違う気がします】3D Flash
（立体的なチカチカ）元ファイル これは 3D Text のアニメ版です。文字列ごとに CSS の色属性を変化させます。
【訳注：Firefox 1.0、IE6 sp1 では作者の期待した動作とは違う気がします】Can
（缶）元ファイル 立体的な効果を生みだします。画像を複数用意して、それぞれをクリッピングしています。画像のアドレスを 「image2.jpg」 に変えてみたり、web にある画像のアドレスを指定してみてください。
【訳注：IE6 sp1 では期待した通りには表示されませんでした】TextureWalls
（壁模様）元ファイル Can のデモを元にしてあります。柄（がら）の効果が出るようにしました。
【訳注：Firefox 1.0、IE6 sp1 では期待した通りには表示されませんでした】
-
DOM 1 と 2 を操作: DOM レベル 1 を使って HTML の要素を動的に用意しています。また、操作することもできるように DOM 2
の通知形式を使っています。
デモ 元ファイル 説明 Resize
（大きさの変更）元ファイル 画像の位置と大きさを変えることができます。大きさを変えるには、灰色の小さなアイコンをつまんで移動させてください。
【訳注：IE6 sp1 では期待した通りには表示されませんでした】Dynamic Table Light
（動的な表というもの）元ファイル 小さな表が用意されます。その後、行の追加や列の追加ができます。区画を選んで、その中を編集することもできます。
【訳注：Firefox 1.0、IE6 sp1 では作者の期待した動作とは違う気がします】
参考文献
良くまとめられている記事:
- DOM レベル 1: JavaScript
と DOM を使っての HTML の Table 解析
- DOM レベル 2:
Goodman: W3C 通知形式に備える
標準文書
- 標準文書 - W3C 文書オブジェクト形式 1 - 仕様
- dmoz.org
にある JavaScript.W3C_DOM の分類
コード例と実例
- 流れる見出し
- 流れる見出しの実装を示してくれます - DOM1 と DOM 2 を使用
- Taboca の Gecko 用の実例 - DOM デモの集まり
- Toshirou
Takahashi の DOM コード例 - DOM の使い方が分かる例がいろいろ
-
DMOZ.org, DOM デモのディレクトリ DMOZ.ORG の DOM 実例があるディレクトリ
-
Style コード例
- DOM による style の操作 - DMOZ.ORG
関連技術と文書
- 標準文書 - W3C 文書オブジェクト形式
レベル 2 - 草案
- XML 1.0 使用
- カスケーディング スタイル シート レベル 1 - 仕様
サポート
ブラウザの利用者や web ページ開発者から問い合わせがあっても mozilla.org が対応することはありません。mozilla.org ではニュースグループを運営していますが、それは Mozilla ブラウザの設計、開発、将来的な機能を議論するための場です。ブラウザの使い方を質問するための場ではありません。
開発に関する標準や技術の多くは http://www.w3.org と http://www.ecma.ch と http://web.archive.org/web/20041111155627/developer.netscape.com/ にあります。それらのサイトを調べても、この文書に書かれている技術的なことに関する疑問が解決しなかった場合は、以下のニュースグループを参照してください。
| ニュースグループ | ニュースグループの見出し |
| comp.infosystems.www.authoring.html | Usenet HTML ニュースグループ |
| netscape.public.dev.html | ネットスケープ DevEdge HTML 4.0 ニュースグループ |
| comp.text.xml | Usenet XML ニュースグループ |
| netscape.public.dev.xml | ネットスケープ DevEdge XML ニュースグループ |
| comp.infosystems.www.authoring.stylesheets | Usenet CSS ニュースグループ |
| netscape.public.dev.css | ネットスケープ DevEdge CSS ニュースグループ |
| netscape.public.dev.dom | ネットスケープ DevEdge DOM ニュースグループ |
| comp.lang.javascript | Usenet JavaScript ニュースグループ |
| netscape.devs-javascript | ネットスケープ DevEdge JavaScript ニュースグループ |
特定の市販品について助けが必要な場合は、その製品の製造元に問い合わせてください。ネットスケープ製品 （評価版を除く） の機能や技術に関するご質問がある場合は、 ネットスケープ DevEdge ネット対応所 を訪ねてみてください。
ご意見
このページに関して、ご意見やご感想がある方は、次のリンクでお問い合わせください。