今のところ、優勢なアペラシオンがなぜ刺激的であるのかを話しました。
なぜあなたは気にする必要があります。
それを使用するさまざまなサイトは、ゲームのすべてのエキサイティングなものを無限の可能性があります。
しかし、我々はまだ実際にDOMが何であるかについては話していません。
だから私たちはこのビデオでそれを行い、ちょうどそれを定義しようとします。
Dio am。
DomはDocumentオブジェクトモデルを表します。
これらの3つの言葉の意味は、来るべきスライドでもう少し意味をなさないでしょう。
しかし、それをより高いレベルで定義することから始めましょう。
ドームはあなたのJavaScriptとあなたの年齢の間のインターフェイスです。
Tim Mounty
SSそれは基本的に特別なjavascriptオブジェクトjavascriptメソッドの束であり、私たちはHとやり取りすることができます。 M. S.
我々は要素を追加することができるものを変えることができると評価する要素を削除する色を変える色を変えるそれらのHと相互作用するあらゆる種類の刺激的な方法 M. S. 評価する。
このスライドでは、DOMがどのように構築され、なぜドキュメントオブジェクトモデルと呼ばれるのかについて少し話をします。
1とのタグを持っていますそれ。
だから私たちは、電子メールのページをロードすると、ブラウザのように見え、それはちょうどいくつかの単純な彼のためにタイトルとテキストと私のヘッダーをテキストとして、私のリンクとH -
ですから、ブラウザでこれを開くと、これが表示されますが、シーンの裏にDOMが作成されます。
これはここから作られたものです。
だから私が意味するのは、この時代のティムはたくさんのJavaScriptオブジェクトになっているということです。
各オブジェクトは、これらの要素の1つをモデル化します。
これが、オブジェクトモデルをドキュメントオブジェクトモデルの一部にするところです。
だから、再びブラウザに各チームをロードすることを繰り返すだけで、ブラウザは私たちにこのようなことを表示します。
しかし、実際には私たちの犬Rustyをjavascriptオブジェクトを使ってモデル化したように、javascriptオブジェクトを持つ各要素のこのモデルを実際に作ります。
彼は財産名と他の品種と年齢を持っていました。
これらのオブジェクトは、コンテンツが異なる以外は基本的に同じものです。
彼らはタグの種類のようなものを持っているだろうテキストソースの属性色の背景色のテキストサイズすべてのオブジェクトのすべてが含まれているすべての異なるプロパティ。
これらのオブジェクトを扱うのに多くの時間を費やすつもりですので、詳細は重要ではありません。
私がここで強調したいのは、それぞれの時間Lをロードすることです。 これはブラウザに表示され、ブラウザはそのTim
Lを受け取り、各要素を取り出してオブジェクトに変換します。
それはオブジェクトモデルの部分をカバーします。
ドキュメントはどうですか？
ですから、これは、DOMから取得した構造のタイプの小さな図です。トップレベルのオブジェクトです。すべてがHのモデル全体に​​含まれています。 T. 私たちをmounseersと呼んでいます。
だから、私たちはどんなウェブページにも行くことができます。
だから、私はGoogleをオープンにしています。 ドキュメントという言葉。
そして私がそれをするとき、私はこの大きな目的を生み出す大きなものを手に入れます。
それ以外はjavascriptオブジェクトのようには見えません。
それは本当に私たちが期待するものではありません。
それはブラウザが私を隠しているからです。
実際に私が見せているのは、HQメールがテキストのように見えるが、このティモでモデル化された実際のオブジェクトを私に見せているわけではない。
Rを使う必要があります。私たちはそれをキャンセルします。
ですから、コンソールオブジェクトのもう一つのメソッドであるcancel dot D I 私。 R. これが行うすべてのドキュメントは、私たちがよく知っているこのオブジェクト構文でドキュメントオブジェクト全体をプリントアウトすることです。
だから、私たちが独自に書いたような普通のオブジェクトであることがわかります。そこにはもっと多くの情報がある以外は、犬のオブジェクトのRustyと同じです。
だから私たちはフォントや画像リンクのようなものを持っていますが、私たちはまた身体のようなものを持っており、この身体は全身を表しています。
だから、あなたがここで見るすべての要素は体の中にあります。
だから私が体を開くと、あなたはChildのノードと呼ばれるものを含む他の多くのプロパティがあることがわかります。
だから子ノードはdivがあることを私たちに示しています。スクリプトタグがあり、bodyの中に別のdivがあります。
私たちが要素に行くと、それが分かります。
体の中にある体はここにあります。
最初のdivにスクリプトタグがあり、2番目のdivがあります。
そして、3番目のdivを開くと、2番目のdivに2つ以上のdivがあると予想されます。
私たちが領事に行き、2番目のdivを見てから、子ノードを見てみましょう。もう2つのdivがあります。見て分かるように、domは本当に巨大になります。
数百、数百の異なるプロパティとメソッド、異なるノード、そしてネストされたオブジェクトのこの狂った構造全体があります。
それはただのものだ。
私がこのクラスの冒頭で言及した時代のうちのひとつで、あなたはすべてを知らずに快適にしなければならないでしょう。
ほとんどの開発者がここでプロパティの半分を知っているわけではないことを、私は今話すことができます。
私は彼らが最大で約10％で働いていると言いたい。
私たちが使うことはほとんどないほどのものがここにあります。
そして、いつか何かが現れ、私たちがこれまでにやったことがない何かをしなければならない。
私たちはそれをgoogleして、大丈夫だと分かりましたので、それは未硬化の変更プロパティのためです。
私は今まで知らなかった。
そして、それは本当に開発者になることです。
これまではjavascriptを使って、変数について学んだ関数やオブジェクトについて知っている小さな制御された世界の中で少しでも作業してきました。
物事を行う方法は限られていますが、DOMで知る必要がある知識のサブセットが非常に限られています。
今、私たちはこの巨大な巨大な生態系を持っています。
だから私はここにそれほど多くのことがあることを繰り返し言いたい。
私たちは重要な部分に焦点を当てるつもりですが、目的は暗記することではありません。
目標はすべての単一の財産を習得することではありません。
もう一度10％も有能なウェブ開発者である必要があります。
さて、戻ってみましょう、私はもうこの1回以上行きたいです。
私たちが話したことを要約してください。
したがって、DOMはドキュメントオブジェクトモデルの略です。
あなたのJavascriptとあなたのHとのインターフェースです M. S. それは私たちがjavascriptを使って物事をインタラクティブにする方法です。
これは、新しい要素をページに追加する方法や、リンクのref属性を変更する方法、私たちの体の背景イメージを変更する方法、フォームから値を取得する方法、カスタム検証やアニメーション、インタラクティブな操作いくつかのコードをクリックする要素は、これらすべての異なる可能性をすべて実行します。これは、ドキュメントオブジェクトモデルがJavaScriptをHに接続するという事実から生じます。 M. S. アクセス。
ですから、ドキュメントオブジェクトモデルのオブジェクトモデル部分は、Hのモデル要素であるjavascriptオブジェクトの束であることを示しています。
T. 量。
だから私たちはATACを持っています。
そして、ここで見ているこのH1タグを表す別のオブジェクトで終わります。
最後に、文書オブジェクトモデルと呼ばれるのは、そのすべてが文書と呼ばれるオブジェクトの内部にあるからです。
それは根本的なノードで、他のすべてがそこに住んでいます。
次のビデオでは、いくつかのコードを書き始めます。