ＤＯＭカスタマイズの分かりやすい説明

ココログを始めとするblogにおいて、JavaScript等を使った各種カスタマイズで今や欠かせないのが、「ＤＯＭ・ドキュメントオブジェクトモデル（Document Object Model）」です。簡単に説明すると、ＤＯＭとは「HTMLやXMLで記述された各要素を操作するための標準インタフェース」で、一つのHTMLのソースを「ツリー構成のオブジェクト群」に見立てた階層構造で管理するものです。

ここ「あずスタ」で言えば、「コメント表示のツリー化」や「記事部分の装飾・告知」等がＤＯＭ操作に当たるもので、先日自作した「ココログ・トラックバックＵＲＬをコピーするスクリプト」も同じくそうです。・・・なんて言って説明しても、やっぱりピンと来ない人は多いですよね？　私もここで難しく書き綴る気は無いけど、少しでも多くの人に「ＤＯＭを使ってこういう風にカスタマイズをしていたんだ？」と一応でも理解してもらいたいため、易しく書き綴ることによって「ＤＯＭカスタマイズ」の分かりやすい説明をしたいと思います。

○ＤＯＭの分かりやすい（と思っている）説明・「blog市」編

blogのHTMLのソースを「手書きの地図」だと思ってください。
それは「blog市の地図」だとしましょう（「南セントレア市」じゃなくてね）。
そしてあなたは、blog市の市長だとしましょう！（気分が良い？）

地図には、番地（「id」や「class」）が、
至る所に割り振られて記載されています。HTMLのソースを見れば、
「id="main"」や「class="content"」という記述が見つかると思います。

さて、市長のあなたは、地図を見ながらこう提案しました。
「この番地の道路を工事して拡張しよう！」。
これは、「ソースのidやclassが○○の所を書き換える」と言い換えられます。

市長は地図の中から、「id="○○"」、
または「class="○○"」という記述を探して、場所を特定します。
それが済んだら、消しゴムで道路を消して、
市長の思い通りに道路を描き、拡張工事の案を決定します。これで終了です。
実はこれが、「ＤＯＭによるカスタマイズの基本操作」なんです。

もう一度言うと、「地図上の番地を特定して、そこを思い通りに変更する」という操作をしていたわけです。実際には、その操作をJavaScript等のプログラムで行っていて、最初に書いた「階層構造」の理論に基づいて処理します。当然ブラウザがＤＯＭに対応している必要があり、またJavaScriptを有効にする設定になっている必要もありますが、後はプログラム自体が正しい操作で記述さえされていれば、どの環境でも作者（上の例では市長）の思い通りにカスタマイズされることになります。

以上、「ＤＯＭによるカスタマイズ」を一応でも理解してもらえたかな？（コメントいただけるとうれしいです）　結局やっていることは「書き換え」なんですね。ただそれを実現するためには、JavaScript等の文法を勉強する必要はあります。でも、ちょっと頑張れば自分でもできるような気になりませんか？　実際私も独学でJavaScriptを勉強してＤＯＭを理解し、自作のスクリプトによるカスタマイズができるようになりました。後は他には無い工夫とスタイルシート（CSS）によるデザインの組合せで、カスタマイズの可能性が広がります。興味を持った方は少しずつでも勉強して、「blogのカスタマイズ」を楽しんでみてはいかが？