DOUG LLOYD：このビデオでは、我々が望んでいました 個別の注意を呼び出します 非常に特定の JavaScriptを要素 あなたは便利かもしれませんことを あなたが起動しているとき Webページを操作する上で動作し、 あなたのWeb​​ページの内容を変更します その場で。 そして、それはの概念です ドキュメントオブジェクトモデル。 だから私たちは私たちのビデオで見たように JavaScriptは、オブジェクトは非常に柔軟性があります。 そして、彼らは様々なフィールドを含めることができます。 そして、私たちはたくさんのに行かなかったものの 詳細は、これらのフィールドまたはプロパティ、 我々はよりおそらくだろうこと 適切にそれらを呼び出します オブジェクトのコンテキストであっても これらのプロパティは、他のオブジェクトことができます。 そして、それらのオブジェクトの内部 他のオブジェクトことができます。 

あなたは、この非常に大きなオブジェクトを持っています 他のオブジェクトの多くの その中の、どののソート 大きな木のこのアイデアを作成します。 ここで、ドキュメントオブジェクトであります JavaScriptで非常に特別なオブジェクト それはあなたのウェブ全体を整理 傘の下にこの種のページ オブジェクトの。 だから、文書の内部 対象のオブジェクトが提示されています あなたのWeb​​ページの頭と体。 

それらの内部に他のあります オブジェクト、エトセトラ、エトセトラ、 あなたのウェブページ全体を有するまで この大きなオブジェクトで編成されて。 利点は右、ここには何ですか？ まあ、我々は動作する方法を知っています JavaScriptでのオブジェクトを持ちます。 

だから我々は、そのオブジェクトを持っている場合 ことを、私たちのウェブページ全体を指し、 正しいを呼び出すことによって意味 そのオブジェクトを操作する方法 または特定の修正 その特性のために、我々 の要素を変更することができます プログラムでのページ JavaScriptを使用しての代わりになります HTML、言う、で物事をコーディングします。 だからここの例です Webページの非常にシンプルな、右？ これは、HTMLタグ、頭を持っています。 

内部のタイトル、こんにちは世界があります。 それから私は、ボディを持っています。 その内部では、私が持っています 三つの異なるもの。 私は、H2ヘッダータグを持っています 段落、およびリンク。 これは非常に単純なWebページです。 

さて、どのようなドキュメントかもしれません このためオブジェクトは、次のようになり？ まあ、それは少しです 多分最初は怖いです。 しかし、それは実際には大きな木です。 そして、それの非常にルートに文書です。 

文書の中に、別のあります 私のページのHTMLを参照するオブジェクト。 そして、私のページのHTMLには、このすべてです。 そして、HTMLの内部 オブジェクト、私は頭のオブジェクトを持っています、 これはそこにすべてのものを指します。 

そして、そこの内部に、 私は、タイトルオブジェクトを持っています。 そして、そこの中に、私は別のものを持っています ちょうどこんにちは世界のオブジェクト。 私は私の体を持つことができます このような表現。 

私の体の内部では、私はH2を持っています オブジェクトと段落ためのpオブジェクト そして、リンクの対象。 そしてそうこの全体の階層 大きな木のように表すことができます 小さい少しの多いです それから出てくるもの。 さて、もちろん、時 我々は、我々のプログラミングしています 大きな木のようなものではないと思います。 私たちは、実際見てみたいです コー​​ド関連のもの。 

そして幸いにも、我々はできます 私たちの開発者ツールを使用します 実際に見てみることを このWebサイトのドキュメントオブジェクト。 そして、のはそれをやらせます。 だから私は、ブラウザのタブを開いてきました。 

