DOM の表示と変更のスタートガイド

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

以下のインタラクティブなチュートリアルでは、動画の視聴と視聴に関する基本的なことを学べます Chrome DevTools を使用してページの DOM を変更する

このチュートリアルでは、DOM と HTML の違いを理解していることを前提としています。詳しくは、 付録: HTML と DOM の比較

DOM ノードの表示

[Elements] パネルの [DOM Tree] では、DevTools のすべての DOM 関連アクティビティが実行されます。

ノードを検査する

[Inspect] を使用すると、DevTools をすばやく開くことができます。 そのノードを調べます。

  1. 下の [Michelangelo] を右クリックして [Inspect] を選択します。
    • ミケランジェロ
    • ラファエル ノードの検査 DevTools の [Elements] パネルが開きます。 [DOM Tree] で <li>Michelangelo</li> がハイライト表示されます。 ミケランジェロの紹介<ノード
  2. 画面左上にある検証アイコンをクリックします。 DevTools。 [Inspect] アイコン

  3. 下の「Tokyo」のテキストをクリックします。

    • 東京

    • ベイルート

      これで、DOM ツリーで <li>Tokyo</li> がハイライト表示されます。

ノードの検査は、ノードのスタイルを表示して変更するための最初のステップでもあります。 CSS の表示と変更を始めるをご覧ください。

キーボードで DOM ツリーを操作する

DOM ツリーでノードを選択したら、 できます。

  1. 下の [Ringo] を右クリックして [検証] を選択します。<li>Ringo</li> を選択しました 説明します。

    • George
    • リンゴ
    • Paul

    • John

      Ringo ノードを検査する

  2. 上矢印キーを 2 回押します。<ul> を選択しました。

    ul ノードを検査する

  3. ← キーを押します。<ul> リストが閉じます。

  4. もう一度 ← キーを押します。<ul> ノードの親 を選択します。この例では、ステップ 1 の手順を含む <li> ノードです。

  5. ↓ キーを 3 回押して <ul> を再選択しました 折りたたまれたリストが表示されます。次のようになります: <ul>...</ul>

  6. → キーを押します。リストが開きます。

ビューまでスクロール

DOM ツリーを表示したときに、新しい DOM ノードに興味が 表示されなくなります。たとえば、ページの一番下までスクロールし、 ページ上部にある <h1> ノードに関心がある場合です。ビューまでスクロール を使用すると、ビューポートをすばやく再配置してノードを表示できます。

  1. 下の [Magritte] を右クリックし、[検証] を選択します。

    • マグリット
    • スーティン

  2. このページの一番下にある「付録: ビューにスクロール」セクションに移動します。 手順は続きます。

ページの下部にある手順を完了したら、ここに戻ってください。

ルーラーを表示

ビューポートの上下にあるルーラーを使用して、[Elements] パネルで要素にカーソルを合わせたときに、その要素の幅と高さを測定できます。

定規

ルーラーを有効にするには、次の 2 つの方法があります。

  • Ctrl+Shift+P キーまたは Command+Shift+P キー（Mac）を押してコマンド メニューを開き、「Show rulers on hover」と入力して Enter キーを押します。
  • 設定] をタップします。 の設定を確認 >[設定] >Elements >カーソルを合わせてルーラーを表示する。

ルーラーのサイズ単位はピクセルです。

DOM ツリーは、文字列、CSS セレクタ、XPath セレクタで検索できます。

  1. [Elements] パネルにカーソルを合わせます。
  2. Ctrl+F キーまたは command+F キー（Mac）を押します。 DOM ツリーの下部に検索バーが開きます。

  3. タイプ The Moon is a Harsh Mistress。最後の文が DOM ツリーでハイライト表示されます。

    検索バーでクエリをハイライト表示する

前述のとおり、検索バーでは CSS と XPath のセレクタがサポートされています。

