DOM弄り
仕事中息抜きに書いてた。
文書の元々のソースコードと実際の表示が違うというのをやってみたかった。
ちなみに文書を読み込んだ時点で文書型は決まってしまうので、あとからDOCTYPE書き換えても意味ないです。
https://dl.dropboxusercontent.com/u/414379/www/DOMreplace/index.html
文字コードはUTF-8(BOMなし)で作ったけど、英数だけだとバイナリレベルで見たときにASCIIと変わらない。
そうなると、DOM操作で日本語を挿入したときにWebブラウザが盛大に文字化け*1するので、それを防ぐために無理やり日本語をすべり込ませてみた。
DOCTYPEやDocumentそのものを作り出すメソッドがdocument.implementationにあるけど、まぁ普通にJavaScriptコードを書く分には一生お世話にならないメソッドたちでしょう。
JavaやPerlなどの高位なプログラムからXMLを出力するときに使う為にあるものかなと。
CSSは特に何か意識したわけでもなく、なんとなく書いた。
var pi = document.createProcessingInstruction('xml', 'version="1.0" encoding="UTF-8"'); document.appendChild(pi); //==> <?xml version="1.0" encoding="UTF-8"?>
ってやってるけど、XML宣言はPIではないので、これは実は間違い。
比較的新しいバージョンのMozilla系エンジンでは動くけど、その他では例外を吐く。
その為try-catchで捕まえてエラーコードだけ出力するようにしておいてある。
XML宣言は、文字コードがUTF-8の場合は省略してもいいことになっており、それ故にXHTMLでValidだと思います。
それから、createElementで要素生成してるけど、今回のケースではXHTMLで作っていることを明示的に示す必要があると思うので、本当ならcreateElementNSを使うべきだと思った。
めんどくさいのでしてない。
また、極力Web標準仕様に則って書いているため、古いIE（IE7以前？）では
elem.setAttribute("class", "stretchable");
で処理がうまく通らないと思う。
理由は、古いIEではsetAttributeメソッドが、プロパティへの代入のシンタックスシュガーであるため。
つまりelem.setAttribute("class", "stretchable")はIE内部でelem.class = "stretchable"として解釈されてしまっていた。というような記述をどこかで読んだ。
ちなみにsetAttributeについて、一部で第二引数にオブジェクトを入れてるコードを紹介しているサイトが散見されるけど、仕様上は第一引数も第二引数もプリミティブな文字列でないとダメだったはず。
どうしてもっていう場合は「古いIE向けのハックとして」程度に収めておくべきかと。