そして、私は、開発者ツールを開いてきました。 JavaScriptの私のビデオでは、私 コンソールではないと述べました 唯一のどこか場所 我々は情報を印刷、 それはまた、どこの場所です 我々は情報を入力することができます。 この文脈において、どのような 私はと言うつもりです 私は戻って取得したいと思います ドキュメントオブジェクト、 私はそれを見て開始することができます。 だから私は、これをどのように行うのでしょうか？ まあ、私がしたい場合は 本当にうまくそれを整理し、 私はconsole.dir、D-I-Rを言うつもりです。 今、私は印刷にはconsole.logを使用 非常にシンプルなものアウト。 しかし、私はこれを整理したい場合 階層的にオブジェクトのように、 私はそれが一種の構造化したいです ディレクトリ構造などがあります。 

だから私は、ドキュメントをconsole.dirたいです。 私はEnterキーを押しますするつもりです。 そして右のそれ以下になりました、 私は、ここにズームインします 私は、この応答文書を持っています その隣の小さな矢印が。 今、私はこの矢印を開くと、 多くのものがあるように起こっています。 

しかし、我々は多くのことを無視するつもりです それと焦点だけの種類 最も重要な部分に、我々はそう この文書をナビゲートするために始めることができます。 DOMよりにもっとたくさんあり​​ます 親ノードと子ノードだけ。 補助的なものがたくさんあり​​ます。 

だから私はこれを開くつもりです。 そして、全体の多くがあります ポップアップするものの。 しかし、私は気にすべてがあります 右ここで、子ノード。 のはそれを開いてみましょう。 

そこの内部になるほど HTML、おなじみの何か。 だから、私たちのドキュメントの内部 1レベル下、HTML。 私はそれを開きます。 私たちは何を期待していますか？ 

あなたが私たちの図からリコールすれば、 我々は、HTMLの内部で何を見つける必要がありますか？ ツリーでその下に何つのノードがありますか？ 見つけるのをしてみましょう。 我々は、HTMLを開きます。 私たちは、その子ノードに下ります。 

そのオープンをポップします。 頭と体があります。 そして、私たちは頭を開くことができます。 その子ノードに移動します。 さて、タイトルがあります。 

そして、我々は上に行く可能性があり、 このように永遠に。 我々としても体でこれを行うことができます。 しかし、私たちが見るための方法があります 大きなオブジェクトとして編成文書。 我々が見た場合、ビッグです たくさん見えるオブジェクト コー​​ドのように、それは我々が開始できることを意味し 使用してこの大きなオブジェクトを操作します 何私たちを変更するためのコード ウェブサイトは、見て、のように感じています。 

だから、かなり強力なツールです 我々は今我々の処分で持っています。 だから我々はちょうど見たように、 ドキュメントオブジェクト自体 そしてその中のすべてのオブジェクト ただ、プロパティとメソッドを持っています 私たちがしたすべての他のオブジェクトのような JavaScriptでと協力して。 しかし、我々はこれらのプロパティを使用することができますし、 ソートのドリルダウンするこれらのメソッドを使用します 大きな文書からと取得 下の方と低いです、 細かいと細かい粒 詳細は、我々まで 私たちの非常に特定の部分を取得 我々は変更したいWebページ。 

そして、我々はのプロパティを更新すると、 ドキュメントオブジェクトまたはそれらのメソッドを呼び出して、 物事は私たちのウェブページ上で発生する可能性があります。 そして、我々は任意のリフレッシュを行う必要はありません これらの変更を有効にします。 

そして、それはかなりクールに能力です 私たちは、コードで作業しているときがあります。 だから、これらのプロパティのいくつかは何ですか ドキュメントオブジェクトの一部ですか？ さて、あなたはおそらく見ました それらのカップル本当にすぐ 我々はビュンたとして 巨大な文書を通じ オブジェクト私たちは、Webブラウザで見ました。 

しかし、これらのプロパティのカップル 内部HTMLのようなものかもしれません。 そして、あなたも私を思い出すかもしれません JavaScriptのビデオでこれを使用して 非常に終わりにするとき、私 イベントについて話していました。 この内部HTMLは何でしたか？ まあ、それはちょうど何 タグの間インチ 

