JavaScriptを使ってHTMLタグの取得・操作する方法10選

●JavaScriptでHTMLタグを取得する方法

JavaScriptでWebサイトを動的に操作する際に欠かせないのが、HTMLタグの取得です。

今回は、そんなJavaScriptでHTMLタグを取得する方法を、初心者の方にもわかりやすく解説していきたいと思います。

HTMLタグを取得する方法はいくつかありますが、代表的なのが次の3つです。

1. document.getElementByIdを使う方法
2. document.getElementsByClassNameを使う方法
3. document.getElementsByTagNameを使う方法

それでは、1つずつ見ていきましょう。

○document.getElementByIdの使い方

document.getElementByIdは、指定したIDを持つ要素を取得するメソッドです。

IDはHTMLタグに付与される固有の識別子で、1つのHTML内で重複しないのが特徴です。

例えば、以下のようなHTMLがあったとします。

<div id="myDiv">
  <p>これはdivタグ内のpタグです。</p>
</div>

この場合、JavaScriptで以下のようにすることで、id=”myDiv”の要素を取得できます。

const myDiv = document.getElementById('myDiv');
console.log(myDiv);

実行結果は次のようになります。

<div id="myDiv">
  <p>これはdivタグ内のpタグです。</p>
</div>

このように、document.getElementByIdを使えば、IDを指定するだけで簡単にタグを取得できるのです。

○document.getElementsByClassNameの使い方

次に、document.getElementsByClassNameの使い方について解説します。

こちらはクラス名を指定して要素を取得するメソッドです。

クラスはIDと違い、複数の要素に同じクラス名を付けることができます。

次のようなHTMLを例に考えてみましょう。

<div class="myClass">
  <p>これは1つ目のdivタグ内のpタグです。</p>
</div>
<div class="myClass">
  <p>これは2つ目のdivタグ内のpタグです。</p>
</div>

ここで、JavaScriptから以下のようにクラス名を指定すると、

const myClasses = document.getElementsByClassName('myClass');
console.log(myClasses);

実行結果は次のようになります。

HTMLCollection(2) [div.myClass, div.myClass]
  0: div.myClass
  1: div.myClass
  length: 2

document.getElementsByClassNameの戻り値はHTMLCollectionというオブジェクトで、該当する全ての要素が含まれています。

個々の要素にアクセスするには、通常の配列のようにインデックスを指定します。

console.log(myClasses[0]);
console.log(myClasses[1]);

<div class="myClass">
  <p>これは1つ目のdivタグ内のpタグです。</p>
</div>

<div class="myClass">  
  <p>これは2つ目のdivタグ内のpタグです。</p>
</div>

このように、document.getElementsByClassNameを使えば、クラス名を指定して複数の要素をまとめて取得できるわけです。

○document.getElementsByTagNameの使い方

最後に、document.getElementsByTagNameの使い方を見ていきましょう。

こちらはタグ名そのものを指定して要素を取得するメソッドです。

次のようなHTMLを例に考えてみます。

<div>
  <p>これは1つ目のpタグです。</p>
  <p>これは2つ目のpタグです。</p>
</div>

ここで、JavaScriptから以下のようにpタグを指定すると、

const ps = document.getElementsByTagName('p');
console.log(ps);

実行結果は次のようになります。

HTMLCollection(2) [p, p]
  0: p
  1: p
  length: 2

document.getElementsByTagNameも、getElementsByClassNameと同様に、HTMLCollectionを返します。

個々の要素は配列のようにインデックスを指定してアクセスできます。

console.log(ps[0]);
console.log(ps[1]);

<p>これは1つ目のpタグです。</p>

<p>これは2つ目のpタグです。</p> 

このように、document.getElementsByTagNameを使えば、タグ名を指定するだけで該当する全ての要素を取得できるのです。

○サンプルコード1：IDでタグを取得

それでは、実際のサンプルコードを見ていきましょう。

