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] のように要素番号を指定する必要があります。

ツール・書籍紹介

まとめ・一覧

基本編

数値

文字列

正規表現

日付・時刻

配列

関数

オブジェクト指向

DOM操作

API

便利な小技集

用語

実践編

関連サイト