JavaScriptにおけるタグ取得の方法10選！初心者でも簡単にできる

はじめに
●JavaScriptタグとは
- ○タグの基本
●JavaScriptタグ取得の方法
●応用例とサンプルコード
●カスタマイズ方法
まとめ

はじめに

この記事を読めば、JavaScriptを使ってHTMLタグを取得する方法が身につきます。

JavaScriptの基本的なタグ取得方法から、応用例まで詳しく解説します。

初心者の方でも簡単にできるサンプルコード付きで説明しますので、ぜひ参考にしてください。

●JavaScriptタグとは

JavaScriptタグとは、HTML内の要素を操作するために使用するタグのことです。

JavaScriptを使ってタグを取得することで、ページ内の要素を動的に変更したり、イベントを追加したりすることができます。

○タグの基本

HTMLでは、要素をタグで囲んで表現します。

例えば、次のような形式です。

<p>これは段落です。</p>

JavaScriptを使って、このようなタグを取得・操作することができます。

●JavaScriptタグ取得の方法

JavaScriptでタグを取得する方法にはいくつかの方法があります。

ここでは、5つの基本的な方法とサンプルコードを紹介します。

○サンプルコード1：getElementByIdを使ったタグ取得

getElementByIdは、指定したid属性の値を持つ要素を取得します。

<!DOCTYPE html>
<html>
<head>
<script>
function getTagById() {
  var element = document.getElementById("demo");
  alert("取得したタグ：" + element.tagName);
}
</script>
</head>
<body>

<h1 id="demo">Hello World!</h1>
<button onclick="getTagById()">タグを取得</button>

</body>
</html>

このサンプルでは、ボタンをクリックすると、id属性が”demo”の要素（ここではh1タグ）が取得され、タグ名がアラートで表示されます。

○サンプルコード2：getElementsByClassNameを使ったタグ取得

getElementsByClassNameは、指定したclass属性の値を持つ要素をすべて取得します。

<!DOCTYPE html>
<html>
<head>
<script>
function getTagsByClassName() {
  var elements = document.getElementsByClassName("test");
  var result = "";
  for (var i = 0; i < elements.length; i++) {
    result += elements[i].tagName + " ";
  }
  alert("取得したタグ：" + result);
}
</script>
</head>
<body>

<p class="test">これは段落1です。</p>
<p class="test">これは段落2です。</p>
<button onclick="getTagsByClassName()">タグを取得</button>

</body>
</html>

このサンプルでは、ボタンをクリックすると、class属性が”test”の要素（ここでは2つのpタグ）が取得され、それぞれのタグ名がアラートで表示されます。

○サンプルコード3：getElementsByTagNameを使ったタグ取得

getElementsByTagNameは、指定したタグ名の要素をすべて取得します。

<!DOCTYPE html>
<html>
<head>
<script>
function getTagsByTagName() {
  var elements = document.getElementsByTagName("p");
  var result = "";
  for (var i = 0; i < elements.length; i++) {
    result += elements[i].innerHTML + " ";
  }
  alert("取得したテキスト：" + result);
}
</script>
</head>
<body>

<p>これは段落1です。</p>
<p>これは段落2です。</p>
<button onclick="getTagsByTagName()">テキストを取得</button>

</body>
</html>

このサンプルでは、ボタンをクリックすると、すべてのpタグが取得され、それぞれのテキストがアラートで表示されます。

○サンプルコード4：querySelectorを使ったタグ取得

querySelectorは、指定したCSSセレクタに一致する最初の要素を取得します。

<!DOCTYPE html>
<html>
<head>
<script>
function getTagBySelector() {
  var element = document.querySelector(".test");
  alert("取得したタグ：" + element.tagName);
}
</script>
</head>
<body>

<p class="test">これは段落1です。</p>
<p class="test">これは段落2です。</p>
<button onclick="getTagBySelector()">タグを取得</button>

</body>
</html>

このサンプルでは、ボタンをクリックすると、CSSセレクタ”.test”に一致する最初の要素（ここでは1つ目のpタグ）が取得され、タグ名がアラートで表示されます。

○サンプルコード5：querySelectorAllを使ったタグ取得

querySelectorAllは、指定したCSSセレクタに一致するすべての要素を取得します。

<!DOCTYPE html>
<html>
<head>
<script>
function getTagsBySelectorAll() {
  var elements = document.querySelectorAll(".test");
  var result = "";
  for (var i = 0; i < elements.length; i++) {
    result += elements[i].tagName + " ";
  }
  alert("取得したタグ：" + result);
}
</script>
</head>
<body>