まずは、IDを使ってタグを取得する例です。

<div id="myIdDiv">
  <p>IDで取得されるdivタグ内のpタグです。</p>
</div>

const myIdDiv = document.getElementById('myIdDiv');
console.log(myIdDiv.innerHTML);

実行結果

<p>IDで取得されるdivタグ内のpタグです。</p>

document.getElementByIdで取得した要素の内容にアクセスするには、innerHTMLプロパティを使います。

これで、タグの中身を文字列として取得できます。

○サンプルコード2：クラスでタグを取得

次に、クラスを使ってタグを取得する例を見てみましょう。

<div class="myClassDiv">
  <p>クラスで取得される1つ目のdivタグ内のpタグ</p>
</div>
<div class="myClassDiv">
  <p>クラスで取得される2つ目のdivタグ内のpタグ</p>
</div>

const myClassDivs = document.getElementsByClassName('myClassDiv');
for (let i = 0; i < myClassDivs.length; i++) {
  console.log(myClassDivs[i].innerHTML);
}

実行結果

<p>クラスで取得される1つ目のdivタグ内のpタグ</p>
<p>クラスで取得される2つ目のdivタグ内のpタグ</p>

document.getElementsByClassNameで取得した要素は複数になることが多いので、for文を使って1つずつ処理をするのが一般的です。

○サンプルコード3：タグ名でタグを取得

最後に、タグ名を使ってタグを取得する例です。

<ul>
  <li>1番目のリスト項目</li>
  <li>2番目のリスト項目</li>
  <li>3番目のリスト項目</li>
</ul>

const lis = document.getElementsByTagName('li');
for (let i = 0; i < lis.length; i++) {
  console.log(lis[i].textContent);  
}

実行結果

1番目のリスト項目
2番目のリスト項目
3番目のリスト項目

この例では、textContentプロパティを使ってタグ内のテキスト部分のみを取得しています。

タグも含めて全て取得したい場合は、innerHTMLプロパティを使います。

●タグの属性を操作する方法

JavaScriptでHTMLを操作する際に、タグの取得だけでなく属性の操作も重要なスキルの1つです。

属性とは、タグに付加される追加情報のことで、id属性やclass属性、src属性などがあります。

これらの属性を動的に変更することで、よりインタラクティブなWebサイトを作ることができるのです。

属性の操作には主に3つの方法があります。

getAttributeメソッドで属性値を取得したり、setAttributeメソッドで属性値を設定したり、removeAttributeメソッドで属性自体を削除したりできます。

こを使い分けることで、さまざまな要望に応えられるでしょう。

それでは、サンプルコードを交えながら、属性操作の方法を具体的に見ていきましょう。

○サンプルコード4：getAttribute/setAttributeでタグの属性値を取得・設定

まずは、getAttributeとsetAttributeを使った属性の取得と設定の例です。

<img id="myImg" src="image1.jpg" alt="画像1">

<button id="changeBtn">画像を変更</button>

const img = document.getElementById('myImg');
const btn = document.getElementById('changeBtn');

// 初期の属性値を取得して表示
console.log(img.getAttribute('src')); // 出力結果: image1.jpg
console.log(img.getAttribute('alt')); // 出力結果: 画像1

// ボタンがクリックされたら属性値を変更
btn.addEventListener('click', () => {
  img.setAttribute('src', 'image2.jpg');
  img.setAttribute('alt', '画像2');
});

このサンプルコードでは、まずgetAttributeメソッドを使ってimg要素のsrc属性とalt属性の初期値を取得し、コンソールに表示しています。

次に、changeBtn要素にクリックイベントを設定し、クリックされたらsetAttributeメソッドを使ってsrc属性とalt属性の値を変更しています。

実行結果は次のようになります。

image1.jpg
画像1

ボタンをクリックすると、img要素のsrc属性がimage2.jpgに、alt属性が画像2に変更されます。

