JavaScriptのgetElementById、getElementsByTagNam、getElementsByClassNameの違いと使い方

~

開発ツールやキーテクノロジー Adobe Dreamweaver CC 2017、JavaScript

著者 袁志東

書きました。2019-01-16

getElementById getElementsByTagNam と getElementsByClassName を取得します。 は、JavaScriptで要素を取得するための一般的なメソッドです。

getElementById は、idで要素を取得します。idはHTMLで一意であるため、1つの要素しか取得されません。

getElementsByTagNam は、タグの名前で要素を取得します。HTMLではタグは複数持つことができるので、複数の要素を取得し、コレクションとして返します。

getElementsByClassName は、クラス名で要素を取得するものです。HTMLでは同じ名前のクラスが複数存在することがあるので、取得される要素も複数の要素で、やはりコレクションバックという形で取得されます。

つまり、idは宣言された変数を使えばいいのですが、タグ名やクラス名で宣言された変数は、使うときに "index"を付ける必要があり、タグ名やクラス名で1つの要素しか得られなかったとしても、indexだけは "index"を付けなければなりません。 indexは "[0]" となるだけです。