[Elements] パネルでは、DOM ツリーで最初に一致した結果を選択し、ビューポートに表示します。デフォルトでは、文字を入力すると同時に実行されます。常に長い検索クエリを使用する場合は、Enter キーを押した場合にのみ DevTools で検索を実行するよう設定できます。

ノード間の不要なジャンプを回避するには、設定] をタップします。 [設定] >[設定] >グローバル >[入力逐次検索] チェックボックス。

[設定] の [入力逐次検索] チェックボックスをオフにしました。

DOM を編集する

その場で DOM を編集し、その変更がページに与える影響を確認できます。

コンテンツを編集する

ノードのコンテンツを編集するには、DOM ツリー内のコンテンツをダブルクリックします。

  1. 下の [Michelle] を右クリックして [Inspect] を選択します。

    • 揚げる
    • Michelle

  2. [DOM Tree] で Michelle をダブルクリックします。つまり、2 つの行間の <li> と </li>。テキストが青色でハイライト表示され、選択されていることを示します。

    テキストの編集

  3. Michelle を削除し、「Leela」と入力して Enter キーを押して変更を確定します。テキスト 上記の変更を Michelle から Leela に変更します。

属性を編集

属性を編集するには、属性の名前または値をダブルクリックします。手順に沿って操作します ノードに属性を追加する方法については、以下をご覧ください。

  1. 下の [Howard] を右クリックして、[Inspect] を選択します。

    • Howard
    • Vince

  2. <li> をダブルクリックします。テキストがハイライト表示され、 選択します。

    ノードの編集

  3. → キーを押してスペースを追加し、入力 style="background-color:gold"] を選択して Enter キーを押します。背景色 ノードがゴールドに変わります。

    ノードにスタイル属性を追加する

[属性を編集] 右クリック オプションを使用することもできます。

属性の編集がハイライト表示された状態でオプションを右クリックします。

ノードタイプの編集

ノードのタイプを編集するには、タイプをダブルクリックして新しいタイプを入力します。

  1. 下の [Hank] を右クリックして、[Inspect] を選択します。

    • Dean
    • CANNOT TRANSLATE
    • Thaddeus
    • Brock

  2. <li> をダブルクリックします。テキスト li がハイライト表示されています。

  3. li を削除し、「button」と入力して Enter キーを押します。<li> ノードが <button> に変更されます。 あります。

    ノードタイプをボタンに変更する

HTML として編集

構文のハイライト表示と予測入力機能を備えた HTML としてノードを編集するには、ノードのプルダウン メニューから [HTML として編集] を選択します。

  1. 下の [Leonard] を右クリックして [検証] を選択します。

    • 1 セント硬貨
    • Howard
    • Rajesh
    • Leonard

  2. [Elements] パネルで現在のノードを右クリックし、プルダウン メニューから [Elements] を選択します。

    ノードのプルダウン メニュー。

  3. Enter キーを押して新しい行を開始し、「<l」と入力します。DevTool では HTML 構文がハイライト表示され、タグが予測入力されます。

    HTML タグの予測入力。

  4. 予測入力メニューから li 要素を選択し、「>」と入力します。DevTools により、カーソルの後に終了 </li> タグが自動的に追加されます。

    DevTools によりタグが自動的に閉じられます。

  5. タグ内に「Sheldon」と入力し、Ctrl / Command + Enter キーを押して変更を適用します。

    変更を適用しています。

ノードを複製する

要素を複製するには、[要素を複製] を右クリックします。

  1. 下の [Nana] を右クリックして、[Inspect] を選択します。

    • 洗面台の焚き火
    • ナナ
    • Orlando
    • ホワイトノイズ

  2. [Elements] パネルで <li>Nana</li> を右クリックし、プルダウン メニューから [Elements] を選択します。

    プルダウンでハイライト表示されている [要素を複製] オプション。

  3. ページに戻ります。リストアイテムがすぐに複製されました。

キーボード ショートカットも使用できます。Shift+Alt+↓ キー（Windows、Linux）または Shift+Option+↓ キー（MacOS）です。