このように、getAttributeとsetAttributeを使えば、属性値を自由に取得・設定できるわけです。

ただし、注意点もあります。

たとえば、setAttributeで存在しない属性を設定しようとすると、新しい属性が追加されてしまいます。

本来の属性名と異なるものを指定しないよう、気をつける必要があるでしょう。

○サンプルコード5：removeAttributeでタグの属性を削除

次に、removeAttributeメソッドを使って属性を削除する例を見てみましょう。

<p id="myP" class="highlight">これは<strong>重要な</strong>パラグラフです。</p>

<button id="removeClass">ハイライトを解除</button>

const p = document.getElementById('myP');
const btn = document.getElementById('removeClass');

// ボタンがクリックされたらclass属性を削除
btn.addEventListener('click', () => {
  p.removeAttribute('class');
});

ここでは、pタグにhighlightというクラスが付いています。

これを、removeClassボタンをクリックすることで削除しています。

removeAttributeメソッドに属性名を指定すれば、その属性ごと削除されます。

これによって、元々ついていたスタイルやデータなども一緒に削除できるので便利です。

実行前のマークアップ

<p id="myP" class="highlight">これは<strong>重要な</strong>パラグラフです。</p>

ボタンクリック後のマークアップ

<p id="myP">これは<strong>重要な</strong>パラグラフです。</p>

このように、不要になった属性を削除することで、よりクリーンなマークアップを保つことができます。

なお、存在しない属性をremoveAttributeで削除しようとしてもエラーにはなりません。ただ、何も起こらないだけです。

削除対象の属性がちゃんと存在するかどうかは、事前に確認しておくとよいでしょう。

●CSSスタイルを操作する方法

JavaScriptでHTMLを操作するスキルを身につけたら、次はCSSスタイルの操作にチャレンジしてみましょう。

HTMLタグの見た目を動的に変更できれば、よりリッチでインタラクティブなWebサイトを作ることができます。

CSSスタイルを操作するには、主に2つの方法があります。1つは、style属性を使ってインラインスタイルを直接変更する方法。

そしてもう1つは、getComputedStyleメソッドを使って、適用されているスタイルを取得する方法です。

状況に応じて使い分けることが大切ですね。

それでは、サンプルコードを見ながら、それぞれの方法を詳しく解説していきたいと思います。

○サンプルコード6：style属性を使ってタグのスタイルを変更

まずは、style属性を使ってインラインスタイルを変更する方法から見ていきましょう。

<p id="myP">これは<strong>カラフルな</strong>パラグラフです。</p>

<button id="changeColor">色を変更</button>

const p = document.getElementById('myP');
const str = p.querySelector('strong');
const btn = document.getElementById('changeColor');

btn.addEventListener('click', () => {
  p.style.backgroundColor = 'yellow';
  p.style.fontWeight = 'bold';
  str.style.color = 'red';
});

このサンプルコードでは、最初は普通のパラグラフが表示されています。

それがchangeColorボタンをクリックすると、背景色が黄色に、フォントが太字に、そしてstrong要素の文字色が赤色に変わります。

実行前のスタイル

<p id="myP">これは<strong>カラフルな</strong>パラグラフです。</p>

ボタンクリック後のスタイル

<p id="myP" style="background-color: yellow; font-weight: bold;">これは<strong style="color: red;">カラフルな</strong>パラグラフです。</p>

style属性は、そのタグに直接スタイルを指定するための属性です。

JavaScriptからは、要素のstyleプロパティを通じてアクセスできます。

style.プロパティ名 = '値'という形で、個別のCSSプロパティを設定できるわけですね。

ただし、この方法で変更できるのはインラインスタイル、つまりそのタグにだけ適用されるスタイルだけです。

外部CSSファイルや<style>タグで指定された「一般的な」スタイルは変更できないので注意が必要です。

全体的なレイアウトを変更するようなケースでは、クラス名を切り替える方が適しているかもしれません。

