【HTML CSS#9】JavaScriptでページ操作・DOMの基本からイベントまで

ブログ

こんにちは、aniumaでインターンをしているRyuseiです！
今回もプログラミング学習の備忘録として、JavaScriptのDOM操作について学んだことをまとめていきます。

前回までHTMLやCSS、BEM、Bootstrapについて学んできましたが、今回はJavaScriptで「ページの要素を操作する方法」を中心に学びました。
これからのサイト作成で役立つ基本的な技術なので、しっかりと整理していこうと思います。

目次
  1. JavaScriptでページの要素を取得する
  2. JavaScriptで要素を作成する
  3. JavaScriptでイベントを設定する
  4. 学び

JavaScriptでページの要素を取得する

まずは、画面サイズを取得する方法から学んでいきたいと思います。
画面の幅や高さを取得するには、以下のコードを使います。

console.log(window.outerHeight); // 画面表示の高さ
console.log(window.outerWidth); // 画面表示の幅

また、要素を取得する方法としては document.getElementById を使いました。

var button = document.getElementById("button");  // window. は省略可能
button.value = 'クリック';  // ボタンの表示テキストを変更

document は window の中のオブジェクトで、ページの情報を扱うときによく使います。

いかにdocument.getElementのメソッドを簡単にまとめておきます。

メソッド名例取得内容特徴
getElementByIddocument.getElementById("main")IDに一致する要素単一要素、返り値は1つ
getElementsByTagNamedocument.getElementsByTagName("p")タグ名に一致する全要素複数、HTMLCollectionで返る
getElementsByClassNamedocument.getElementsByClassName("hoge")クラス名に一致する要素複数、HTMLCollectionで返る

JavaScriptで要素を作成する

次は、HTML要素を作成する方法です。

var hello = document.createElement("p");  // <p>タグを作成
var text = document.createTextNode("こんにちは");  // テキストノードを作成
document.body.appendChild(hello).appendChild(text);  // ページに追加

このように、createElement と createTextNode を組み合わせて、新しい要素をページに追加できます。
これができると、ページに動的に要素を増やせるようになるので便利だと思います。

JavaScriptでイベントを設定する

イベントとは、ボタンがクリックされたり、ページが読み込まれたタイミングで動作する処理のことです。

まずは基本の onClick を使った例です。

<body>
  <input type="button" id="button" value="おす" onClick="check()">
  <script>
  　function check() {
    console.log('ボタンが押されました。');
  }
</script>
</body>

ただし、onClick は一つしか設定できないので、複数の処理を登録したい場合は addEventListener を使うのがおすすめです。

<input type="button" id="button" value="おす">
<script>
  document.getElementById("button").addEventListener("click", check);
  document.getElementById("button").addEventListener("click", hello);

  function check() {
    console.log('クリックされました。');
  }

  function hello() {
    console.log('lolされました。');
  }
</script>

このように複数のイベントを登録できるのが便利です。
上から順に処理が実行されることも理解できました。

学び

今回は、JavaScriptでページの要素を取得・作成・操作する方法と、イベントの基本的な扱い方を学びました。
実際にコードを書いて試してみることで、少しずつ理解が深まってきた気がするのでこれから学んでいく人も実際に手を動かしてみることをお勧めします。
これからは、これらの知識を使って、自分のプロフィールサイトに動きをつけたり、インタラクションを追加していきたいです。

次回はさらにJavaScriptの応用や、CSSとの組み合わせを学んでいく予定です。
引き続き頑張っていきます。