1. はじめに
本記事では、JavaScript DOM操作の
「タグ名をキーに要素を取得」
について記載する。
2. getElementsByTagName
役割
HTML内の指定したタグ名を持つ要素を取得するメソッド
3. どうやって書くの？
構文
構文は以下のようになる。
let 変数名 = document.getElementsByTagName('タグ名');
補足
()内にHTML内で記載したタグ名を記述する。 (タグ名はシングルクォーテーションorダブルクォーテーションで囲う)
4. 例題
内容
タグ名が<div>の要素を取得し、その内容をコンソールへ出力する。
実践前のチュートリアル
実践に入る前に、完成形を先に表示しておく。
仕組みとしては、以下のようになっている。
HTMLに5つのタグを記述し、5つのタグ内には要素を記述する。+取得ボタン込み
取得ボタンをクリックすると、JavaScriptで指定したタグ内の要素をコンソールへ出力するようにする。
マークアップ
ブラウザに文字列を表示しないといけないので、HTMLの作成から取り掛かる。
要素2(p)index.html
```index.html
<!DOCTYPE html>
Document
要素4(span)
<input type="button" value="取得" onclick="showElements()" />
<script src="js/index.js"></script>
```
※inputタグ内の記述に関しては、こちらにて詳細説明済
マークアップしブラウザで表示すると以下のようになる。
JavaScriptの記述
次にJavaScriptを仕上げていく。
getElementsByTagNameの処理
index.js
function showElements() {
let elements = document.getElementsByTagName('div');
for (let i = 0; i < elements.length; i++) {
console.log(elements[i].innerText);
}
}
上記構文に関して、順を追って解説していく。
function showElements()
HTML内のinputタグにあるonclick属性のshowElementsで関数を作成していく。
let elements = document.getElementsByTagName('div');
elememtsという変数を定義し、getElementsByTagNameメソッドでHTML内のタグ内の要素を取得する。
for (let i = 0; i < elements.length; i++)
forを使う理由として、HTML内の要素を取得するために繰り返し処理を実行する必要があるため。
elements.lengthは、変数elementsで取得したタグの個数を表している。
console.log(elements[i].innerText);
コンソールへ出力する際、forで定義した変数iを配列として記述し、innerTextと結合させることによってタグ内の要素を出力することができる。
ブラウザでの検証
実際にブラウザにて挙動を確認していく。
検証の結果、
複数のタグの中で、<div>タグ内の要素をコンソールへ出力するすることが出来た。