その場合は、先ほど学んだclassNameプロパティを使うとよいでしょう。

○サンプルコード7：getComputedStyleで適用されたスタイルを取得

次は、getComputedStyleメソッドを使って、実際に適用されているスタイルを取得する方法を見ていきます。

<p id="myP" class="highlight">
  この段落には、幅と高さが指定されています。
</p>

#myP {
  width: 300px;
  height: 200px;  
  background-color: lightblue;
  border: 2px solid navy;
  padding: 20px;
}

const p = document.getElementById('myP');
const styles = getComputedStyle(p);

console.log(styles.width);  // 出力結果: 300px
console.log(styles.height);  // 出力結果: 200px
console.log(styles.backgroundColor);  // 出力結果: rgb(173, 216, 230)
console.log(styles.border);  // 出力結果: 2px solid rgb(0, 0, 128) 
console.log(styles.padding);  // 出力結果: 20px

ここでは、外部CSSでスタイルが設定された段落要素に対して、getComputedStyleメソッドを使って、そのスタイルを取得しています。

getComputedStyleは、要素に実際に適用されている最終的なスタイル情報を、CSSStyleDeclarationオブジェクトという形で返してくれます。

これを使えば、その要素の幅や高さ、色などを知ることができます。

注目してほしいのが、CSSで設定した値がそのまま返ってくるわけではないということです。

たとえば、背景色はlightblueと指定しましたが、取得された値はrgb(173, 216, 230)というRGB形式になっています。ブラウザが計算した最終的な値が返されるということですね。

JavaScriptからスタイルを操作するときは、この計算済みの値をそのまま使うのがおすすめです。

そうすれば、予期せぬ見た目の違いが起こりにくくなります。

ただし、疑似要素（::before, ::afterなど）のスタイルは取得できないので、ご注意ください。

疑似要素はHTMLのツリー構造に存在しないため、getComputedStyleの対象にはならないのです。

●よくあるエラーと対処法

JavaScriptを使ってHTMLを操作していると、思わぬエラーに遭遇することがあります。

特に初心者の方は、エラーメッセージを見ても何が原因なのかわからず、戸惑ってしまうかもしれません。

ただ、エラーは誰にでも起こりうるもので、それを乗り越えていくことがスキルアップにつながります。

ここでは、よくあるエラーとその対処法を3つ紹介しますので、ぜひ参考にしてみてください。

○「nullが返ってくる」エラーの原因と対処

JavaScriptでHTMLタグを取得しようとしたときに、nullが返ってくるエラーに遭遇したことはありませんか？

これは、指定したIDやクラス名、タグ名の要素が見つからなかったときに起こります。

例えば、次のようなコードがあったとします。

<div id="myDiv">
  <p>これはdivタグ内のpタグです。</p>
</div>

const myP = document.getElementById('myP');
console.log(myP);  // 出力結果: null

ここでは、id=”myP”の要素を取得しようとしていますが、実際にはそのようなIDの要素は存在しません。

そのため、myPにはnullが代入され、コンソールにもnullが出力されています。

このエラーを防ぐには、IDやクラス名、タグ名を正しく指定することが大切です。

タイポがないか、大文字小文字は合っているか、よく確認しましょう。

また、JavaScriptを書くタイミングにも気をつけてください。

HTMLの読み込みが完了する前にJavaScriptが実行されると、タグが見つからずnullになってしまいます。

HTMLの最後、</body>タグの直前にJavaScriptを書くか、<script>タグにdeferという属性を付けるとよいでしょう。

○「タグが見つからない」エラーの原因と対処

「nullが返ってくる」エラーと似ていますが、「タグが見つからない」エラーも起こりがちです。

これは、指定したセレクターに該当するタグが存在しない場合に発生します。

次のようなHTMLがあるとします。

<ul id="myList">
  <li>Item 1</li>
  <li>Item 2</li>
