DOM

HTMLの要素を取得したり、追加するというのは次回以降の話になります。
document や textContent など、見慣れない表現が突然出てきたりしますが、
ここでは「JavaScriptではこんなことができるんだなぁ」くらいで見ておいても大丈夫です。
しかし、JavaScriptの考え方の基礎になるので、後で戻ってきて再確認しても良いかと思います。

この研修では、JavaScript フォルダに2-1というフォルダ作成して作業します。

DOMとは何か

MDNには
『Document Object Model (DOM) は HTML や XML 文書のためのプログラミングインターフェイス…』などと書いてあります。
HTMLのような階層構造を扱うための仕組み というようなものです。
HTMLの基本の形はHTMLタグがあって、その下にheadタグやbodyタグが入れ子のような形になっています。親要素から子要素に枝分かれしていく形から「 DOMツリー 」と呼ばれたりします。そして、それぞれの要素を「 ノード 」といいます。

「document」が階層の一番上に位置しているので、ここからそれぞれの要素を辿っていくことができます。

ファイルの準備

2-1 フォルダの中に index.html と js フォルダを作成してください。
js フォルダの中に main.js を作成してください。
index.html からbodyタグの中でscriptタグで対象の main.js を読み込んでください。

以下のようにできれば、準備完了です。（ファイルの構造は、JavaScript 1章と同じように作ってもでも大丈夫です）
・JavaScript/2-1/index.html
・JavaScript/2-1/js/main.js

DOMを操作してみる

JavaScript側からDOMを操作することで、HTMLを操作できるので main.js にコードを書いて確認してみます。
全ての始まりのdocumentから、bodyの中にアクセスしてテキストに「Hello」と書き込むイメージです。

document.body.textContent = 'hello';

すると、HTML側では何も書いていなかったのにブラウザを更新すると「Hello」と出ているはずです。
また、titleを変更することもできます。

document.title = 'JavaScript2-1';

このように、DOMを使えば、JavaScriptを使ってページ内のほぼ全てを操作することができるので、具体的な要素の取得や追加の方法を2-2以降で見ていきます。

windowオブジェクト

windowオブジェクトとは「ブラウザのウィンドウのこと」だと考えてください。
アクセスしたブラウザが持っている情報（ページのURLなど）が、windowオブジェクトの中に入っているといったイメージです。

ただ、これだけだとちょっとわかりにくいので、 main.js に以下のように書いてブラウザを更新してみてください。

//windowオブジェクトの中身をconsole.logで確認してみます。
console.log(window);

△のマークを押して、中身を展開するとwindowオブジェクトの一覧が表示されます。

（例その１）location

例えば、この中で「location」というのを探すと、今自分が開いているページのURLの情報を持っていることが確認できます。

つまり、 location.href; と書くだけでURLを取得することができます。
ではURLを取得して、console.logで確認してみます。

//①location.hrefでURLを取得して、変数urlに代入。
let url = window.location.href;
//ブラウザを更新すると、URLが表示されます。
console.log(url);

（例その２）alert

もう少し身近な例を見てみましょう。 JavaScript1章の「Hello World」でやった window.alert を思い出してください。

//せっかくなので、「Hello World」と表示させてみます。
window.alert('Hello World');

ブラウザを更新すると、アラートのダイアログが表示されたはずです。
いきなりこれが使用できるのもwindowオブジェクトが最初から alert() の関数を持っているからです。
検索してみると、確かに alert() をプロパティとして持っていますね。

ちなみに、先頭の「window.」があったり無かったりしていますが、これは省略可能です。
「window.alert()」のように、つけた方がわかりやすい場合や慣習的な問題で使い分けられているだけで、どちらでも同じ結果になります。

最後にdocument…

JavaScriptの話で「document.getElementById」というのを聞いたことがある方もいると思います。
（聞いたことなくても、2-1がその内容なので大丈夫です）
実はこのwindowオブジェクトの中にdocumentオブジェクトも存在しています。

このdocumentオブジェクトの中身を△のマークを押して展開してみると、HTMLを構成するheadやbody等があることを確認できます。
（この画像では展開していないので、各自で確認してみてください）
そのため、documentオブジェクトを通して、HTMLの要素を操作することができます。

それでは、次回以降で
この Document ObjectのModel（DOM） の操作について見ていきます。

DOM