久々の更新です。
本年度から、鳶嶋工房はXHTML1.1+CSS2な感じに転換することを決めたので、当然ながらJavaScriptもECMAScript+DOMな感じで行くのです。
書いてる本人もまだよく分かってないので、解説は求めないで、各自の自己学習で一つ。
DOMってなんか聞いたことあるなぁ、と思ったらXMLを使うAPIの仕組みの一つだ。
XMLなんかの書類をいじるための色々なメソッドやらプロパティが用意されているってことですな。
最近は、それをJavaScriptから利用できるというわけ。
すげーじゃん、知らなかったよ。いつの間にかこんなに素敵な状態になっていたとはー。
しかし、例によって実装の方はヘボヘボのようですが…とりあえずMac OS XではSafariとMozillaあたりがいい感じに対応しているみたい。OperaやらIEやらはよく分からん、CaminoやFirefoxはMozillaのエンジンと一緒だから多分対応しているだろう、iCabはまずCSSにちゃんと対応してないからなぁ。
で、DOMってのはXML文書を読んだり加工するために便利なように作られている。そんなわけで、XMLがツリー構造をしているから、自動的にDOMもツリー構造をしてる。
そして、XML的にはかなりまんまな作りノードがズラズラっとあるDOMは、わりと親しみやすい。
書類に含まれる全ての要素はノード(Node)である、というのがDOMの基本的な考え方。
オブジェクトなJSの基礎講座での解説が、大いに参考になる。
忘れちゃいけない本家Document Object Model (DOM) Specifications。W3Cの書類だ。しかしどーも読みにくいんだよなぁ。たぶん、どーしても定義を調べんといかん、とか無いと読まないと思う。
そこで、概要 (null) (Common DOM API)だ。Javaからの使い方だけど、JavaScriptとおおざっぱなところ共通なんで、なかなかリファレンスとして便利だ。Javaをやってる人にはお馴染みのフォーマットで見やすいしね。なんつったって日本語だし、SUN素敵ー。ちなみに他の言語からも同じように使えるんじゃないかなー。
それから、AppleもDOM入門ページを作っている、おー素晴らしい…英語だけどね。
とりあえず、documentの下に子供ノード(childNodes)がぶら下がっているようだ。
最初の子供(firstChild)はhtml要素になる、普段使うのはさらにその下にぶら下がっている要素だ。
この辺りのツリー構造はMozillaの[ツール]-[Web開発]-[DOM Inspector]で見る事ができる。Mozillaいいねぇ、素晴らしいねぇ。
ちょいと注意しなきゃいけないのは、現在見ているページのツリーが見れる訳じゃなくて、いちいちDOM InspectorのロケーションにURLを入れなきゃいけない。
JavaScript のコンソールやデバッガも付いている。うおおおっ素晴らしすぎる、Mozillaサイコー。
あ、Firefoxにも付いてるやん。それにFirefoxの方がおおむね速いね。
ここでは、test1というidのノードに文字(TextNode)を付け加える操作をする。
まずは、createTextNodeメソッドでTextNodeを作る。
var theText = document.createTextNode('テストです');
次に、ノードを取り出す。
ノードを指定するのは、大抵はidということになるだろう。仕掛けを入れときたいタグにidを振っておく。
そして、次のような感じで、getElementByIdメソッドを使って、ノードを取り取り出す。
var theNode = document.getElementById('test1');で、最後にappendChildメソッドで、作っておいたTextNode(ここでは変数theText)を追加する。
theNode.appendChild(theText);呼び出しにはonclickハンドラを使う。次のようなHTMLで、上の行が挿入を行うターゲットのノード、今回はp要素。下の行がボタン、aは意味的には、何らかの文書へのアンカーであって、何かを実行するトリガーではないので、spanにCSSをくっ付けてでボタンを作った。
<p id="test1"></p>
<p>
<span class="btn" onclick="test1();">ノードの内容を追加</span>
</p>ノードの内容を追加
ちなみに、結構悩んだのだが、Safariではscript要素にtype="text/javascript"指定をすると、a href="javascript:〜"は働かないようだ。script要素にlanguage="JavaScript"を指定すると動く。
XHTMLはそもそもlanguageは無いので、ますますaを使う理由は無い。
さらにちなみに<p id="test1"></p>の部分を<p id="test1" />に変えると、DOMの解釈としては要素が閉じられておらず、次のブロック要素までが要素となるようだ。
どのブラウザで試してもそうだけどコレは仕様通りの動作なのかバグなのか?
今ひとつスムースに学習が進まず、ごっつんごっつん問題にぶつかっている。
あんまりJavaScript+DOM中心に解説してるサイトも無いみたいで、なんだかあまり普及してない風。
JavaScript+DOMを使ったと思われる、疑似プルダウンメニューとかは妙に普及してる気もするが。
あ、そーいやXHTMLではscript要素の中身をコメントアウトすると、本当にコメントになってしまうので、コメントアウトしちゃダメらしい。基本的には外部JavaScriptファイルを利用するのが良さげ。
今日はここまで。