Nagashima Laboratory

JavaScriptでWebページを操作する

JavaScriptでHTMLを操作する方法について確認します。

キーワード：定数, DOM , イベント

HTML上でセレクタ（idやclass）を設定する

JavaScriptでHTMLを操作するには、まずは操作したい部分に対して、idやclassを設定します。ページ内で1箇所しか出てこない部分（唯一の存在）にはid、複数回登場する要素に対しては、classを設定するのが基本の使い方です。

なお、1箇所しかない場合でも、classを使うことも可能です。

▼HTMLの記載例

<div id="id-name">
  <img src="images/img01.png" alt="" class="class-name">
  <img src="images/img02.png" alt="" class="class-name">
  <img src="images/img03.png" alt="" class="class-name">
</div>

HTML内で設定したセレクタ（idやclass）を呼び出す

大きく分けて、getElement(s)by〜を使う方法と、querySelectorを使う方法があります。

▼idを呼び出すとき

document.getElementByID('ID名');

▼classを呼び出すとき

document.getElementsByClassName('クラス名')

▼id・classどちらにも使える

document.querySelector('セレクタ名');
document.querySelectorAll('セレクタ名');

Allの方は、ページ内に複数あるセレクタ（class）をまとめて取得するときに使います。配列風オブジェクトに格納されます。

▼使い方（id="id-name"の場合）

// getElementを使う
document.getElementByID('id-name');

// querySelectorを使う
document.querySelector('#id-name');

getElementByIDを使うときは、初めから「id」を取得していることを明示しているので「#」がつきません。querySelectorのときは、idだけでなくclassも使えるため「#」を付けて区別しています。

▼使い方（class="class-name"の場合）

// getElementsを使う
document.getElementsByClassName('class-name');

// querySelectorを使う
document.querySelectorAll('.class-name');

classはidと異なり、一つのページ内に複数回登場する可能性があるセレクタです。そのため、複数形になっています。こちらも、querySelectorを使うときは、頭に「.」がついています。

DOM（Document Object Model）

JavaScriptで、HTMLを操作するという仕組みは、HTMLそのものを書き換えているのではなく、実際には「DOM」と呼ばれるものを操作しています。

DOMとは、ウェブ上の文書のコンテンツと構造からなるオブジェクトのデータ表現のことです。HTMLをツリー構造に分解して構築することで、JavaScriptで操作できるようになります。

プログラムを動作させる〜イベント

操作したいセレクタを指定したあとは、何をきっかけにプログラムを動かすかを決めます。それが、イベントです。

▼基本の使い方

対象.addEventListener('イベント名', 動作内容・関数名);

イベントの種類

イベントには様々な種類があります。下記は一例です。

▼キーボードに関するイベント

  • input：入力されたとき
  • submit：フォームが送信されるとき

▼マウス操作に関わるイベント

  • click：クリックされたとき
  • mouseover：マウスカーソルが重なったとき
  • mouseout：マウスカーソルが離れたとき

▼カット・コピー・ペーストなどに関わるイベント

  • copy：コピーされたとき
  • paste：ペーストされたとき
  • cut：カットされたとき

▼フォーカスに関わるイベント

  • focus：フォーカスされたとき
  • blur：フォーカスがはずれたとき

▼スクロールや画面タッチに関わるイベント

  • scroll：画面がスクロールされたとき
  • touchstart：タッチ入力が開始されたとき
  • touchmove：タッチ操作が連続しているとき
  • touchend：タッチ入力が終了したとき

▼画面（window）に関わるイベント

  • load：読み込みが完了したとき
  • resize：画面サイズが変わったとき

・・・など

スクロールをきっかけに動作するものについては、スクロールアニメーションなどで使用する、Intersection Observer API も使えます。ターゲットとなる要素が、指定領域（ビューポート）に入ったかどうかを検知する方法です。スクロールして、ターゲット要素が範囲に入ったときに、動作を呼び出すことができます。

▼基本の使い方

//監視機能の設置
const observer = new IntersectionObserver(動作内容・関数名);

//監視対象の指示
observer.observe(監視対象);

参考書籍・リンク