<p class="test">これは段落1です。</p>
<p class="test">これは段落2です。</p>
<button onclick="getTagsBySelectorAll()">タグを取得</button>

</body>
</html>

このサンプルでは、ボタンをクリックすると、CSSセレクタ”.test”に一致するすべての要素（ここでは2つのpタグ）が取得され、それぞれのタグ名がアラートで表示されます。

●応用例とサンプルコード

JavaScriptでタグを取得した後には、さまざまな操作ができます。

ここでは、いくつかの応用例とサンプルコードを紹介します。

○サンプルコード6：タグの属性値を取得・変更する

このサンプルでは、JavaScriptを使用して特定のHTML要素の属性を取得し、ユーザーの操作に応じて属性を変更します

。ボタンをクリックすると、リンクのhref属性値が「https://www.google.com」から「https://www.example.com」に更新され、変更がアラートで表示されます。

<!DOCTYPE html>
<html>
<head>
<script>
function changeAttribute() {
  var element = document.getElementById("link");
  var href = element.getAttribute("href");
  alert("現在のリンク先：" + href);
  element.setAttribute("href", "https://www.example.com");
  alert("変更後のリンク先：" + element.getAttribute("href"));
}
</script>
</head>
<body>

<a id="link" href="https://www.google.com">Google</a>
<button onclick="changeAttribute()">リンク先を変更</button>

</body>
</html>

このコードは、JavaScriptでのDOM操作の基本を示し、動的なウェブページ作成に欠かせません。

○サンプルコード7：タグのテキストを取得・変更する

次のサンプルでは、JavaScriptを使用してHTML要素のテキスト内容を取得し、新しい内容に更新する方法を表しています。

この操作は、ウェブページに動的なテキストコンテンツを追加する際に重要です。

<!DOCTYPE html>
<html>
<head>
<script>
function changeText() {
  var element = document.getElementById("paragraph");
  alert("現在のテキスト：" + element.textContent);
  element.textContent = "これは変更後のテキストです。";
  alert("変更後のテキスト：" + element.textContent);
}
</script>
</head>
<body>

<p id="paragraph">これは変更前のテキストです。</p>
<button onclick="changeText()">テキストを変更</button>

</body>
</html>

このサンプルは、ウェブページのテキストコンテンツを動的に更新する方法を表しています。

○サンプルコード8：タグのスタイルを変更する

最後のサンプルでは、JavaScriptを使用してHTML要素のスタイル、ここでは背景色を動的に変更する方法を紹介しています。

この技術は、ユーザーの操作に応じてページの見た目を変える際に特に有効です。

<!DOCTYPE html>
<html>
<head>
<style>
  .highlight {
    background-color: yellow;
  }
</style>
<script>
function changeStyle() {
  var element = document.getElementById("paragraph");
  element.classList.toggle("highlight");
}
</script>
</head>
<body>

<p id="paragraph">このテキストのスタイルを変更します。</p>
<button onclick="changeStyle()">スタイルを変更</button>

</body>
</html>

このサンプルは、ユーザーインタラクションに基づいて、スタイルを簡単かつ効果的に変更する方法を表しています。

○サンプルコード9：タグにイベントリスナーを追加する

タグにイベントリスナーを追加することで、特定のイベントが発生した際に実行される関数を設定できます。

下記に、ボタンがクリックされたときにアラートを表示するサンプルコードを示します。

// HTMLタグの取得
const button = document.getElementById("myButton");

// イベントリスナーの追加
button.addEventListener("click", function() {
  alert("ボタンがクリックされました！");
});

このコードでは、getElementByIdを使ってボタンのタグを取得し、addEventListenerメソッドを使ってクリックイベントのリスナーを追加しています。

○サンプルコード10：タグを生成・削除する

JavaScriptを使って新しいタグを生成したり、既存のタグを削除することもできます。

下記に、新しいリストアイテムを生成して追加し、削除するサンプルコードを示します。

// 新しいリストアイテムの生成
const newItem = document.createElement("li");
newItem.textContent = "新しいリストアイテム";

// リストアイテムの追加
const list = document.getElementById("myList");
list.appendChild(newItem);

// リストアイテムの削除
const firstItem = document.querySelector("#myList li:first-child");
list.removeChild(firstItem);

このコードでは、createElementメソッドを使って新しいリストアイテムを生成し、appendChildメソッドでリストに追加しています。

また、querySelectorで最初のリストアイテムを取得し、removeChildメソッドでリストから削除しています。

これらのサンプルコードも参考にして、JavaScriptでタグを取得・操作する方法を学んでください。