【JavaScript講座】要素の指定方法

前回は、DOM（ドム）について、簡単に紹介しました。

【JavaScript講座】DOM（ドム）とは

2019年9月18日

今回は、要素の指定方法について。

getElementById を使って、id属性を指定する方法を軽く紹介しましたが、もう少し詳しくやっていきます。

要素の指定方法

JavaScript を使って、DOM を操作する方法です。

getElementById について

getElementById は、id属性を指定するときに使います。

document.getElementById('id属性')

といった感じで指定することができます。

id属性は、基本的に一つのページに一つしかありません。

getElementsByClassName について

getElementsByClassName は、class属性を指定するときに使います。

class属性は、複数の要素に同じ class名を付けることができます。

document.getElementsByClassName('class属性')

といった感じで指定することができます。

querySelector について

querySelector は、h1 など、任意の HTML要素を指定するときに使います。

document.querySelector('HTML要素')

といった感じで指定することができます。

querySelectorAll について

querySelectorAll は、複数の HTML要素を指定するときに使います。

document.querySelectorAll('HTML要素')

といった感じで指定することができます。

サンプルコード

要素の指定方法のサンプルコードを紹介します。

まずは、HTML から。

<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>JavaScript サンプル</title>
  <style>
    .text-red{
      color:red;
    }
  </style>
</head>
<body>
  <h1>見出し</h1>
  <p class="text-red">テキスト 1</p>
  <p id="paragraph">テキスト 2</p>
  <ul>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
  </ul>
  <script src="js/sample.js"></script>
</body>
</html>

本来なら、スタイルシートも別ファイルにした方が良いのですが、わかりやすくするために HTML内に直接記述しています。

続いて、JavaScript です。

document.querySelector('h1').textContent = '見出しを変更しました！';

document.getElementById('paragraph').style.color = '#ff0000';

document.querySelectorAll('li').forEach(li => {
  li.textContent = 'リストを変更しました！';
});

それでは、実行結果です。