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

Kayce Basques 氏
Kayce Basques
ソフィア・エメリアノバ
Sofia Emelianova

この動画やインタラクティブなチュートリアルでは、Chrome DevTools を使用してページの DOM を表示および変更する基本について説明します。

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

DOM ノードを表示

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

ノードを検査する

特定の DOM ノードに興味がある場合は、[検査] を使用すると、簡単に DevTools を開いてそのノードを調査できます。

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

    • 東京
    • ベイルート

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

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

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

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

  1. 下の [Ringo] を右クリックして、[検証] を選択します。<li>Ringo</li> が DOM ツリーで選択されている。

    • George
    • リンゴ
    • Paul
    • ジョン

      Ringo ノードの確認

  2. 矢印キーを 2 回押します。<ul> が選択されています。

    ul ノードの確認

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

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

  5. 下矢印キーを 3 回押して、閉じたばかりの <ul> リストを再度選択します。次のようになります。<ul>...</ul>

  6. キーを押します。リストが展開されます。

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

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

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

    • マグリット
    • スティン
  2. このページの下部にある「付録: 表示位置までスクロール」セクションに移動します。 指示はそこに続きます。

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

ルーラーを表示

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

ルーラー。

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

  • Ctrl+Shift+P キーまたは command+Shift+P キー(Mac)を押してコマンド メニューを開き、Show rulers on hover と入力して Enter キーを押します。
  • 設定] の順にタップします。 [設定] > [設定] > [要素] > [カーソルを合わせたときにルーラーを表示] をオンにします。

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

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

  1. [要素] パネルにカーソルを置きます。
  2. Ctrl+F キーまたは 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 キーを押します。ノードの背景色が金色に変わります。

    style 属性をノードに追加する

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

右クリックで [属性の編集] がハイライト表示されたオプション。

ノードタイプを編集

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

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

    • Dean
    • CANNOT TRANSLATE
    • サデウス
    • Brock
  2. <li> をダブルクリックします。li というテキストがハイライト表示されています。

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

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

HTML として編集

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

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

    • 1 セント硬貨
    • Howard
    • ラジェシュ
    • Leonard
  2. [要素] パネルで現在のノードを右クリックし、プルダウン メニューから [HTML として編集] を選択します。

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

  3. Enter キーを押して新しい行を作成し、「<l」と入力します。DevTool は HTML 構文をハイライト表示し、タグをオートコンプリートします。

    HTML タグのオートコンプリート。

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

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

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

    変更を適用しています。

ノードの複製

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

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

    • 洗面台のたき火
    • ナナ
    • Orlando
    • ホワイトノイズ
  2. [要素] パネルで、<li>Nana</li> を右クリックし、プルダウン メニューから [要素を複製] を選択します。

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

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

キーボード ショートカットも使用できます。Windows、Linux の場合は Shift+Alt+↓、MacOS の場合は Shift+option+↓ キーです。

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

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

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

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

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

  3. スクリーンショットはオフラインに保存されます。

    ノードのスクリーンショットをオフラインに保存しました。

DOM ノードを並べ替える

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

  1. 下の [Elvis Presley] を右クリックして、[Inspect] を選択します。これはリストの最後の項目です

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

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

    • イラスト・マン
    • 鏡越し
    • 基盤
  2. Delete キーを押します。ノードが削除されます。または、ノードを右クリックして [要素を削除] オプションを使用することもできます。

  3. Ctrl+Z キーまたは Command+Z キー(Mac)を押します。 最後のアクションが取り消され、ノードが再表示されます。

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

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

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

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

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

    • 闇の左手
    • 砂丘
  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 Tree で <li>The Big Sleep</li> を右クリックし、[Store as global variable] を選択します。このオプションが表示されない場合は、付録: オプションがないをご覧ください。

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

    temp1 式の結果

JS パスをコピー

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

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

    • カラマゾフ兄弟
    • 犯罪と罰
  2. DOM Tree で <li>The Brothers Karamazov</li> を右クリックし、[Copy] > [Copy JS Path] を選択します。ノードに解決される document.querySelector() 式がクリップボードにコピーされました。

  3. Ctrl+V キーまたは Command+V キー(Mac)を押して、式をコンソールに貼り付けます。

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

    [JS パス] 式をコピー

DOM 変更時のブレーク

DevTools を使用すると、JavaScript によって DOM が変更されるときにページの JavaScript を一時停止できます。DOM 変更ブレークポイントをご覧ください。

次のステップ

DevTools の DOM 関連機能のほとんどはこれで完了です。残りの要素については、DOM ツリーのノードを右クリックして、このチュートリアルでは説明していない他のオプションを試すことで確認できます。要素パネルのキーボード ショートカットもご覧ください。

DevTools のその他の機能については、Chrome 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 ツリーのノードを右クリックして、ポップアップ表示されるコンテキスト メニューからオプションを選択します。指定したオプションがコンテキスト メニューに表示されない場合は、ノードテキストで右クリックしてみてください。

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