モダンJavaScript入門: DOM操作とイベント処理

フロントエンド Javascript

目次

  1. JavaScriptとDOM
  2. DOMの操作
  3. イベント処理
  4. HTML/CSSとの連携
  5. まとめ

JavaScriptとDOM

JavaScriptはウェブページの動的な要素を実装するための言語です。DOM(Document Object Model)はこのウェブページを表現する方法を提供します。DOMはウェブページのオブジェクト指向表現で、JavaScriptを通じてDOMを操作することでウェブページの内容と構造を動的に変更できます。

console.log(document.querySelector('body')); // bodyタグの内容をコンソールに出力します。

DOMの操作

DOMを操作することはウェブページの内容を動的に変更するための基本的な技術です。JavaScriptを使用して要素を選択、追加、削除、修正することができます。

let element = document.querySelector('#myElement'); // idが'myElement'の要素を選択します。
element.innerHTML = "<p>新しい内容</p>"; // 選択した要素の内容を変更します。

イベント処理

イベントはユーザーの行動（クリック、キーボード入力、マウス移動など）に対応するプログラムを作成する方法を提供します。イベントリスナーは特定のイベントが発生したときに実行される関数を指定します。

let button = document.querySelector('#myButton'); // idが'myButton'の要素を選択します。
button.addEventListener('click', () => { // クリックイベントリスナーを追加します。
    console.log('Button clicked!'); // ボタンがクリックされたらコンソールにメッセージを出力します。
});

HTML/CSSとの連携

JavaScriptはHTMLとCSSと密接に連携し、ウェブページの動的な要素を実装します。例えば、JavaScriptを通じてHTML要素を動的に生成したり、CSSスタイルを動的に変更することができます。

let newElement = document.createElement('div'); // 新しいdiv要素を生成します。
newElement.style.color = 'red'; // 生成した要素のテキストの色を赤に変更します。
document.querySelector('body').appendChild(newElement); // 生成した要素をbody要素の子として追加します。

まとめ

この記事では、モダンJavaScriptの重要な概念であるDOM操作とイベント処理、そしてHTML/CSSとの連携について学びました。これにより、ウェブページを動的に作成するための基本的な理解を得ることができたことと思います。