getElementsByName と getElementsByClassName

ちょっと気になったのでメモメモ。

普段、jQueryなど使っているときは特に気にしなくてもいいのですが、フレームワークなしでなんかしらの要素取ってくるのって結構大変というか、document.getElementById しか頭に思いつかないのです。

最近というか先々々月ぐらいのことですが、document.getElementsByName なるものを知りました。このメソッドはどんなものかと言いますと、

document.getElementsByName は、name 属性に与えられた値を持つ全ての要素の NodeList を返します。 document.getElementsByName - MDC Doc Center
ほうほう、なるほど。でも、これと似たような名前のメソッドなかったけ？
document.getElementsByClassNameは、与えられたクラス名で得られる要素の集合を返します。 document.getElementsByClassName - MDC Doc Center
おう、これこれ。でも getElementsByClassName のほうはＩＥ対応してないっぽいし、どんな要素にでもname属性つけれたら、getElementsByName で十分じゃね？という疑問が湧いてきたのですが、そうでもないみたいです。

HTML4.01でname属性が設定できるのは以下の要素だけ。

  • a
  • applet
  • button
  • form
  • frame
  • iframe
  • img
  • input
  • map
  • meta
  • object
  • param
  • select
  • textarea
name属性 | HTML用語集 | ミツエーリンクス
ぷらす…
IE、Netscape系共通で使えるのは、JavaScriptの基礎部分でname指定取りができるHTMLタグに限られます。 IMG、FORM、FORM部品、などです。ま、時代的にname属性はフォーム以外ではあり得ない時代でもありますので、使えなくても差し支えないでしょう。

初心者のJavaScript HTMLエレメントのオブジェクト指定方法 各種 [ ARTEMIS ]

つまり、<div name=“hoge”>の要素をgetElementsByNameで取りたいと思っても必ずしも全てのブラウザで正常に動作することもないし、そもそも文法的にやっちゃだめてことで。。。

そうなってくると、どんな要素にでもclass属性がつけれるので、getElementsByClassName がやっぱり重要というか、こっちを使っていくほうがベターなんだと理解しました。

ちなみに、getElementsByClassNameの各ブラウザのサポート状況はこんな感じ。IE以外OKってな感じで。

W3C DOM Compatibility - Core

ちなみに、似たような名前のメソッドでgetElementsByTagNameてのもある。 結論：jQueryないと僕生きていけません :(