読者です 読者をやめる 読者になる 読者になる

htsign's blog

ノンジャンルで書くつもりだけど技術系が多いんじゃないかと思います

DOM弄り

仕事中息抜きに書いてた。
文書の元々のソースコードと実際の表示が違うというのをやってみたかった。

ちなみに文書を読み込んだ時点で文書型は決まってしまうので、あとからDOCTYPE書き換えても意味ないです。

https://dl.dropboxusercontent.com/u/414379/www/DOMreplace/index.html

文字コードUTF-8(BOMなし)で作ったけど、英数だけだとバイナリレベルで見たときにASCIIと変わらない。
そうなると、DOM操作で日本語を挿入したときにWebブラウザが盛大に文字化け*1するので、それを防ぐために無理やり日本語をすべり込ませてみた。

DOCTYPEやDocumentそのものを作り出すメソッドがdocument.implementationにあるけど、まぁ普通にJavaScriptコードを書く分には一生お世話にならないメソッドたちでしょう。
JavaPerlなどの高位なプログラムからXMLを出力するときに使う為にあるものかなと。

CSSは特に何か意識したわけでもなく、なんとなく書いた。


JavaScript内で

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標準仕様に則って書いているため、古いIEIE7以前?)では

elem.setAttribute("class", "stretchable");

で処理がうまく通らないと思う。
理由は、古いIEではsetAttributeメソッドが、プロパティへの代入のシンタックスシュガーであるため。
つまりelem.setAttribute("class", "stretchable")IE内部でelem.class = "stretchable"として解釈されてしまっていた。というような記述をどこかで読んだ。

ちなみにsetAttributeについて、一部で第二引数にオブジェクトを入れてるコードを紹介しているサイトが散見されるけど、仕様上は第一引数も第二引数もプリミティブな文字列でないとダメだったはず。
どうしてもっていう場合は「古いIE向けのハックとして」程度に収めておくべきかと。

*1:試した限り、IE/Firefox/Chromeのそれぞれ現時点最新Verですべて発症