YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

Japanese subtitles

← 02-02 Converting HTML to the DOM

02-02 Converting HTML to the DOM

Get Embed Code
6 Languages

Showing Revision 1 created 12/10/2014 by Udacity.

  1. URLを入力してenterを押すと
    ブラウザはサーバにページの要求を送ります
  2. コマンドラインでこれをシミュレーションできます
  3. ブラウザがサーバの応答を
  4. このようなHTMLとして受け取るとすぐに
    すべてのマークアップを
  5. 画面の表示に変換しなければなりません
  6. どうやっているか考えたことはありますか?
  7. そういえばちょっと魔法みたいですね
  8. 魔法ではないんです
  9. ブラウザは
    明確に定義された一連のステップにしたがって
  10. HTMLの処理とDOMの構築を始めます
  11. データの処理方法に関する一連のルールは
  12. HTMLの仕様書内にあります
    たとえば山括弧の中のテキストは
  13. HTML上で特別の意味を表すタグのことです
  14. 結果としてタグを認識すると
    ブラウザはトークンを発行します
  15. この場合はHTMLの開始タグのトークンです
  16. 次にheadの開始タグのトークンを
    得るといった具合です
  17. この一連のプロセスはトークナイザによって
    行われます これを行う間に
  18. これらのトークンを取り込んで
  19. ノードオブジェクトに
    変換している別のプロセスがあります
  20. 例えば 最初のHTMLトークンを変換して
    HTMLノードを作成し
  21. それから次のトークンを取り込み
    headノードを作成します
  22. ノード間の関係はありますか?
  23. はい トークナイザが発する
    開始と終了のトークン情報が
  24. ノード間の関係を教えてくれます
  25. headの開始タグは
    htmlの終了タグのトークンの前にあります
  26. これはheadトークンが
    htmlの子であることを示します
  27. 同様にmetaとlinkノードは
  28. headノードの子というようにです
  29. 結局すべてのトークンを取り込めば
  30. ドキュメントオブジェクトモデルつまり
  31. DOMにたどり着きます
  32. これはツリー構造でHTMLの内容とプロパティ
  33. およびノード間の全関係を表しています
  34. すごいですね HTMLをDOMに変換しました
  35. なぜDOMツリーと呼ばれるかよく分かります
  36. そうですね またこれらのオブジェクトが
  37. 全プロパティを含むことにも注意してください
  38. 例えばimageノードには
    このようなソース属性があるので
  39. このノードも同じプロパティを持つでしょう
  40. DOMはHTMLマークアップの全パートの表現です
  41. 分かりました
    さて すべてのHTMLをダウンロードして
  42. DOMを構築しました 次は何ですか?
  43. 実際にはブラウザは
    DOMを段階的に増やしながら構築するので
  44. ページのレンダリングを
    スピードアップするために生かせます
  45. 実際にGoogleの検索ページにも
    とてもよく役立っているのです