だから内部HTML、 例えば、タイトルの タグ、我々は行く保っていた場合 先ほどその例、 こんにちは、世界されていると思います。 それが私たちのページのタイトルでした。 その他のプロパティ ノード名を含み、これ HTMLの名前です。 タイトルなどの要素。 IDであるID、 HTML要素の属性。 

我々は、特別に指示することができることを思い出してください 私たちのHTMLの特定の要素 通常、ID属性を持ちます CSSのコンテキストで便利です、 具体的に。 への参照である親ノード、 ちょうど私の上のDOMには何が。 され、子ノード、 ダウン私の下の何を参照します。 そして、我々はその多くのを見ました ちょうどを通して見ます。 我々が得た方法子ノードは、それはです ツリーにさらに低いです。 

属性、それはただの配列です HTML要素の属性の。 だから、属性の例は、かもしれません あなたがイメージタグを使用している場合も、 それは、通常、ソース属性を有し、 多分高さと幅の属性。 そしてそうそれはちょうど配列になります 関連付けられた属性のすべての そのHTML要素を持ちます。 

スタイルは別のものであること CSSを表しありません 特定の要素のスタイリング。 そして、後に、この中で ビデオ、我々は、具体的によ カップルを作るためにレバレッジスタイル 当社のウェブサイトへの変更の。 だから、それらはいくつかのプロパティです。 

そして、いくつかのもあります たちができる方法 また、より迅速多分隔離するために使用します ドキュメントオブジェクトの要素。 おそらく、最も汎用性 これらはgetElementByIdのの。 だから私は、理由のようなものを言うかもしれません それは文書の方法だ覚えています オブジェクト、のdocument.getElementById。 

そして、それらの括弧の中に、指定 特定のIDを持つHTML要素 私は以前にしたことの属性 設定して、私はすぐによ その要素を右に行きます ウェブサイト全体の。 だから私は多分ドリルダウンする必要はありません すべての単一の層を介してダウン。 私はそれを見つけるために、このメソッドを使用することができ、 ソートのミサイルを求めて、熱のような、 右？ それはちょうど行くと見つけました まさにそれが探しているもの。 

getElementsByTagNameのは、 精神に非常に似ています。 多分これはすべてを見つけるだろう ボールドタグまたはpタグのすべて そして、私はすべての配列を与えます 私はその後で仕事ができること。 appendChildは何かを追加します ツリー内の1レベル下。 

だから私は完全に新しいを追加することができます 要素1レベル低いです。 または私はだ要素を削除することができます 同様に、私がしたい場合は、1つ下のレベル 私のWebページから何かを削除します。 さて、迅速なコーディングノートとクイック 頭痛がうまくいけば、ノートを保存します。 

getElementById-- dは小文字です。 私は私が持っているどのように多くの時間を伝えることはできません 中古getElementByIdのと大文字の そこD。 それは本当に一般的ですので。 私たちは、単語IDを記述する場合、それはです 通常資本Iの資本D. そして、私のコードだけでは動作しません。 そして、私は理由を理解することはできません。 これは本当に、本当に、本当にあります 誰もが行う一般的なバグ、 持っていても専門家 永遠にこれをやって。 だから、getElementByIdの注意してください、 そのdは小文字です。 そして、うまくいけば、それはあなたがいくつか保存されます 心痛の少なくとも分。 

それでは、このすべては、私たちに教えてくれありませんか？ 我々は、これらのメソッドを持っています。 我々は、これらの特性を有しています。 今、私たちがから開始する場合 ドキュメント、ドキュメント。 何でも、我々は今、任意に取得することができます 当社のウェブページの一枚 我々はJavaScriptを使用してしたいこと ただこれらのメソッドを呼び出すことにより、 プロパティを活用 我々は、様々な場所で見つけること。 

これは、これを冗長な得ることができます document.getElementById、 多分長いタグ名を持っています、 多分あなたは、後に複数回呼び出しを行います。 物事は少し冗長な得ることができます。 そして、プログラマとして、あなたがたように おそらく、これらのビデオの多くに見られます、 我々は冗長なものを好きではありません。 

