簡単なまとめ
この動画では、ウェブ開発における重要な概念であるDOM（Document Object Model）について解説します。HTMLとDOMの違い、JavaScriptを使ったDOMの操作、そしてChrome DevToolsを使ったDOMの検査、編集、変更の永続化について学びます。
- HTMLはページの初期コンテンツを記述する文書であり、DOMはブラウザがHTMLを解析して作成するオブジェクトのツリー構造です。
- JavaScriptを使ってDOMを操作することで、ページのコンテンツを動的に変更できます。
- Chrome DevToolsを使うと、DOMの検査、編集、スクリーンショットの取得などが簡単に行えます。
- DevToolsでの変更は一時的なものであり、永続化するにはワークスペースを設定してソースコードを直接編集する必要があります。
この動画では、ウェブ開発でよく使われる「DOM」という用語について、それがHTMLとどのように関係しているかを説明します。
ブラウザがウェブページをリクエストすると、サーバーはHTMLを返します。HTMLはページの構造を記述した文書であり、ブラウザはこれを解析してオブジェクトのツリー構造を作成します。
ブラウザがHTMLを処理して作成するオブジェクトのツリー全体がDOM（Document Object Model）と呼ばれます。ツリーの各オブジェクトはノードであり、ページのコンテンツを表します。
HTMLはページの初期コンテンツを表し、DOMは現在のページコンテンツを表します。JavaScriptがノードを追加、削除、または編集すると、DOMはHTMLとは異なる状態になります。JavaScriptフレームワークを使用する場合、短いHTML文書からJavaScriptを使ってすべてのノードを追加することも可能です。
JavaScriptを使ってDOM内のノードを追加、削除、編集することで、ページのコンテンツを動的に変更できます。
Chrome DevToolsを使ってDOMを検査できます。DevToolsを開くには、ページを右クリックして「検査」を選択します。要素パネルの左側にはDOMツリーが表示され、ここでDOM関連の操作を実行できます。特定のDOMノードを素早く調査するには、検査ツールを使用します。
DOMノードを素早く見つけるための便利なコマンドがいくつかあります。Ctrl/Cmd + FでDOMを検索できます。ビューポートにないノードを表示するには、3つのドットをクリックして「スクロールして表示」を選択します。
DevToolsのコンソールで$0と入力すると、現在選択されているDOMノードが表示されます。$1と入力すると、前に選択されていたノードが表示されます。これらのコマンドはコンソールユーティリティAPIの一部です。
DevToolsを使ってDOMを編集し、UIの変更をすばやく試すことができます。ノードのテキストコンテンツを編集するには、テキストをダブルクリックして編集を開始し、Enterキーを押して変更を適用します。新しい属性を追加するには、右クリックして「属性の追加」を選択し、属性名と値を入力します。ノードを右クリックして「HTMLとして編集」を選択すると、HTMLコードを直接編集できます。
DOMノードをドラッグアンドドロップして、DOMツリー内で移動できます。
変更が完了したら、ノードを右クリックしてスクリーンショットを撮り、デザイナーに送信できます。
DevToolsで行ったDOMの変更は保存されないため、ページをリロードすると失われます。変更を永続化するには、ワークスペースを設定してソースコードを直接編集する必要があります。ソースパネルで実際のファイルを編集して、変更を保存します。
どんな YouTube 動画も数秒で要約
無料の Summ アプリなら、どんな動画でもこのような要約をあなたの言語で作成できます。
文字起こし
「HTML vs DOM? Let’s debug them #DevToolsTips」の文字起こし全文です。タイムスタンプをクリックすると、その場面から動画を再生できます。別の動画なら YouTube 文字起こしツールをご利用ください。
0:00 [音楽] Domとは何か、そしてHTMLとどのように関係するのか。 このエピソードでは、 最も一般的で混乱を招く2つのWeb 開発用語について見ていきましょう。まず、 ブラウザを使ってWebページをリクエストすると、 サーバーは次のようなHTMLを返します。HTMLは、 ページの概要を示す指示が書かれた文書です。 ブラウザはHTMLを処理して渡して、次の ようなオブジェクトのツリーを作成する必要があります。 ツリーの各オブジェクトはノートです。 ページのコンテンツを表すこのツリー全体が Dom、つまり ドキュメントオブジェクトモデルと呼ばれます。現時点では、Domは HTMLと同じように見えますが、
0:48 下部にあるスクリプト参照が このコードを実行すると、見出しノートが削除され 、Domに別の段落ノートが追加されます。 完成したDomは次のようになります。 ページのHTMLは Domとは異なります。つまり、HTMLは 最初のページコンテンツを表し、 Domは現在のページコンテンツを表します。JavaScriptが ノートを追加、削除、または編集すると、 DomはHTMLとは異なります。 実際、JavaScriptフレームワークを使ってページを作成する場合、 非常に 短いHTML文書を使用して、JavaScriptから機能するすべてのノートを追加できます。 ブラウザはそれを同じように渡します。 それではDomからページを取り出し、
1:34 Death Toolsを使ってページを検査してみましょう。Death Toolsを開く方法は5つ以上あります。 詳しくは前回の動画をご覧ください。ページを右クリックして「 検査」を選択します。これは要素パネルです。 左側はDomツリーです。ここで 検査、編集、Dom関連のアクティビティをすべて実行できます。 特定のDomノートに興味のある方は、検査を使用すると そのノートを素早く調査できます。 さらに、ノート間を移動すると、 開発ツールによってページ内のノートがハイライト表示されます。ノートを 素早く見つけるのに役立つ便利なコマンドが3つあります。Control またはCommand + Fを使用してDomを検索できます。Dom ノートが 現在ビューポートにない場合は、
2:21 一番下までスクロールする代わりに、 3つのドットをクリックして「スクロールして表示」を 選択できます。さらに、 Dツリーにドルのヒントが表示されていますか？Escキーを 押してコンソールを開き、「 dollar Zer」と入力して 現在のノートを表示できます。また、 テキストコンテンツをオンザフライで変更することもできます。このコマンドを使用して ノートをオブジェクト形式で作成します。ノートを 表示するには、Drコマンドを使用します。 ナビゲーション履歴で前のノートに「 dollar one」と入力すると、それが表示されます。 同様に、右 クリックしてスクロールしてここから表示できます。この dollarコマンドはコンソールユーティリティAPIの一部です。 このビデオでは、 このような便利なコマンドについて学んでいます。DOMの 編集についても触れているので、より 簡単な方法で編集することもできます。
3:09 これにより、UIの変更をすばやく試すことができます。 ノートのテキストコンテンツを編集するには、テキストをダブルクリックして 編集を開始し、Enterキーを押して 変更を適用します。同様に、 このノードのタイプを変更する場合は、ダブル クリックして新しいタイプを入力し、Enterキーを押して 新しい属性を追加します。 要素にスタイルを適用するなど、新しい属性を追加するには、 右クリックして「属性の追加」を選択します。 属性名と値を入力します。 色が濃いピンクに変わったのがわかります。 ちなみに、Tabキーを使用して 属性間を移動できます。たとえば、 ノートをダブルクリックしてTabキーを押すと、 最初の属性にジャンプし、 値を即座に編集できます。 ハイパーリンクを追加する場合は、
3:56 このようにアンカーノートを追加しても機能しません。これは、開発 ツールがテキストとして渡すためです。ノートを右クリックし、「 HTMLとして編集」を選択します。 アンカーを貼り付けてEnterキーを押します。簡単です。 これがレッスンの既知の機能です。 Dom ノードをドラッグ アンド ドロップして移動できます。 変更が完了したら、右クリックしてスクリーン ショットを撮ってデザイナーに送信できます。 ただし、開発ツールでは Dom で行った変更は保存されないので注意してください。ワークスペースを 設定したとしても、ページをリロードするとすべての変更が失われます。 これは Dom 開発者が変更をどこにどのように保存するかを知らないため、 ワークスペースで HTML または JavaScript のどちらにするかは理にかなっています。
4:47 ソース コードへの変更を保存するには、ソース パネルで実際のファイルを編集する必要があります。 これで今はすべてです。開発 ツールで Dom を操作する方法についてさらに詳しく知るには、このリンクにアクセスしてください。 コーディングを楽しんでください。次の St 2 つのヒントをお楽しみに。 [音楽] チャオ
