当初、JavaScript言語は web ブラウザのために作られました。それ以降、言語は進化し、多くの用途やプラットフォームをもつ言語になりました。

ホスト環境は、言語のコアに加えてプラットフォーム固有のオブジェクトや機能を提供します。Web ブラウザは webページを制御する手段を提供します。Node.JSはサーバサイドの機能などを提供します。

これは、JavaScript がWebブラウザで実行されているときの鳥瞰図です:

window と呼ばれる “ルート” オブジェクトがあります。それは2つの役割を持ちます。:

  1. 1つ目は、それはJavaScriptコードのグローバルオブジェクトであり、チャプター グローバルオブジェクト で説明したとおりです。
  2. 2つ目は、それは “ブラウザウィンドウ” を表し、ウィンドウを制御するためのメソッドを提供します。

例えば、ここではグローバルオブジェクトとして使います:

function sayHi() {
  alert("Hello");
}

// グローバル関数は window のプロパティとしてアクセス可能
window.sayHi();

また、ここではウィンドウの高さを見るためにブラウザウィンドウとして使います:

alert(window.innerHeight); // 内部の window の高さ

window固有のメソッドやプロパティがたくさんあります。我々は後ほどそれをカバーしましょう。

ドキュメントオブジェクトモデル (DOM)

document オブジェクトはページのコンテンツへのアクセスを提供します。私たちはそれを使ってページ上のものを変更したり作成することができます。

例:

// 背景色を赤に変える
document.body.style.background = 'red';

// それを1秒後に戻す
setTimeout(() => document.body.style.background = '', 1000);

ここでは document.body.style を使いましたが、まだまだあります。プロパティとメソッドは仕様で説明されています。偶然にも、それを開発する2つのワーキンググループがあります:

  1. W3C – ドキュメントは https://www.w3.org/TR/dom です.
  2. WhatWG, https://dom.spec.whatwg.org で公開しています.

あいにく、2つのグループが必ずしも一致するわけではないので、2組の標準があります。しかし、彼らは密接な関係にあり、最終的には物事はマージされます。従って、あなたが見つけたドキュメントはとても似ており、99% 一致します。ごくわずかな違いがありますが、気づかないかもしれません。

個人的には、https://dom.spec.whatwg.org が使いやすいと思います。

ずいぶん昔、まったく標準がありませんでした – 各ブラウザが必要なものを実装しました。従って、異なるブラウザは、同じものに対して異なるセットのメソッドとプロパティを持っていました。そして、開発者はそれぞれのために異なるコードを書かなければなりませんでした。暗く、散らかった時代です。

今でさえ、ブラウザ固有のプロパティを使い、非互換を回避している古いコードに出会うことがあります。しかし、このチュートリアルでは、現代の物を使います: あなたが本当に必要になるときまで、古いものを学ぶ必要はありません(本当に必要になるときはあまりないでしょう)。

その後、誰もが合意をするための試みとして、DOM標準が現れました。最初のバージョンは “DOM Level 1” で、それは DOM Level 2, 次に DOM Level 3 と拡張され、今は DOM Level 4 になりました。WhatWG グループの人々はバージョンに疲れて、単に “DOM” と番号なしで呼んでいます。私たちもそうしましょう。

DOM はブラウザだけではありません

DOM 仕様は ドキュメント の構造を説明し、それを操作するためのオブジェクトを提供します。それを使う非ブラウザのものもあります。

例えば、HTMLページをダウンロードしそれを処理するサーバサイドのツールです。DOM仕様の一部のみをサポートしているかもしれませんが。

スタイルのための CSSOM

CSS ルールやスタイルシートは HTML のように構造化されていません。そのため、それらがオブジェクトとしてどのように表現され、どのようにそれらを読み書きするかを説明する別の仕様CSSOMがあります。

CSSOM は document のスタイルルールを変更するとき、DOM と一緒に使われます。実際には、通常はCSSルールが静的であるため、CSSOMはめったに必要ありません。 JavaScriptのCSSルールを追加/削除することはめったにありませんので、今すぐはカバーしません。

BOM (HTML仕様の一部)

ブラウザオブジェクトモデル(BOM)は document 以外のすべてと連携するブラウザ(ホスト環境)により提供される追加オブジェクトです。

例えば:

  • navigator オブジェクトはブラウザとオペレーティングシステムのバックグラウンドの情報を提供します。多くのプロパティを持っていますが、最も広く知られている2つのプロパティはこれです: navigator.userAgent – 現在のブラウザについて, navigator.platform – プラットフォームについて(Windows/Linux/Macなどを分ける)
  • location オブジェクトは現在のURLを読み、ブラウザを新しいURLへリダイレクトできます。

これは、location オブジェクトを使う方法です:

alert(location.href); // 現在のURLを表示
if (confirm("Go to wikipedia?")) {
  location.href = 'https://wikipedia.org'; // 別のURLへリダイレクト
}

関数 alert/confirm/prompt もまた BOM の一部です: それらは直接は document と関係はしませんが、ユーザとコミュニケーションをとる純粋なブラウザメソッドを表します。

HTML 仕様

BOM は一般的な HTML 仕様の一部です。

https://html.spec.whatwg.org のHTML仕様は “HTML言語” (タグ、属性) についてだけでなく、多くのオブジェクトやメソッド、ブラウザ固有のDOM拡張をカバーします。それは “広義のHTML” です。

サマリ

標準に関して:

DOM 仕様
document 構造、操作、およびイベントについて説明します。https://dom.spec.whatwg.org を見てください。
CSSOM 仕様
スタイルシートとスタイルルール、それらの操作や document へのバインディングについて説明します。https://www.w3.org/TR/cssom-1/ を見てください。
HTML 仕様
HTML言語(タグなど) や BOM(ブラウザオブジェクトモデル) を説明します – 様々なブラウザ関数があります: setTimeout, alert, location など、https://html.spec.whatwg.org を見てください。それは DOM 仕様と多くの追加プロパティやメソッドを使ったその拡張です。

document はUIで中心的な役割を果たすため、今からDOMを学ぶことになるでしょう。それを使って作業するのが最も複雑な部分です。

学ぶことが非常に多くあるので、上のリンクには注意してください。すべてをカバーし、覚えるのは不可能です。

プロパティまたはメソッドについて読みたくなったとき – https://developer.mozilla.org/en-US/search のMozilla マニュアルは良いです、が対応する仕様を読む方がよりよいかもしれません: より複雑で長いですが、基本の知識は健全で完全なものになります。

チュートリアルマップ

コメント

コメントをする前に読んでください…
  • 自由に記事への追加や質問を投稿をしたり、それらに回答してください。
  • 数語のコードを挿入するには、<code> タグを使ってください。複数行の場合は <pre> を、10行を超える場合にはサンドボックスを使ってください(plnkr, JSBin, codepen…)。
  • 記事の中で理解できないことがあれば、詳しく説明してください。