JavaScript: getElementsByTagName() 要素名で要素を取得
要素名で要素を取得する場合は、document オブジェクトの getElementsByTagName() メソッドを使います。
メソッド名が長いので、手入力する場合は気をつけてください。 できればエディタの入力補助機能を利用した方が早くて確実です。
分解すると get、Elements、By、Tag、Name の5つに分解できます。 最初の get は全て小文字ですが、他は先頭が大文字です。
一番入力ミスしやすいのが「Elements」の部分です。 複数取得できることを前提としているので、複数形となっています。
「getElementById」は「Element」で、 「getElementsByTagName」は「Elements」です。
書式
document.getElementsByTagName('要素名')
サンプルコード
p要素が3つあり、すべてのp要素の内容を表示するプログラムコードを記述します。
HTML
<p>パラグラフ1</p>
<p>パラグラフ2</p>
<p>パラグラフ3</p>
JavaScript
// 取得 var ps = document.getElementsByTagName('p'); // 要素数 console.log(ps.length); // 3 // 内容を全て表示 for (var i = 0; i < ps.length; i++){ console.log(ps[i].innerHTML); // 要素内容が順番に表示される }
取得した p 要素の数は ps.length で取得できます。
要素内容を取得する場合は ps[i].innerHTML で取得できます。 ps[i] のように要素番号を指定する必要があります。