我々はすぐに物事を行うことができるようにしたいです。 だから我々はより多くをしたいと思います 何かを言うための簡潔な方法。 だからへのリード線のこの種 jQueryのと呼ばれるものの概念。 今jQueryのでは、JavaScriptではありません。 それには、JavaScriptの一部ではないのです。 

それは、書かれたライブラリです いくつかのJavaScriptのプログラマによって 10年ぐらい前。 そして、その目標は、この何を簡素化することです 呼ばれるクライアント側のスクリプト、どの 私たちは何であったか、基本的に DOM操作での話。 そして、私は修正したいそうだとすれば 多分私のWebページの背景色、 特定事業部。 

ここで、私は明らかになっています ElementById colorDiv。 そして私は、その背景色を設定したいです。 私は純粋なJavaScriptを使用している場合 ドキュメントオブジェクトモデルを使用して、 それは右、多くのものですか？ document.getElementById colorDiv.style.backgroundColor =緑。 

やれやれ。 それが言いたいことがたくさんあり​​ました。 それはあまりにも、タイプする多くのです。 そしてそうjQueryのでは、我々は多分言うことができます このもう少し簡潔に。 トレードオフそれは多分少しですされています もう少し、突然不可解な 右？ 

少なくとも、長いは、もう少しです 私たちがやっていることの説明の通り。 このドル記号、括弧、 単一引用符、ハッシュ、colorDiv、右？ どういう意味ですか？ まあ、それはただ、基本的です document.getElementById colorDiv。 

しかし、それは速記この種のです jQueryのを使用してそれを行う方法。 ちょうど今見てみましょう いくつかの異なる方法で 私は実際に可能性があること このドキュメントオブジェクトを使用します 私のサイトの作品を操作するためのモデル。 特に、我々はつもりです 操作で作業します 特定の色 Webページ上のdiv、colorDiv、。 それでは、その見てみましょう。 大丈夫。 だから私は、ページ上です。 あなたがダウンロードするときにtest.htmlという呼ばれています これは、あなたがこれをいじくり回すしたい場合。 そして私はの束を持っています このページ上のボタン。 そして、私は、個々の機能を言っています 背景色、緑、紫のため、 オレンジ、赤、青、1つの関数 背景色は、イベントハンドラ 背景色とjQueryを使用するため。 私は何を話しています とき、私はこれをやっていますか？ だから我々は、ボタンを見てきました。 さて、見てみましょう ここでは、ソースコードの一部。 私たちは、test.htmlという始めましょう。 背景のため、個々の機能 色は私がここで入力したものです。 私は少しをスクロールしてみましょう。 

そして、あなたはその私に気付くでしょう これらのボタンを定義しています このボタンをクリックすると言って、 パープルに変わり関数を呼び出します。 このボタンがクリックされると、むしろ、 関数が緑色に変わり呼び出し、 オレンジ色に変わり、赤く、青に変わり。 おそらく、このことを推測することができます おそらく最高のデザインではありません 意味は、右？ 

私がするとよいでしょう より一般的なアプローチを持っています。 さて、最初に我々は見てみよう これらの5つの機能が何であるかに document.getElementById colorDiv.style.background =紫、 、緑、オレンジ、赤 それぞれ、青。 そうではなく、特に最高のデザイン。 

ボタンの次のセット 私は私が書いているされています 単一の機能 その外見上の色を変更 引数として文字列を受け取ります。 だから、これは少し良いです。 パープル、グリーン、オレンジ、赤、 青は今の引数です。 だから私は、より一般的な書きました ケースJavaScript関数、 これは次のようになります。 私は渡しています。 色はこの機能変更 色と呼ばれる引数を期待。 そして、私は設定言っています 色に背景色。 だからここに私がここに持っているものを表します。 だから、少し良いです。 

