DOMとは

DOMとはDocument Object Modelの略。
HTMLの構造をツリー構造として扱い、プログラミング言語からHTMLの要素にアクセスし操作するための仕組み。
WebブラウザがWebサーバから送られたHTML文書を解析し、DOMというデータ構造に変換している。

DOMのツリー構造

画像引用元　 JavaScript HTML DOM

ツリーの各要素をノードという。
ノードには要素ノード(エレメントノード)、テキストノードがある。
要素ノードはHTMLの情報、テキストノードはテキスト部分の情報を持っている。

※Rubyはサーバーサイドで動く言語なので、ブラウザ側で動くJavaScriptでDOMを操作する。

DOMを操作する

最近はReactやVue.jsなどのフレームワークがスタンダードになりつつあり、この方法で操作する機会は減りつつあるが、現在でも使用されている。

私はDOM操作をざっくりではあるけど学んだ結果、「なるほど、そんな風に動かしてるんだ〜」とそれまで曖昧だった、ブラウザ側でどのようにHTMLを操作するかの理解を深めることができた。

それでは例示しつつざっくり触れる。

<button>更新</button>

このままではDOM操作ができない。識別子がないと要素を識別できないからだ。

DOMを操作するにはidやclassが必要

<button id="button-update">更新</button>

ここからDOMを取得するには、下のJavaScriptを使う

document.getElementById("button-update")
// => "<button id='button-update'>更新</button>"

ブラウザ内の JavaScript エンジンには、基本的な文法解析機能のほかに、DOM 操作などブラウザ固有の処理を行うためのオブジェクトがあらかじめ用意されています。
その一つが、document オブジェクトです。これは、HTML 文書（つまり、画面に表示されている Web ページ）を表すオブジェクトで、DOM 操作のためのメソッドが含まれています。

引用元　JavaScript超基礎講座！DOM操作を学ぶ | Hypertext Candy

最初のdocumentがそのオブジェクト。 getElementById("id名")というメソッドで指定されたidを持つノードをDOMとして取得する。

※ドキュメントの操作 - ウェブ開発を学ぶ | MDNによるとこのgetElementById("id名")というメソッドは古い手法らしく、querySelector()の方が推奨されているらしい。今回はあくまでも基本を抑えて理解するのが目的なのでgetElementById("id名")を使います。

要素の中のテキストを取得したい場合はinnerTextメソッドを使う

const buttonUpdate = document.getElementById("button-update")
buttonUpdate.innerText
// => "更新"

テキストを書き変えたい場合は

const buttonUpdate = document.getElementById("button-update")
buttonUpdate.innerText = "アップデート"

とすればいい。

イベントドリブン

何かをしたら何かが起こるようにすることを考える。
ここでは、インプットフォームに数字を入れてボタンをクリックすると、表示されている初期値0の数字が加算されていくものを作る。
HTML

<input type="number" name="amount" id="js-amount">
<button id="js-add-button">足す</button>
<p id="js-result">0</p>

考え方
まず、各要素のDOMを取得する必要がある。

var currentValue = 0  // ここは変数
const jsAddButton = document.getElementById('js-add-button')
const jsAmount = document.getElementById('js-amount')
const jsResult = document.getElementById('js-result')

次にクリックしたらどう処理していくかを書く。
DOMにイベントを仕掛けるにはaddEventListenerを使う。第一引数にイベントの種類を指定する。

jsAddButton.addEventListener('click', () => {
    const amount = jsAmount.value    // valueでinputに入力された値を取得
    currentValue += parseInt(amount)  // input内の値は実は文字列。parseIntで整数へ
    jsResult.innerText = currentValue  // currentValueを上書き
  })

これらを合わせて
JavaScript

document.addEventListener('DOMContentLoaded', () => {
  var currentValue = 0  // ここは変数
  const jsAddButton = document.getElementById('js-add-button')
  const jsAmount = document.getElementById('js-amount')
  const jsResult = document.getElementById('js-result')

 jsAddButton.addEventListener('click', () => {
    const amount = jsAmount.value    // valueでinputに入力された値を取得
    currentValue += parseInt(amount)  // input内の値は実は文字列。parseIntで整数へ
    jsResult.innerText = currentValue  // currentValueを上書き
  })
})