- HOME
- JavaScript入門
- DOMでできること
ここからDOM（Document Object Model）というJavaScriptの機能について解説していきます。
「DOMとは何か？」ということを説明しようと思うと結構専門的な用語を使う必要がありますし、 私も正確に理解しているわけではありません。 それでこの説明は他サイトに任せるとして、DOMでどんなことができるか、 またその為に必要な知識についてこのページで説明したいと思います。
DOMを使うと何ができるのか？
DOMを使うと、ページの再読み込みをすることなく、 ページの一部を書き換えたり、 スタイルを変更したりすることができます。
例えば以前に世界時計を作成しました。 その際、時刻はフォームのテキストボックスに表示したと思います。 テキストボックスは書き換えが可能だからです。 しかしdocument.write()は読み込みの済んだページを書き換えることができません。
では時計のようにリアルタイムで次々に表示を切り替えたいものは、フォーム以外で表示できないのでしょうか？ そうではありません、DOMを使うとそれが可能になります。
下はDOMを使って現在時刻を表示しています。 DOMに対応した大抵のブラウザでは時刻が表示されているはずです。
このように再読み込みを必要とせずにページを書き換えることができるのがDOMなのです。
DOMに必要な知識
スタイルシート
DOMはページの内容を書き換えるだけでなく、様々なスタイルを変更することもできます。 それで、スタイルシート（CSS）の知識を持っていると理解しやすいと思います。 逆にCSSを使ったことが無いと言われる方は、DOMを十分に使いこなすのは難しいでしょう。 それでCSSの基礎だけでも勉強されることをお勧めします。 もし宜しければ、下記のページの「基礎」の部分だけでもご覧になってください。
HTMLタグに印を付ける
DOMで書き換えやスタイル変更を行うには、変更を行うHTMLタグに印を付ける必要があります。 その印とは、id属性です。
<div id="任意のid名"></div>
このid名は、1ページで同じものを複数指定することはできません。 必ず固有のid名を付ける必要があります。
変更するHTMLタグを特定する
目的のHTMLタグを特定するために使うのがdocument.getElementById()です。 特定のid名が付いたHTMLタグをいわば探します。 この後ろに書き換えるかスタイルを変更するかといった命令文を続けます。
- document.getElementById("id名")
- id名から変更するHTMLタグを特定します。
このdocument.getElementById()は、古いブラウザ等では対応していないことがあります。 そのようなブラウザではエラーが出て他のJavaScriptも動作しなくなります。 それで、そのようなブラウザに配慮して以下のように記入すると良いでしょう。
if (document.getElementById)
{
処理…
}
因みにInternet Explorerだけで動かす場合は、 document.all()で代用できます。 これを使うとかなり古い（Windows98当時）のブラウザでもDOMを扱うことができます。 もっともそんな古いブラウザを使っていると危険極まりないのですが（汗）
こうして、DOMを扱う準備が整いました。 次回からは実際に書き換えやスタイル変更の方法を見ていきたいと思います。
因みに当サイトのパズルは全て、DOMの書き換えとスタイル変更で成り立っています。 つまりDOMを扱えるようになると、一気に色々な事が出来るようになります。 JavaScriptの最も面白くて最も有用な機能であるDOMを、是非マスターしていって下さい！