忍者ブログ

カウンター

プロモーション

カレンダー

07 2019/08 09
S M T W T F S
1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31

AntinomyMy の実験室

   私のWEBアプリ実験室です!

ブログ内検索

楽天でお買い物

twitter

最新トラックバック

最新コメント

忍者アナライズ

ウェザーニュース

バーコード

本を買う

アクセス解析

Google+

[PR]

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。


No Image

getElementsByTagName 使用時、IE 9はIE8 の非常識が通らない①

DOM(Document Object Model) の調べ物

 ここ何ヶ月かブログを書いていなかったので書いてみた。
(いつもの様に長いので、読み飛ばしたい場合には具体的にから読んでね!)

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 にあるのに、
使えないなんて勿体無いと思いながら、これが仕様なんだから仕方ないと飲み込みました・・・・とさ。




以上、毎度長いブログでした、お粗末です<_ _>




拍手[1回]

PR

  • Home
[PR]