しかし、私はすることができるかもしれません それよりももっと良いです。 我々は見てみることを下る場合 イベントハンドラの状況では、 今、すべてのこれらの呼び出しは、同じように見えます。 あなたは私たちのためにリコールした場合 イベントハンドラについての議論、 私はのについての情報を得ることができます これらのボタンをクリックして、それを使用しました。 

そしてそうevent.JavaScriptに、私はしました 書かれた変色イベント、どの クリックされたボタンを割り出し。 それがトリガーオブジェクトラインです。 そしてここに、それは本当に冗長な取得します。 しかし、私がやっていることは私はあります 背景の設定 triggerObject inner.HTMLの色。 それは内のテキストです ボタンタグの間。 

そして、私は明らかにしてい 小文字に設定します。 そして、それは私が全体を変換することができる方法です 使用してJavaScriptで小文字に文字列 小文字にそのメソッド。 私は色を設定するときので、 私はここでやろうとしているように、 色はすべて小文字にする必要があります。 

しかし、私が持っていたボタン、 私たちは別の見てみると、 テキストがあることに気付きます 紫色のための資本Pで書かれました。 そして、非常に ここでは一番下、どうやら私 同様に、この使用してjQueryのを試してみてください。 そして、この場合には、私は実際にはありませんよ すべてで関数を呼び出します。 私は、私はクラスがちょうど言いました このボタンに使用するjQのボタンです。 それでおしまい。 

それでは、どのようjQueryのは、私がやって知るのでしょうか？ まあ、これは利点の一つであります jQueryのの欠点を大幅に削減します。 それは私が物事を行うできるようにすることができます 非常に簡潔に、しかし、そうでないかもしれません 直感的として。 たぶん、それらの他の3つは作ります 私がやってより多くの意味をビット。 ここでは、しかし、何が起こっているの？ 

どうやら、作成 無名関数 その負荷時はいつでも私の文書 ので、document.ready、準備ができています いくつかの機能が起こるしようとしています。 基本的には、ときに、ドキュメントの準備ができているのですか？ 私のページが読み込まれたとき、それはです。 

だから、すぐに自分のページが読み込まれたように、 関数を以下のことは、常に準備ができています。 タイプjQButtonの対象かどうかは、言います、 またはクラスjQButtonがクリックされた場合に、 この機能を実行します。 だから、ここでは2つの匿名関数です、 他の内部で定義されているもの。 

だから、私の全体の文脈 ここで、これまでの私のページです それがロードするときには、この関数を呼び出します。 そして、この機能が待っています ボタンのクリックします。 また、ボタンをクリックすると、jQの ボタンがクリックされると特に、 それは、この他を呼び出します 起こっている機能、 背景を設定するには colorDivの色であることが判明しました どんなテキストがタグの間にあります。 

これは、の概念であります どのボタンクリックされました。 しかし、そうでなければ、これは一種のです イベントに似て振る舞います。 それはちょうど同じように、私です jQueryのでこれを表現することになります。 繰り返しますが、それはおそらくです より多くの威圧的。 それはのように明確ではありません event.jsのようなもの、 これは多分もう少しです 冗長が、少し小さいです 威圧的。 

しかし、我々は、私のブラウザにかけて戻ってポップ場合 窓、私はよくclicking--起動した場合、 それが紫色に変化しました。 これは文字列メソッドを使用して緑です。 これは、イベントハンドラを使用して、オレンジ色です。 

これは、右のjQueryを使用して赤のですか？ それらはすべて、まったく同じように動作します。 彼らはただそれは別の使用してください 問題を解決するために近づきます。 にもっとたくさんあり​​ます jQueryの後、我々は確かです このビデオではについて話をするつもり。 あなたが詳細を知りたい場合でも、することができます ドキュメントのjQueryのソートに行きます 約かなり多くを学びます この非常に柔軟なライブラリ、どの クライアント側を実行するのに最適です そのような私たちが何をしていたかなどのスクリプト 外観を操作します 私たちのウェブページの感触 ドキュメントオブジェクトモデルと。 私はダグロイドです。 これはCS50です。