ノードのスクリーンショットをキャプチャする

[ノードのスクリーンショットをキャプチャ] を使用すると、DOM ツリー内の個々のノードのスクリーンショットを作成できます。

  1. このページの画像を右クリックして、[検証] を選択します。

  2. [Elements] パネルで画像の URL を右クリックし、プルダウン メニューから [Elements] を選択します。

    ノードのスクリーンショットをキャプチャしています。

  3. スクリーンショットはダウンロードに保存されます。

    ノードのスクリーンショットをダウンロードに保存しました。

DevTools を使用してスクリーンショットを撮影するその他の方法については、DevTools を使用してスクリーンショットをキャプチャする 4 つの方法をご覧ください。

DOM ノードを並べ替える

ノードをドラッグして並べ替えます。

  1. 下の [Elvis Presley] を右クリックし、[検証] を選択します。これは最後のアイテムなので 選択します。

    • スティービー・ワンダー
    • トム・ウェイツ
    • クリス・シーリ
    • エルヴィス プレスリー

  2. [DOM Tree] で、<li>Elvis Presley</li> をリストの一番上にドラッグします。

    ノードをリストの一番上にドラッグ

強制状態

ノードを :active、:hover、:focus、 :visited、:focus-within。

  1. 下の [The Lord of the Flies] にカーソルを合わせます。背景色がオレンジ色になります。

    • ハエの王
    • 犯罪と罰
    • モビー ディック

  2. 上の [The Lord of the Flies] を右クリックし、[Inspect] を選択します。

  3. <li class="demo--hover">The Lord of the Flies</li> を右クリックして [強制 状態 >:hover。このオプションが表示されない場合は、付録: オプションが表示されないをご覧ください。 ノードに実際にカーソルが合わなくても、背景色はオレンジ色のままです。

ノードを非表示にする

H キーを押してノードを非表示にします。

  1. 下の [The Stars My Destination] を右クリックし、[検証] を選択します。

    • モンテ クリスト家
    • スターズ 私の目的地

  2. H キーを押します。ノードは非表示です。ノードを右クリックして [要素を非表示] オプションを使用することもできます。

    非表示後の DOM ツリーでのノードの表示

  3. もう一度 H キーを押します。ノードが再び表示されます。

ノードの削除

[Delete] キーを押してノードを削除します。

  1. 下の [Foundation] を右クリックして [Inspect] を選択します。

    • イラスト入りの男
    • ルックグラスを通して
    • 基盤

  2. Delete キーを押します。ノードが削除されます。ノードを右クリックして [要素を削除] オプションを使用することもできます。

  3. Ctrl+Z キーまたは Command+Z（Mac）キーを押します。 最後の操作が取り消され、ノードが再表示されます。

コンソールでノードにアクセスする

DevTools には、コンソールから DOM ノードにアクセスしたり、 それらへの JavaScript 参照。

現在選択されているノードを $0 で参照する

ノードを検査すると、ノードの横に表示される「== $0」というテキストは、このノードを参照できることを意味します。 ノードを変数 $0 に置き換えます。

  1. 下の [The Left Hand of Darkness] を右クリックして、[Inspect] を選択します。

    • 暗闇の左手
    • デューン

  2. Esc キーを押してコンソール ドロワーを開きます。

  3. 「$0」と入力して Enter キーを押します。この式の結果は、 $0 は <li>The Left Hand of Darkness</li> と評価されます。

    コンソールの最初の $0 式の結果

  4. 結果にカーソルを合わせます。ノードがビューポートでハイライト表示されます。

  5. DOM ツリーで [<li>Dune</li>] をクリックし、コンソールでもう一度「$0」と入力して もう一度 Enter キーを押します。ここで、$0 は <li>Dune</li> と評価されます。

    コンソールの 2 番目の $0 式の結果

グローバル変数として保存

ノードを何度も参照する必要がある場合は、グローバル変数として保存します。

  1. 下の [The Big Sleep] を右クリックし、[検証] を選択します。

    • ビッグスリープ
    • 長いお別れ

  2. DOM ツリーで <li>The Big Sleep</li> を右クリックして、[Store as global] を選択します。 あります。このオプションが表示されない場合は、付録: オプションが表示されないをご覧ください。

  3. コンソールで「temp1」と入力して、Enter キーを押します。式の結果 は、変数がノードに評価されることを示しています。

    temp1 式の結果

JS パスをコピー

自動テストで JavaScript パスを参照する必要がある場合は、その JavaScript パスをノードにコピーします。

  1. 下の [The Brothers Karamazov] を右クリックして、[検証] を選択します。

    • カラマゾフ兄弟
    • 犯罪と罰

  2. DOM ツリーで <li>The Brothers Karamazov</li> を右クリックして、 コピー >Copy JS Path。次のように解決される document.querySelector() 式 ノードをクリップボードにコピーしました。

  3. Ctrl+V キーまたは command+V キー（Mac）を押すと、 式をコンソールに貼り付けます。

  4. Enter キーを押して、式を評価します。

    Copy JS Path 式の結果

DOM の変更時に中断

DevTools では、JavaScript が DOM を変更した際に、ページの JavaScript を一時停止できます。 DOM 変更ブレークポイントをご覧ください。

次のステップ

DevTools の DOM 関連機能のほとんどに対応しています。残りのテーマは するには、DOM ツリーのノードを右クリックし、表示されないオプションを試します。 説明します。[要素] パネルのキーボード ショートカットもご覧ください。

Chrome DevTools のホームページで詳細を確認します。 DevTools で行える他の操作を紹介します

DevTools チームへのお問い合わせについては、コミュニティをご覧ください。 DevTools コミュニティでアドバイスをもらってください

付録: HTML と DOM

このセクションでは、HTML と DOM の違いについて簡単に説明します。

ウェブブラウザを使用して https://example.com などのページをリクエストすると、サーバー 次のような HTML を返します。

<!doctype html>
<html>
  <head>
    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>
    <p>This is a hypertext document on the World Wide Web.</p>
    <script src="/script.js" async></script>
  </body>
</html>

ブラウザは HTML を解析し、次のようなオブジェクトのツリーを作成します。

html
  head
    title
  body
    h1
    p
    script

ページのコンテンツを表すオブジェクトまたはノードのこのツリーを DOM と呼びます。 現時点では HTML と同じように見えますが、 次のコードを実行します。

const h1 = document.querySelector('h1');
h1.parentElement.removeChild(h1);
const p = document.createElement('p');
p.textContent = 'Wildcard!';
document.body.appendChild(p);

このコードでは、h1 ノードを削除し、別の p ノードを DOM に追加しています。完成した DOM は次のようになります。 例:

html
  head
    title
  body
    p
    script
    p

ページの HTML が DOM と異なっている。つまり HTML は DOM は現在のページ コンテンツを表します。JavaScript が ノードを追加、削除、編集すると、DOM は HTML と異なります。

詳しくは、DOM の概要をご覧ください。

付録: ビューまでスクロール

これは「ビューまでスクロール」セクションの続きです。詳しくは、 以下の手順に沿って手順を完了してください。

  1. DOM ツリーでは、引き続き <li>Magritte</li> ノードが選択されているはずです。そうでない場合は、 ビューまでスクロールして、最初からやり直します。

  2. <li>Magritte</li> ノードを右クリックして [Expand into view] を選択します。ビューポートのスクロール Magritte ノードが表示されるようにします。 [ビューにスクロール] オプションが表示されない場合は、付録: オプションがないをご覧ください。

    ビューまでスクロール

付録: オプションがない

このチュートリアルの手順の多くは、DOM ツリーのノードを右クリックする手順になっています。 表示されるコンテキスト メニューからオプションを選択します。指定した オプションを選択する場合は、ノードのテキスト以外の場所を右クリックします。

表示されないオプションがある場合にクリックする場所