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

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

動画を視聴し、これらのインタラクティブなチュートリアルを完了して、Chrome DevTools を使用してページの DOM を表示および変更する基本を学びます。

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

DOM ノードを表示する

[要素] パネルの DOM ツリーで、DevTools の DOM 関連のすべての操作を行います。

ノードを検査する

特定の DOM ノードに注目している場合は、[検査] を使用して DevTools を開き、そのノードをすばやく調査できます。

  1. 下の Michelangelo を右クリックし、[検証] を選択します。
    • ミケランジェロ
    • Raphael ノードの検査 DevTools の [要素] パネルが開きます。DOM ツリーで <li>Michelangelo</li> がハイライト表示されます。 Michelangelo< ノードをハイライト表示
  2. DevTools の左上にある 検証アイコンをクリックします。 検査アイコン

  3. 下の [東京] テキストをクリックします。

    • 東京

    • ベイルート

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

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

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

DOM ツリーでノードを選択すると、キーボードで DOM ツリーを操作できます。

  1. 下の [Ringo] を右クリックし、[検証] を選択します。DOM ツリーで <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 を右クリックし、[検証] を選択します。

    • Magritte
    • スーティン

  2. このページの下部にある付録: スクロールして表示のセクションに移動します。手順はそこで続きます。

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

ルーラーを表示

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

定規。

次のいずれかの方法でルーラーを有効にします。

  • Ctrl+Shift+P キーまたは Command+Shift+P キー（Mac）を押してコマンド メニューを開き、Show rulers on hover と入力して Enter キーを押します。
  • [設定] > [設定] > [要素] > [ホバー時にルーラーを表示] をオンにします。

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

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

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

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

    検索バーでクエリがハイライト表示されている

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

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

ノード間で不要なジャンプを回避するには、 [設定] > [設定] > [全般] > [入力しながら検索] チェックボックスをオフにします。

[設定] で [入力内容を検索] チェックボックスをオフにしました。

DOM の編集

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

コンテンツを編集する

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

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

    • フライ
    • Michelle

  2. DOM ツリーで Michelle をダブルクリックします。つまり、<li> と </li> の間のテキストをダブルクリックします。選択されたテキストが青色でハイライト表示されます。

    テキストの編集

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

属性を編集

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

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

    • Howard
    • Vince

  2. <li> をダブルクリックします。ノードが選択されていることを示すために、テキストがハイライト表示されます。

    ノードの編集

  3. 右矢印キーを押してスペースを挿入し、style="background-color:gold" と入力して Enter キーを押します。ノードの背景色がゴールドに変わります。

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

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

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

ノードタイプの編集

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

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

    • Dean
    • CANNOT TRANSLATE
    • Thaddeus
    • Brock

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

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

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

HTML として編集

構文のハイライト表示と自動補完を使用してノードを HTML として編集するには、ノードのプルダウン メニューから [HTML として編集] を選択します。

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

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

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

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

  3. Enter キーを押して改行し、<l を入力します。DevTool は HTML 構文をハイライト表示し、タグを自動的に入力します。

    HTML タグの自動補完。

  4. 自動入力メニューから li 要素を選択し、> と入力します。閉じタグ </li> がカーソルの後に自動的に追加されます。

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

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

    変更を適用しています。

ノードを複製する

要素を複製するには、右クリック オプションの [要素を複製] を使用します。

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

    • 虚栄の篝火
    • ナナ
    • Orlando
    • ホワイトノイズ

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

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

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

キーボード ショートカットの Shift+Alt+下矢印（Windows と Linux）または Shift+Option+下矢印（macOS）を使用することもできます。

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

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

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

  2. [要素] パネルで、画像の URL を右クリックし、プルダウン メニューから [ノードのスクリーンショットをキャプチャ] を選択します。

    キャプチャ中のノードのスクリーンショット。

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

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

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

DOM ノードを並べ替える

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

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

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

  2. DOM ツリーで、<li>Elvis Presley</li> をリストの上部にドラッグします。

    ノードをリストの上部にドラッグする

状態を強制

ノードを :active、:hover、:focus、:visited、:focus-within などの状態に強制的に維持できます。

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

    • 蠅の王
    • 罪と罰
    • モビーディック

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

  3. <li class="demo--hover">The Lord of the Flies</li> を右クリックし、[Force State] > [:hover] を選択します。このオプションが表示されない場合は、付録: オプションが表示されないをご覧ください。実際にノードにホバーしていないにもかかわらず、背景色がオレンジ色のままになる。

ノードを非表示にする

ノードを非表示にするには、H キーを押します。

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

    • モンテ クリスト伯
    • The Stars My Destination

  2. H キーを押します。ノードは非表示になっています。ノードを右クリックして [要素を非表示にする] オプションを使用する方法もあります。

    非表示にした後の DOM ツリー内のノード

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

ノードの削除

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

  1. 下部の [Foundation] を右クリックし、[検査] を選択します。

    • The Illustrated Man
    • 鏡の国のアリス
    • 基盤

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

  3. Ctrl+Z キー（Windows）または Command+Z キー（Mac）を押します。直前の操作が元に戻され、ノードが再び表示されます。

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

DevTools には、コンソールから DOM ノードにアクセスしたり、DOM ノードの JavaScript 参照を取得したりするためのショートカットがいくつか用意されています。

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

ノードを検査すると、ノードの横に == $0 というテキストが表示されます。これは、コンソールでこのノードを変数 $0 で参照できることを意味します。

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

    • 左手で抱く闇
    • デューン

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

  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] を右クリックし、[検証] を選択します。

    • 大いなる眠り
    • The Long Goodbye

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

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

    temp1 式の結果

JS パスをコピー

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

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

    • カラマーゾフの兄弟
    • 罪と罰

  2. DOM ツリーで <li>The Brothers Karamazov</li> を右クリックし、[コピー] > [JS パスをコピー] を選択します。ノードに解決する 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 と同じように見えますが、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> ノードを右クリックし、[Scroll into view] を選択します。ビューポートが上にスクロールされ、[Magritte] ノードが表示されます。[スクロールして表示] オプションが表示されない場合は、付録: オプションが表示されないを参照してください。

    表示される位置までスクロール

付録: オプションがない

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

すべてのオプションが表示されない場合のクリック場所