JavaScript DOM操作③ 「タグ名をキーに要素を取得」

6640 ワード
getElementsByTagName JavaScript dom操作 初心者 dom JavaScript テキストリンク

1. はじめに

本記事では、JavaScript DOM操作の
「タグ名をキーに要素を取得」
について記載する。

2. getElementsByTagName

役割

HTML内の指定したタグ名を持つ要素を取得するメソッド

3. どうやって書くの？

構文

構文は以下のようになる。

index.js
let 変数名 = document.getElementsByTagName('タグ名');

補足

()内にHTML内で記載したタグ名を記述する。 (タグ名はシングルクォーテーションorダブルクォーテーションで囲う)

4. 例題

内容

タグ名が<div>の要素を取得し、その内容をコンソールへ出力する。

実践前のチュートリアル

実践に入る前に、完成形を先に表示しておく。

仕組みとしては、以下のようになっている。

HTMLに5つのタグを記述し、5つのタグ内には要素を記述する。+取得ボタン込み

取得ボタンをクリックすると、JavaScriptで指定したタグ内の要素をコンソールへ出力するようにする。

マークアップ

ブラウザに文字列を表示しないといけないので、HTMLの作成から取り掛かる。

index.html

```index.html
<!DOCTYPE html>





Document


要素1(div)

要素2(p)


要素3(div)

要素4(span)
要素5(div)
<input type="button" value="取得" onclick="showElements()" />

<script src="js/index.js"></script>



```


※inputタグ内の記述に関しては、こちらにて詳細説明済


マークアップしブラウザで表示すると以下のようになる。

JavaScriptの記述

次にJavaScriptを仕上げていく。

getElementsByTagNameの処理

index.js
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>タグ内の要素をコンソールへ出力するすることが出来た。

5. おわりに

次項:JavaScript DOM操作④ 「name属性をキーに要素を取得」に続く。