[Powered by Google Translate] [DOM] [トミーM​​acWilliams] [ハーバード大学] 【これはCS50です。] [CS50.TV] このビデオでは、DOMを見てみるつもりです。 ブラウザがWebページをダウンロードする場合には、何らかの形でメモリ内に表現する必要がある。 ドキュメント·オブジェクト·モデル、またはDOM、 ブラウザは、メモリ内のWebページを表します方法について説明します。 このビデオでは、我々は、JavaスクリプトのコンテキストでDOMを見てみましょう しかし、DOMは言語に依存しない概念です。 例えば、PHPは同様に独自のDOM実装を持っています。 しかしながら、DOMは頻繁にJavaScriptによって利用される JavaScriptは、私たちがその場でウェブページの内容を変更することができますので、 とDOMは、私たちはウェブページの一部にアクセスすることができます。 のは、例えばウェブページを見てみましょう。 さて、このページはDOMで表現する方法を見てみましょう。 そして、すべての木は上部のルートノードを持っている必要があります。 この文書では、HTML要素は、ルートノードである ので、それは最初に表示される要素です。 私たちのツリーにルートノードを追加しましょう​​。 のが再びHTMLドキュメントを見てみましょう。 bodyタグはHTMLタグの内側にネストされていることに注意してください。 これは、body要素は、HTML要素の子であることを意味します。 私たちは、身体葉することにより当社のDOMツリーでこれを表すことができます HTMLから下降。 ことをしてみましょう。 私たちは、HTMLの下に体を持っている。 今、私たちは、体がそれ自身の2人の子供を持っていることがわかります h1要素とul要素。 これは我々がそれらの要素の両方に接続できることを意味し body要素に、なるように行うみましょう。 私たちは、H1およびULを持っている。 最後に、ul要素は、3以上の子を持つ これは我々のDOMツリーを完成させますので、李、李、李追加してみましょう。 これは私たちのDOMツリーを完了し、これはブラウザがWebページを保存している方法です。 それでは、我々は、JavaScriptを使用して、このツリーを走査する方法を見てみましょう。 我々は、文書と呼ばれる特別なJavaScript変数を使用して、このツリーにアクセスすることができます。 このドキュメントオブジェクトのプロパティの1つ bodyプロパティであり、このオブジェクトが表す 私たちの例のWebページのbody要素。 我々は、body要素のすべての子を取得したい場合 そのh1タグとULタグは、あなたが覚えているである 我々はdocument.body.childNodesを言うことができる。 そして、これは私たちのh1要素の両方を含む配列をお返しします 彼らは身体の両方の直接の子にいるのでとul要素。 私たちは、ul要素を表す変数を作成したい場合 我々は、ここまでVRR ULは=その後、このコードと言うことができます そして今のchildNodesは単に配列であるため、 私たちは、[1]は、その配列の2番目の要素を取得すると、それにインデックスすることができます。 この新しいULオブジェクトに我々は、そのIDのような要素のさまざまなプロパティにアクセスすることができます。 私たちは、文字列リストに等しいことになるだろうul.idを言うなら それは我々が我々のHTMLページに持っているものだから。 また、このケースであることを行っている、そのタグ名、取得することができます 要素の種類には、この場合、ULには、です。 我々はまた、親またはそれより上のノードを、得ることができ、この場合に body要素になるだろう。 我々ははdocument.bodyと同じになるだろう。のparentNodeを、言うなら。 もちろん、このULは、自身の子供を持って、 そう、我々はまだ言うことができます。のchildNodesをこの要素に、 私たちのリストの3項目があるので、そしてこの配列は現在、長さ3を持っている必要があります 最後に、おそらく最も有用なプロパティがあることを行っている。innerHTMLプロパティは、 これはリストの実際の内容となり、その私たちの例のページで それらの3のliタグがあった。 もちろん、我々は要素にアクセスする、大規模な文書を持っている場合 この方法で本当に面倒なことを行っているので、 結局我々はdocument.body.childNodesような事を言う必要があるでしょう ブラケット何か。他のchildNodesブラケット何か、 そしてそれは本当に面倒得るために起こっている。 代わりに、私たちが本当にやりたいこと、文書を照会することができるである これだけ我々はキーワードを使用してインターネット上で物事を検索好き 私たちは本当に簡潔にこの文書を検索するいくつかの方法が必要 我々は気に唯一の要素は、横断せずに戻る 底までツリー全体トップ。 幸いにも、最近のブラウザは、私たちがこれを行うことができ querySelectorAllと呼ばれる特殊な機能を持つ、 この関数は、1つの引数を取ります そのCSSセレクタであり、それが私たちに戻ることが起こっている そのセレクタに一致するすべての要素。 それはあなたがDOMを照会するための全く新しい構文を学習する必要がないことを意味します。 代わりにあなたがすでに知っている知識を適用することができます CSSセレクタについて。 の文書を照会のいくつかの例を見てみましょう。 我々はquerySelectorAllを言うし、それをこの文字列＃foo 'を渡す場合 それは私たちにID fooを持つ要素をお返しするために起こっている。 またのdocument.getElementByIdを言うことができる そのハッシュタグなしでそれを文字列fooのを渡します。 あなたは、まったく同じオブジェクトを取得するつもりだ。 代わりに、我々はdocument.querySelectorAllに文字列。バーを渡した場合 私たちは、クラスbarを持つ要素のすべてを取り戻すつもりだ。 また、CSSセレクタを組み合わせることができます。 我々は文字列＃fooのIMGで渡す場合 画像のすべての要素を私たちに戻って与えるために起こっていること それは、ID fooを持つ要素の子です。 あなたは、我々はいくつかの本当に強力な検索機能を持っているセレクターを組み合わせることで、見ることができるように。 しかし、ボンネットの下に、DOMは、本当にただの木です これらのセレクタは、ある程度その離れて抽象的に私達を許可 我々は常に、DOMツリーの構造全体を気にしないので。 それは、迅速なDOMの概要、及びご参加いただきありがとうございました。 [CS50.TV]