</ul>

ここで、<ul>タグ内の<p>タグを取得しようとすると…

const myList = document.getElementById('myList');
const myP = myList.getElementsByTagName('p')[0];
console.log(myP);  // エラー: Cannot read property 'getElementsByTagName' of null

<ul>タグの中に<p>タグは存在しないため、myPはundefinedになります。

そして、undefinedに対してgetElementsByTagNameを使おうとしているので、エラーが発生するのです。

このエラーを防ぐには、セレクターを正しく指定することに加えて、取得した要素がundefinedやnullではないかチェックする習慣を付けましょう。

const myList = document.getElementById('myList');
if (myList !== null) {
  const myP = myList.getElementsByTagName('p')[0];
  if (myP !== undefined) {
    console.log(myP);
  }
}

このように、条件分岐を使って、エラーが起こりそうな状況を事前に回避するのが賢明です。

○「属性が設定できない」エラーの原因と対処

最後に、タグの属性を操作しようとしたときに起こるエラーを見ていきます。

これは、属性名を間違えたり、属性の値を正しく指定しなかったりすると発生します。

例として、次のようなHTMLとJavaScriptを考えてみましょう。

<img id="myImg" src="image1.jpg" alt="画像1">

const img = document.getElementById('myImg');
img.setAttribute('alt', '画像2');
img.setAttribute('width', 300);  // エラー: Invalid value "300" for attribute "width" on element "img": Expected a dimension but got "300".

ここでは、img要素のalt属性とwidth属性を設定しようとしています。

しかし、width属性には単位のない数値300を指定しているため、エラーが発生しています。

このエラーを解決するには、属性の値を正しい形式で指定する必要があります。

width属性なら、単位を付けて’300px’などとします。

img.setAttribute('width', '300px');

また、存在しない属性を設定しようとしてもエラーになるので注意が必要です。

imgタグにはheight2属性などは存在しません。属性名を間違えていないか、今一度確認しましょう。

●JavaScriptとHTMLの連携Tips

これまで、JavaScriptでHTMLを操作する基本的な方法を学んできました。

タグの取得や属性の操作、スタイルの変更など、かなりダイナミックにWebページを動かせるようになったのではないでしょうか。

でも、本当に実践的なWebサイトを作るには、もう少し踏み込んだテクニックが必要です。

ここでは、JavaScriptとHTMLをもっとスムーズに連携させるための Tips を3つ紹介したいと思います。

実務でJavaScriptを使うシーンが増えてきた中級者の方にも、きっと役立つ内容だと思いますので、ぜひトライしてみてください。

○サンプルコード8：data属性を活用する例

1つ目のTipsは、data属性の活用です。

data属性とは、HTMLのタグに独自のデータを埋め込むための属性で、data-で始まる属性名を自由につけられます。

例えば、商品リストのHTMLを次のように記述したとします。

<ul>
  <li data-id="1" data-price="1000">商品A</li>
  <li data-id="2" data-price="2000">商品B</li>
  <li data-id="3" data-price="3000">商品C</li>
</ul>

ここでは、各<li>タグにdata-idとdata-priceという属性を付けて、商品IDと価格のデータを持たせています。

このデータをJavaScriptで取得するには、datasetプロパティを使います。

const li = document.querySelector('li');
console.log(li.dataset.id);  // 出力結果: 1
console.log(li.dataset.price);  // 出力結果: 1000

こんな風に、HTMLにデータを持たせておけば、JavaScriptからそのデータを簡単に利用できます。

特に、Webアプリケーションでは、データの受け渡しにdata属性がよく使われます。

data属性を活用することで、HTMLとJavaScriptのコードがすっきり分離でき、より保守性の高いプログラムを書けるでしょう。

ぜひ覚えておいてください。

○サンプルコード9：DOMContentLoadedイベントでDOMの構築を待つ

