JavaScriptの基礎をおさえる 番外編 〜innerTextとinnerHTMLの違いとは？ DOMって何？〜

　JavaScriptの練習をするにあたってよくでてくるinnerTextとinnerHTML、それからDOM。それぞれざっくりとした理解はしているつもりだが、今回は学習の足固めとして正しく理解をしたいと思う。

innerTextとinnerHTMLについて

inner = 内側、内部
Text = 文字情報
がinnerTextである。
　つまり、HTML要素の<開始タグ>と<終了タグ>に内包されたテキストのことである。これはHTML要素に内包されたコンテンツそのものを表しているが、innerTextプロパティは内包されたテキスト部分のみを参照する。 もしもコンテンツ内に別の要素が内包されていても、要素の操作はできない。
innerHTMLプロパティの場合は、テキストだけでなくHTML要素も認識できるプロパティなので、HTML要素を含めた値を取得したり、代入したりすることができる。

例

html

<div id = "noodle">ラーメン食べたい</div>

javascript

let elem = document.querySelector("noodle");

elem.innerText  // => ラーメン食べたい

となる。一方、

html

<div id = "noodle">ラーメン<b>すごく</b>食べたい</div>

の場合、

javascript

let elem = document.querySelector("noodle");
elem.innerText   //=>　ラーメン<b>すごく</b>たべたい（<b>タグはテキストとしてみなされる）

elem.innerHTML   //=>ラーメンすごく食べたい（すごくの部分がboldになって表示される）

※ document.querySelector は、引数に与えたCSSセレクタに合致する画面上のHTMLタグ要素を一つ取得する。

DOMについて

　DOMとは、Document Object Modelの略である。
　例えば何かのページを見たいと思い、クリックしたとすると、サーバーに「見せてね」というリクエストが送られる。それに対してサーバーはレスポンスとしてHTMLを返すのだが、サーバーから返された時点ではただのテキストの状態である。

　それをツリー構造というものにして、

　「あぁこのタグはここと関連しているから、ここまでがbodyですね。なのでこう表示しましょう」という風に認識するのがDOMの役割である。（違っていたらすみません。ご指摘お願いします。）
　したがって、JavaScriptで「ここの要素を取得して〜してね」という指示は、正確にはHTMLに働きかけているのではなく、DOMに働きかけているのである。
ちなみに右クリックして使うことができる「検証」ツールで見えている画面がDOMである。ツリー構造をしているのが一目瞭然である。DOMは書き換えることができるから、「検証」で書き換えたものはとりあえずページに反映される。ところがページをリロードすると、改めてサーバーに保存されているHTMLを読み込むため、書き換える前のページに戻る。

今日のまとめ

DOMはJavaScriptを理解するうえで重要な考え方であることがわかった。イベントの発火はDOMを介して行われるものであり、HTML自体が書き変わるわけではないということがわかった。

参考文献
JavaDrive様より Home › JavaScript入門 › DOM入門