【学習日記#9】JavaScriptでページ操作・DOMの基本からイベントまで

ブログ

こんにちは、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 を使った例です。

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

ただし、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との組み合わせを学んでいく予定です。
引き続き頑張っていきますので、よろしくお願いします！