ここ何ヶ月かブログを書いていなかったので書いてみた。
(いつもの様に長いので、読み飛ばしたい場合には具体的にから読んでね!)
Web 系のプログラミングのデバッグには毎回時間がかかる、些細な事柄で案外つまづく、
今回は4ヶ月もWeb系から離れていて、大きく忘れていたので、再認識と、新たな事柄に
気がついた事について書いている。
まぁ、結論から言えば・・・・・
JavaScript を使い、CSS の把握をしながら、その上DOMからあれこれウルトラC級な
何かをしていると、HTML のタグ要素の属性の有る無しに気がつかなかった、という話。
当たり前な様だけど、
DOMスクリプティングに必要な知識分野は、
・HTML の把握(ブラウザ独自タグの挙動を含む)
・CSS の把握(ブラウザ独自スタイルの挙動を含む)
・JavaScript の把握(よくある初心者本に書かれている構文では、動かない場合があるブラウザの挙動を含む)
・DOM の把握(ブラウザによって、返されるオブジェクトが違ったり、独自路線でDOMとは言えないブラウザの挙動を含む)
これらが必要だけど、この上記の()括弧で書かれている事柄が
一番厄介であり、それは経験の量、つまり体験した量による。
これをあえて言うならば、特に
○IE のバージョン差異、特にIE9 とそれ以前の分け方
○IE とDOMの差異をどう分けるか
そして最終的に必要なのは、全貌を見て何時完成に持っていくかなんだけど、
これは知識すべてが100%な人は、ほとんどっていうくらい居ないと思う、
それくらいブラウザハック(ブラウザ異機種間の互換プログラミング?)は、
ブラウザが世代を超えて成長していく中で、競争みたいなものが生み出した差異を
吸収する為に、とても必要だけど、その世代を要領を得て簡潔に書き出すには、
テストプログラミングをしないと進まないので、やっぱり100%な人はほとんど居ないと
思っていいと思う。
(ITなんてわざわざ世代を変えて、仕事作ってる分野だから・・・・ なんて言ったら変な話かな?)
そして、もうひとつ必要なもの
○とても無駄に思える作業がきっと報われると思う勇気!
とても胡散臭い勇気!なんて言っていますが、これが報われると思っていなきゃ、
誰もしたくない作業だと思います、これが好きな人も世の中には居るでしょうが。
(そして、こんなブログを必死に儲かりもせずに書いている私は、その部類に近いのかもしれないです・・・・)
さて、何が原因で躓いたかという話に戻れば、
IE9 からは、ほとんどDOM でDOM の挙動でほぼ動きで、
その上多少はIE 独自のスクリプトも動きます。
これって「IE8 までとの違いは自分で間違え探ししてね!!」
みたいなマイクロソフトの仕様なので
IE8 でDOM にも見えて、IE独自解釈の実装DOM でもあった事柄は、
IE9 では厳密にDOM 扱いになった部分が強くあり、それでが原因で
IE9 に対してブラウザハックをしなおしている人は、かなり居るのではないでしょうか?
今回、私が躓いたのは、HTMLタグで本来使用できない要素を指定すると、
IE9 では、DOM が厳密になったので、
プロパティがundefined(定義されてません)と言ってきたことについて書かれています。
では具体的に
HTML に
<p name='test'></p>
と書いた場合に、
[document.getElementsByTagName('p') .item(うんちゃら番号).name]
として
Pタグのオブジェクトが得られた場合に、name の値を得られるか?
これが問題の部分になります。
結論から言えば、IE8 までのIE は、name の値として「test」 という値を返します。
しかしDOM 準拠では、「undefined」となり、定義されていないという事柄が示され、それが返ります。
これは実は、DOMで定義されているHTMLタグ要素のプロパティで、
Pタグにはname プロパティが無いのです、だから型すら定義されていないのです。
Pタグの場合は、調べてみると、DOMで定義されているプロパティは
align のみで、戻り値の型はString のものだけでした。
つまりDOM から外れているIE8 までは、DOMではありもしない適当なHTMLタグ要素を指定しても
値が返る仕様であったということです。
実は今回、私はname 取得する自分で作った他のINPUTタグを処理するスクリプトから、
テストプログラム用にgetElementsByTagName('xxx')が書かれていた部分をを引き抜いて、
何気なく対象をPタグとして、あれ?なんで動かないんだろう??? と思ったのが
再確認の切欠でした。
テストがしたいだけなのに、余計な遠回りな別のテストをする、
そんな事があるのがJavaScript でのDOM の扱いだと思いますが、
こんな事柄さえ、よく調べるまで知らなかったのは、かなり痛恨でした。
色々調べてみましたが、DOM でnameプロパティが存在するHTMLタグ は、以下の
FORM
SELECT
INPUT
TEXTAREA
BUTTON
A
IMG
OBJECT
PARAM
APPLET
MAP
FRAME
IFREME
でした。
ここで思ったのは、TEXTAREA にname があるのはなぜ?
AにあるならPにあってもいいんじゃないの?
TEXTAREA にname があるのに、なぜOPTION やTABLE には
name がないの???
まぁ、なんだかせっくgetElementsByTagName というメソッドがDOM にあるのに、
使えないなんて勿体無いと思いながら、これが仕様なんだから仕方ないと飲み込みました・・・・とさ。
以上、毎度長いブログでした、お粗末です<_ _>