2つ目のTipsは、DOMContentLoadedイベントの利用です。

JavaScriptからHTMLを操作するとき、HTMLのDOMツリーが完成していないと、思わぬエラーが起きることがあります。

そんなときは、DOMの構築が終わるのを待ってからJavaScriptを実行すればOKです。

それを実現するのがDOMContentLoadedイベントです。

document.addEventListener('DOMContentLoaded', () => {
  // ここに、DOMが構築された後に実行したい処理を書く
  const title = document.getElementById('title');
  console.log(title.textContent);
});

このサンプルコードでは、DOMContentLoadedイベントのリスナーを登録しています。

これにより、DOMの構築が完了した後に、初めて中の処理が実行されます。

もし、DOMContentLoadedイベントを使わずに次のように書くと、エラーになってしまうかもしれません。

const title = document.getElementById('title');
console.log(title.textContent);  // エラー: titleがnullになる可能性あり

なぜなら、JavaScriptの実行時点では、まだ<h1 id="title">タグが読み込まれていない可能性があるからです。

DOMContentLoadedイベントを使えば、そういったタイミングのズレを防げます。

特に、<head>タグ内や<body>タグの先頭でJavaScriptを読み込む場合は、必須のテクニックだと覚えておきましょう。

○サンプルコード10：フォームの入力値を取得・設定する

最後は、フォームの入力値を操作する方法です。

Webサイトでは、フォームを使ってユーザーからデータを受け取るシーンが多々あります。

そのデータを検証したり、別の場所に表示したりするのに、JavaScriptが役立ちます。

次のようなフォームがあるとしましょう。

<form>
  <label>名前：<input type="text" id="nameInput"></label>
  <button type="button" id="submitBtn">送信</button>
</form>
<p id="nameOutput"></p>

ここから、JavaScriptを使って入力値を取得し、別の場所に表示してみます。

const nameInput = document.getElementById('nameInput');
const submitBtn = document.getElementById('submitBtn');
const nameOutput = document.getElementById('nameOutput');

submitBtn.addEventListener('click', () => {
  const name = nameInput.value;
  nameOutput.textContent = `こんにちは、${name}さん！`;
});

input要素の現在の値を取得するには、valueプロパティを使います。

一方、値を設定するときも、input.value = '新しい値'という具合に、valueプロパティを使います。

ボタンをクリックすると、入力されている名前を取得し、あいさつ文とともに<p id="nameOutput">に表示します。

フォームを扱う際の注意点は、実際に送信されるまでは、input要素のvalueプロパティが最新の値だということです。

ですから、送信ボタンのclickイベントをリッスンするのではなく、formのsubmitイベントをリッスンする方が望ましいでしょう。

const form = document.querySelector('form');
form.addEventListener('submit', (event) => {
  event.preventDefault();  // フォームの送信を中止
  const name = nameInput.value;
  nameOutput.textContent = `こんにちは、${name}さん！`;
});

この例では、submitイベントのデフォルトの動作をpreventDefault()で中止することで、フォームの送信を止めています。

そして、送信時の入力値を使って、あいさつ文を表示しているわけです。

まとめ

JavaScriptを使ったHTMLの操作は、Webサイトをインタラクティブにする上で欠かせないスキルです。

タグの取得や属性の操作、スタイルの変更など、基本的なテクニックを身につけることで、より動的で魅力的なWebサイトを作れるようになります。

エラー対処やHTMLとの連携Tips など、実践的なノウハウも押さえておくと、さらに応用の幅が広がるでしょう。

今回の記事で紹介したサンプルコードを参考に、ぜひ自分でもJavaScriptとHTMLを組み合わせて、オリジナルのWebサイトを作ってみてください。

最初は難しく感じるかもしれませんが、失敗を恐れずにチャレンジすることが大切です。

JavaScriptの学習を通じて、プログラミングの楽しさや可能性を体感していってください。

みなさんの活躍を心から応援しています！