IE11でgetElementsByClassNameがエラーになる場合に確認すること

IE11でgetElementsByClassNameがエラーになる場合に確認すること

こんにちは。
また今回もIEに苦しめられました。

オブジェクトは ‘getElementsByClassName’ プロパティまたはメソッドをサポートしていません。

今回の現象は、IE11でjQueryの処理が上手くいかず、ブラウザのコンソールを見ると、
「オブジェクトは ‘getElementsByClassName’ プロパティまたはメソッドをサポートしていません。」
というエラーメッセージが。

かなり古いバージョンならまだしも、IE11でこんなオーソドックスなメソッドがエラー??
と思いながらも原因を調査。

ググっても、ピンポイントな解決策が見つからず困り果てていたのですが、
ようやく、それっぽい解決策を見つけました。

SVG要素に対してgetElementsByClassNameメソッドが効かない

たまたま見つけたGithub上のやり取りの中に答えがありました。
参考URL:https://github.com/robicch/jQueryGantt/issues/37

やり取りが英語なので、はっきりと自信は持てないですが、
どうやら、SVG要素に対してはgetElementsByClassNameメソッドが効かないようですね。

解決策

僕の場合、以下のようにコードを修正したところ、問題無く動作しました。

[修正前]

$(parts).find('.color_icon').removeClass('on');

[修正後]

$(parts).find('[class*=color_icon]').removeClass('on');

findメソッドの引数の指定の仕方を変えただけです。
ちなみに、chrome、firefox、Edgeでも問題ありませんでした。

まとめ

IEに関する問題や対処法について、以下の記事にまとめているのですが、
今回の問題は局所的すぎるので、あえて別記事としました。

【IE対策】IEで互換表示を無効にしてもスタイルが崩れる原因になるもの【まとめ】

うーむ、しかしIEはホントに何なんでしょう。
すべてのwindowsユーザーが少なくともEdgeに乗り換えることを夢見ています。