Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

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

Kayce Basques

Sofia Emelianova

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

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

DOM ノードを表示する

[要素] パネルの DOM ツリーは、DevTools で DOM 関連のアクティビティを行う場所です。

ノードを検査する

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

次のリストで、[Michelangelo] を右クリックします。メニューから [検証] を選択します。
- ミケランジェロ
- ラファエル
DevTools の [Elements] パネルが開きます。<li>Michelangelo</li> が DOM ツリーでハイライト表示されます。
[ 要素を選択] をクリックします。
次のリストから [Tokyo] を選択します。
- 東京
- ベイルート
<li>Tokyo</li> が DOM ツリーでハイライト表示されます。

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

キーボードで DOM ツリーを移動する

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

次のリストから [Ringo] を右クリックし、[検証] を選択します。DOM ツリーで <li>Ringo</li> が選択されています。
- George
- リンゴ
- Paul
- John
上矢印キーを 2 回押します。<ul> が選択されています。
左矢印キーを押します。<ul> リストが閉じます。
もう一度左矢印キーを押します。<ul> ノードの親が選択されます。この場合、ステップ 1 の手順を含む <li> ノードです。
下矢印キーを 3 回押して、折りたたんだ <ul> リストを再度選択します。次のようになります。<ul>...</ul>
右矢印キーを押します。リストが開きます。

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

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

次のリストで、[Magritte] を右クリックし、[検証] を選択します。
- マグリット
- スーティン
付録のセクション Scroll into view で、追加の手順を確認してください。

完了したら、このセクションに戻ってください。

ルーラーを表示

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

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

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

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

ノードを検索

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

[要素] パネルにカーソルを合わせます。
Ctrl+F キーまたは Command+F キー（macOS）を押します。DOM ツリーの下部に検索バーが開きます。
タイプ The Moon is a Harsh Mistress。最後の文が DOM ツリーでハイライト表示されます。

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

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

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

DOM を編集する

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

コンテンツを編集する

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

次のリストで [Michelle] を右クリックし、[検証] を選択します。
- Fry
- Michelle
DOM ツリーで Michelle をダブルクリックします。つまり、<li> と </li> の間のテキストをダブルクリックします。テキストが青色でハイライト表示され、選択されていることが示されます。
Michelle を削除し、「Leela」と入力して Enter キーを押し、変更を確定します。テキストが Michelle から Leela に変わります。

属性を編集

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

次のリストで [Howard] を右クリックし、[検証] を選択します。
- Howard
- Vince
<ul> を展開し、<li> をダブルクリックして編集します。テキストがハイライト表示され、ノードが選択されていることが示されます。
右矢印キーを押し、スペースを追加して style="background-color:gold" と入力し、Enter キーを押します。ノードの背景色がゴールドに変わります。

ノードタイプを編集します

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

次のリストで [Hank] を右クリックし、[検証] を選択します。
- Dean
- CANNOT TRANSLATE
- タデウス
- Brock
<li> をダブルクリックします。テキスト li がハイライト表示されます。
li を削除し、button と入力して Enter キーを押します。<li> ノードが <button> ノードに変わります。

HTML として編集

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

下の [Leonard] を右クリックし、[検証] を選択します。
- 1 セント硬貨
- Howard
- Rajesh
- Leonard
[要素] パネルで、現在のノードを右クリックし、プルダウンメニューから [HTML として編集] を選択します。
Enter キーを押して新しい行を開始し、「<l」と入力します。DevTool は HTML 構文をハイライト表示し、タグの予測入力を提案します。

注: さらに、DevTools では DOM プロパティを予測入力できます。
予測入力メニューから li 要素を選択し、「>」と入力します。DevTools により、カーソルの後に終了タグ </li> が自動的に追加されます。
タグ内に Sheldon と入力し、Ctrl キーまたは Command キー + Enter キーを押して変更を適用します。

ノードを複製する

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

次のリストで [Nana] を右クリックし、[検証] を選択します。
- 虚栄の篝火
- ナナ
- Orlando
- ホワイトノイズ
[Elements] パネルで <li>Nana</li> を右クリックし、プルダウンメニューから [Duplicate element] を選択します。
ページに戻ります。リストアイテムが複製されました。

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

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

DOM ツリー内の個々のノードのスクリーンショットを撮ることができます。

このページの任意の画像を右クリックし、[検証] を選択します。
[要素] パネルで、画像 URL を右クリックし、プルダウンメニューから [ノードのスクリーンショットをキャプチャ] を選択します。
スクリーンショットはダウンロード（Windows と macOS）に保存されます。

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

DOM ノードの順序を変更する

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

次のリストで、[Elvis Presley] を右クリックし、[検証] を選択します。リストの最後の項目です。
- スティービー・ワンダー
- トム・ウェイツ
- クリス・シーリ
- エルヴィスプレスリー
DOM ツリーで、<li>Elvis Presley</li> をリストの先頭にドラッグします。

状態を強制する

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

