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 Tree] で Michelle をダブルクリックします。つまり、<li> と </li> の間のテキストをダブルクリックします。選択されたテキストが青色でハイライト表示されます。

    テキストの編集

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

属性を編集

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

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

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

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

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

    HTML タグの自動補完。

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

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

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

    変更を適用しています。

ノードを複製する

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

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

    • 洗面台の焚き火
    • ナナ
    • 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] を右クリックし、[検査] を選択します。

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

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

    • 暗闇の左手
    • デューン

  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 パスを参照する必要がある場合は、その 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 ツリー内のノードを右クリックし、ポップアップ コンテキスト メニューからオプションを選択するように指示しています。コンテキスト メニューに指定したオプションが表示されない場合は、ノードのテキストから離れた場所で右クリックしてみてください。

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