DOM操作とイベントリスナー

DOM操作に関して

DOM (Document Object Model) は、HTMLやXMLドキュメントの構造をツリー構造で表現したものです。JavaScriptを使用してDOMを操作することで、動的にウェブページの内容を変更できます。

DOM操作一例

.jsのファイルに以下を記述

const h1Elament = document.querySelector(‘h1’);

h1Elament.textContent = ‘Changed!’;

上記のようにh1Elament のオブジェクトをHTMLにアクセスする。

すると画面ブラウザの画面は以下のように変わる。

↓

イベントリスナーに関して

JavaScriptのイベントリスナーは、ユーザーがウェブページ上で行う様々なアクション（クリック、キー押下、スクロールなど）に対して反応するコードを実行するための手段です。イベントリスナーの使用方法やよく使われるイベントについて説明します。

よく使われるイベント

• click: 要素がクリックされたとき
• submit: フォームが送信されたとき
• focus: 要素がフォーカスを得たとき
• load: ページやイメージが読み込まれたとき
• scroll: ページがスクロールされたとき

イベントリスナーの一例

jsファイルに以下を記述

const btn = document.querySelector(‘button’);

btn.addEventListener(‘click’, () => {

  window.alert(‘ボタンが押されました。’)

});

document.querySelectorメソッドを使って、ページ内の最初の<button>要素を選択しています。querySelectorメソッドは、指定したCSSセレクタに一致する最初の要素を返します。この場合、<button>要素を選択しています。選択された要素は変数btnに格納されます。

addEventListenerメソッドは、指定したイベントが発生したときに実行される関数を登録するために使用します。

• click: イベントの種類を指定します。この場合、ユーザーがボタンをクリックしたときにイベントが発生します。
• () => { ... }: イベントが発生したときに実行される関数（イベントハンドラ）です。
• イベントハンドラの中では、window.alertメソッドを呼び出しています。ボタンがクリックされると、「ボタンが押されました。」というメッセージが表示されます。

結果ボタンをクリックするとブラウザには下記のように表示される。