[JS] DOM操作の基本

はじめに
1. DOMとは
演習1
1. HTMLファイルを作成
2. JavaScriptファイルを作成
演習2
1. HTMLファイルを作成
2. JavaScriptファイルを作成
参考記事

はじめに

DOMとは

DOMとは(Document Ofject Model)を省略した呼び名で、HTMLのタグなどにアクセスして、CSSを追加したり、タグを追加したり文書を表現・操作する事のできるAPIです。
ブラウザは、 HTML を読み込むと実は内部的に Document Object Model もしくは DOM と呼ばれるこういったデータ構造が作られて、その内容に応じてページが描画がされる、という仕組みになっています。この DOM を JavaScript で操作することで様々な機能を作ることができます。JavaScript が操作しているのは、あくまで DOM であって HTML のほうではない点に注意しましょう。

出典：https://www.w3schools.com/js/js_htmldom.asp

演習1

DOM操作をして、ボタンをクリックしたらできすとエリアの入力値を取得して、その入力値をアラートとしてだすようなものを作成しましょう。

HTMLファイルを作成

テキストエリアとボタンを用意し、それぞれ任意のidをもたせてあげましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>バリュー取得</title>
</head>
<body>
  <textarea id="textarea"></textarea>
  <button id="button">アラート</button>

  <script src="main.js"></script>
</body>
</html>

JavaScriptファイルを作成

'use strict';

document.addEventListener('DOMContentLoaded', () => {

  console.log('DOMContentLoaded');
  // DOMを取得し定数に代入する
  const buttonAlert = document.getElementById('button');
  const textarea = document.getElementById('textarea');
  // ボタンを押したときのクリックイベント
  buttonAlert.addEventListener('click', () => {
    alert(textarea.value);
  })

})

演習2

DOM操作を使って下記のようなものを作成しましょう。

「増やす」ボタンを押したらインプットフィールドと現在地を取得し、現在地に入力値を加算して、それを結果用のエリアに表示します。
「減らす」ボタンを押したらインプットフィールドと現在地を取得し、現在地に入力値を減算して、それを結果用のエリアに表示します。

数値

結果

HTMLファイルを作成

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カウンター</title>
</head>
<body>
  <label for="js-amount">数値</label>
  <input type="number" name="amount" id="js-amount">
  <button id="js-add-button">増やす</button>
  <button id="js-minus-button">減らす</button>

  <p>結果</p>
  <p id="js-result">0</p>
  
  <script src="main.js"></script>
</body>
</html>

JavaScriptファイルを作成

'use strict';

document.addEventListener('DOMContentLoaded', () => {
  console.log('DOMContentLoaded');
  // DOMを取得し定数に代入する
  const jsAddButton = document.getElementById("js-add-button");
  const jsMinusButton = document.getElementById("js-minus-button");
  const jsAmount = document.getElementById("js-amount");
  const jsResult = document.getElementById("js-result");
  // 現在地を0に設定して変数に代入する
  let currentValue = 0
  // 増やすボタンのクリックイベント
  jsAddButton.addEventListener('click', () => {
    currentValue += parseInt(jsAmount.value);
    jsResult.innerText = currentValue;
  })
  // 減らすボタンのクリックイベント
  jsMinusButton.addEventListener('click', () => {
    currentValue -= parseInt(jsAmount.value);
    jsResult.innerText = currentValue;
  })
})

innerText は、HTML要素の<開始タグ>と<終了タグ>に内包されたテキストを取得するメソッドです。

jsAmountは文字列として取得しているので、perseIntで数値型に変換してあげます。