[The Lord of the Flies] リストアイテムにカーソルを合わせます。背景色がオレンジ色になります。
- 蝿の王
- 罪と罰
- 白鯨
[The Lord of the Flies] リストアイテムを右クリックし、[検証] を選択します。
<li class="demo--hover">The Lord of the Flies</li> を右クリックし、[Force State] > [:hover] を選択します。このオプションが表示されない場合は、オプションが表示されないに関する付録をご覧ください。

実際にノードにカーソルを合わせていなくても、背景色はオレンジ色のままです。

ノードを非表示にする

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

次のリストで、[The Stars My Destination] を右クリックし、[検証] を選択します。
- モンテ・クリスト伯
- The Stars My Destination
H キーを押します。ノードは非表示になっています。ノードを右クリックして [Hide element] オプションを使用することもできます。
H キーをもう一度押します。ノードが再び表示されます。

ノードの削除

ノードを削除するには、[削除] を押します。

次のリストで [Foundation] を右クリックし、[検証] を選択します。
- The Illustrated Man
- 鏡の国のアリス
- 基盤
Delete キーを押します。ノードが削除されます。ノードを右クリックして [Delete element] オプションを使用することもできます。
Ctrl+Z キーまたは Command+Z キー（macOS）を押します。直前の操作が元に戻り、ノードが再び表示されます。

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

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

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

ノード（::before や ::after などの疑似要素を含む）を検査すると、ノードの横に == $0 テキストが表示されます。これは、コンソールで変数 $0 を使用してこのノードを参照できることを意味します。

[The Left Hand of Darkness] リスト項目を右クリックし、[検証] を選択します。
- 闇の左手
- デューン
Esc キーを押してコンソールドロワーを開きます。開くには、[コンソール] を選択する必要がある場合があります。
「$0」と入力して Enter キーを押します。式の結果は、$0 が <li>The Left Hand of Darkness</li> と評価されます。
結果にカーソルを合わせます。ビューポートでノードがハイライト表示されます。
DOM ツリーで <li>Dune</li> をクリックし、コンソールに $0 を再度入力して、Enter キーをもう一度押します。これで、$0 は <li>Dune</li> と評価されます。

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

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

次のリストで、[The Big Sleep] を右クリックし、[検証] を選択します。
- 大いなる眠り
- The Long Goodbye
DOM ツリーで <li>The Big Sleep</li> を右クリックし、[グローバル変数として保存] を選択します。このオプションが表示されない場合は、オプションが表示されないをご覧ください。
コンソールに「temp1」と入力して、Enter キーを押します。式の結果は、変数がノードに評価されることを示しています。ノードをクリックして、リストアイテムを開きます。

JS パスをコピー

ノードへの JavaScript パスをコピーして、自動テストで参照します。

次のリストで [The Brothers Karamazov] を右クリックし、[検証] を選択します。
- カラマーゾフの兄弟
- 罪と罰
DOM ツリーで <li>The Brothers Karamazov</li> を右クリックし、[Copy] > [Copy JS Path] を選択します。ノードに解決される document.querySelector() 式がクリップボードにコピーされました。
Ctrl+V キーまたは Command+V キー（macOS）を押して、式をコンソールに貼り付けます。
Enter キーを押して式を評価します。

DOM の変更時にブレークする

DevTools を使用すると、JavaScript が DOM を変更したときにページの JavaScript を一時停止できます。DOM 変更ブレークポイントについて確認する。

次のステップ

これで、DevTools の DOM 関連機能のほとんどを網羅しました。DOM ツリーでノードを右クリックして、このチュートリアルで説明していないオプションを試すことで、残りの機能を確認できます。

付録

特定のトピックの詳細

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）と呼ばれます。現時点では、DOM と HTML の両方でオブジェクトは同じです。

HTML の下部にある script.js ファイルに次の関数が含まれているとします。

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 とは異なるものになります。

詳しくは、MDN の Introduction to the DOM をご覧ください。

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

これは、表示領域までスクロールセクションの続きです。手順に沿ってセクションを完了します。

DOM ツリーで <li>Magritte</li> ノードが選択されたままになっているはずです。そうでない場合は、スクロールして表示に戻ってやり直します。
<li>Magritte</li> ノードを右クリックして、[Scroll into view] を選択します。ビューポートが上にスクロールされ、Magritte ノードが表示されます。[ビューにスクロール] が表示されない場合は、オプションが表示されないをご覧ください。

オプションが表示されない

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

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

DOM の表示と変更のスタートガイド コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。

DOM ノードを表示する

ノードを検査する

キーボードで DOM ツリーを移動する

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

ルーラーを表示

ノードを検索

DOM を編集する

コンテンツを編集する

属性を編集

ノードタイプを編集します

HTML として編集

ノードを複製する

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

DOM ノードの順序を変更する

状態を強制する

ノードを非表示にする

ノードの削除

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

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

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

JS パスをコピー

DOM の変更時にブレークする

次のステップ

付録

HTML と DOM

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

オプションが表示されない

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