SQL見るだけクエリ#278 JavaScript DOM操作 getElementsByTagNameに関して

JavaScript DOM操作 getElementsByTagNameに関して解説をしてみようと思います。

この記事を読むと（約5分）
JavaScript DOM操作 getElementsByTagNameに関してイメージできます。

JavaScript DOM操作 getElementById

getElementsByTagName メソッドは、HTML ドキュメント内の特定のタグ名に一致する要素を取得するために使用されます。以下に具体的な例を示します。

例えば、以下のような HTML ドキュメントがあるとします：

<!DOCTYPE html>
<html>
<head>
  <title>getElementsByTagNameの例</title>
</head>
<body>
  <h1>タイトル</h1>
  <p>これは段落です。</p>
  <p>もう一つの段落です。</p>
  <ul>
    <li>リスト項目1</li>
    <li>リスト項目2</li>
  </ul>
</body>
</html>

この場合、JavaScript で getElementsByTagName メソッドを使って特定の要素を取得することができます。

例1: <p> 要素の取得

// <p> 要素を取得
var paragraphs = document.getElementsByTagName('p');

// 取得した要素の数を表示
console.log("段落の数: " + paragraphs.length);

// 各 <p> 要素のテキストを表示
for (var i = 0; i < paragraphs.length; i++) {
  console.log("段落 " + (i + 1) + ": " + paragraphs[i].textContent);
}

この例では、getElementsByTagName メソッドを使用して <p> 要素を取得し、その数と各要素のテキストをコンソールに表示します。

例2: <li> 要素の取得

// <li> 要素を取得
var listItems = document.getElementsByTagName('li');

// 取得した要素の数を表示
console.log("リスト項目の数: " + listItems.length);

// 各 <li> 要素のテキストを表示
for (var i = 0; i < listItems.length; i++) {
  console.log("リスト項目 " + (i + 1) + ": " + listItems[i].textContent);
}

この例では、getElementsByTagName メソッドを使用して <li> 要素を取得し、その数と各要素のテキストをコンソールに表示します。

上記の例では、getElementsByTagName メソッドを使って特定の要素を取得し、それらの要素に対して操作を行っています。このようにして、JavaScript を使ってHTML文書を動的に操作できます。