この動画やインタラクティブなチュートリアルでは、Chrome DevTools を使用してページの DOM を表示および変更する基本について説明します。
このチュートリアルでは、DOM と HTML の違いを理解していることを前提としています。詳しくは、付録: HTML と DOM をご覧ください。
DOM ノードを表示
[要素] パネルの DOM ツリーでは、DevTools のすべての DOM 関連操作を行います。
ノードを検査する
特定の DOM ノードに興味がある場合は、[検査] を使用すると、簡単に DevTools を開いてそのノードを調査できます。
- 下の [ミケランジェロ] を右クリックして、[検証] を選択します。
- ミケランジェロ
- Raphael
DevTools の [要素] パネルが開きます。
<li>Michelangelo</li>
が DOM Tree でハイライト表示されます。
- DevTools の左上にある [Inspect] アイコンをクリックします。
下の「東京」のテキストをクリックします。
- 東京
ベイルート
これで、
<li>Tokyo</li>
が DOM ツリーでハイライト表示されます。
ノードの詳細を調べることも、ノードのスタイルを表示して変更するための最初のステップでもあります。CSS の表示と変更を開始するをご覧ください。
キーボードで DOM ツリーを操作する
DOM ツリーでノードを選択したら、キーボードで DOM ツリーを操作できます。
下の [Ringo] を右クリックして、[検証] を選択します。
<li>Ringo</li>
が DOM ツリーで選択されている。- George
- リンゴ
- Paul
ジョン
↑ 矢印キーを 2 回押します。
<ul>
が選択されています。← キーを押します。
<ul>
リストを閉じます。もう一度 ← キーを押します。
<ul>
ノードの親が選択されます。この場合は、ステップ 1 の手順を含む<li>
ノードです。下矢印キーを 3 回押して、閉じたばかりの
<ul>
リストを再度選択します。次のようになります。<ul>...</ul>
→ キーを押します。リストが展開されます。
表示される位置までスクロール
DOM ツリーを表示しているときに、現在ビューポートにない DOM ノードに注目することがあります。たとえば、ページの一番下までスクロールし、ページの上部にある <h1>
ノードに関心があるとします。[ビューにスクロール] を使用すると、ビューポートをすばやく再配置して、ノードを表示できます。
下の [Magritte] を右クリックして、[検証] を選択します。
- マグリット
- スティン
このページの下部にある「付録: 表示位置までスクロール」セクションに移動します。 指示はそこに続きます。
ページ下部の手順を完了したら、ここに戻ってください。
ルーラーを表示
ビューポートの上と左にあるルーラーを使用すると、[要素] パネルで要素にカーソルを合わせたときに、その要素の幅と高さを測定できます。
次のいずれかの方法でルーラーを有効にします。
- Ctrl+Shift+P キーまたは command+Shift+P キー(Mac)を押してコマンド メニューを開き、
Show rulers on hover
と入力して Enter キーを押します。 - [設定] > [設定] > [要素] > [カーソルを合わせたときにルーラーを表示] をオンにします。
ルーラーのサイズ単位はピクセルです。
ノードを検索
DOM ツリーでは、文字列、CSS セレクタ、XPath セレクタで検索できます。
- [要素] パネルにカーソルを置きます。
- Ctrl+F キーまたは Command+F キー(Mac)を押します。 DOM ツリーの下部に検索バーが開きます。
タイプ
The Moon is a Harsh Mistress
。最後の文が DOM ツリーでハイライト表示されます。
前述のように、検索バーでは CSS セレクタと XPath セレクタもサポートされています。
[要素] パネルでは、DOM ツリー内で最初に一致した結果が選択され、ビューポートに表示されます。デフォルトでは、入力と同時に起動されます。長い検索クエリを常に処理する場合は、Enter キーを押したときにのみ DevTools で検索を実行するようにできます。
ノード間を不必要にジャンプしないようにするには、 [設定] > [設定] > [グローバル] > [入力時検索] チェックボックスをオフにします。
DOM を編集する
DOM を適切に編集して、その変更がページに与える影響を確認できます。
コンテンツを編集する
ノードのコンテンツを編集するには、DOM ツリーでコンテンツをダブルクリックします。
下の [Michelle] を右クリックして、[検証] を選択します。
- フライ
- Michelle
DOM Tree で
Michelle
をダブルクリックします。つまり、<li>
と</li>
の間のテキストをダブルクリックします。テキストは、選択されていることを示すために青色でハイライト表示されます。Michelle
を削除して「Leela
」と入力し、Enter キーを押して変更を確定します。上のテキストは、Michelle から Leela に変わります。
属性を編集
属性を編集するには、属性の名前または値をダブルクリックします。ノードに属性を追加する方法については、以下の手順をご覧ください。
下の [Howard] を右クリックして [検証] を選択します。
- Howard
- Vince
<li>
をダブルクリックします。テキストはハイライト表示され、ノードが選択されていることを示します。右矢印キーを押してスペースを追加し、「
style="background-color:gold"
」と入力して Enter キーを押します。ノードの背景色が金色に変わります。
[属性を編集] 右クリック オプションを使用することもできます。
ノードタイプを編集
ノードのタイプを編集するには、そのタイプをダブルクリックし、新しいタイプを入力します。
下の [Hank] を右クリックして、[Inspect] を選択します。
- Dean
- CANNOT TRANSLATE
- サデウス
- Brock
<li>
をダブルクリックします。li
というテキストがハイライト表示されています。li
を削除して「button
」と入力して、Enter キーを押します。<li>
ノードが<button>
ノードに変わります。
HTML として編集
構文のハイライト表示とオートコンプリートを使用してノードを HTML として編集するには、ノードのプルダウン メニューから [HTML として編集] を選択します。
下の [Leonard] を右クリックして、[検証] を選択します。
- 1 セント硬貨
- Howard
- ラジェシュ
- Leonard
[要素] パネルで現在のノードを右クリックし、プルダウン メニューから [HTML として編集] を選択します。
Enter キーを押して新しい行を作成し、「
<l
」と入力します。DevTool は HTML 構文をハイライト表示し、タグをオートコンプリートします。オートコンプリート メニューから
li
要素を選択し、「>
」と入力します。DevTools により、カーソルの後に終了タグ</li>
が自動的に追加されます。タグ内に「
Sheldon
」と入力し、Ctrl / Command+Enter キーを押して変更を適用します。
ノードの複製
要素を複製するには、[要素を複製] 右クリック オプションを使用します。
下の [Nana] を右クリックして、[検証] を選択します。
- 洗面台のたき火
- ナナ
- Orlando
- ホワイトノイズ
[要素] パネルで、
<li>Nana</li>
を右クリックし、プルダウン メニューから [要素を複製] を選択します。ページに戻ります。リストアイテムがすぐに複製されます。
キーボード ショートカットも使用できます。Windows、Linux の場合は Shift+Alt+↓、MacOS の場合は Shift+option+↓ キーです。
ノードのスクリーンショットをキャプチャする
[ノードのスクリーンショットをキャプチャ] を使用すると、DOM ツリーの個々のノードのスクリーンショットを撮ることができます。
このページの画像を右クリックして、[検査] を選択します。
[要素] パネルで画像の URL を右クリックし、プルダウン メニューから [ノードのスクリーンショットをキャプチャ] を選択します。
スクリーンショットはオフラインに保存されます。
DOM ノードを並べ替える
ノードをドラッグして並べ替えます。
下の [Elvis Presley] を右クリックして、[Inspect] を選択します。これはリストの最後の項目です
- スティービー ワンダー
- トム ウェイツ
- クリス・シーリ
- エルヴィス プレスリー
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] を右クリックして、[検証] を選択します。
- モンテ クリスト数
- わたしの行き先はスター
H キーを押します。ノードが非表示になっています。または、ノードを右クリックして [要素を非表示] オプションを使用することもできます。
もう一度 H キーを押します。ノードが再び表示されます。
ノードの削除
Delete キーを押してノードを削除します。
下の [Foundation] を右クリックして [検証] を選択します。
- イラスト・マン
- 鏡越し
- 基盤
Delete キーを押します。ノードが削除されます。または、ノードを右クリックして [要素を削除] オプションを使用することもできます。
Ctrl+Z キーまたは Command+Z キー(Mac)を押します。 最後のアクションが取り消され、ノードが再表示されます。
コンソールでノードにアクセスする
DevTools には、コンソールから DOM ノードにアクセスしたり、DOM ノードへの JavaScript リファレンスを取得したりするためのショートカットがいくつか用意されています。
現在選択されているノードを $0 で参照する
ノードを調べると、ノードの横に == $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] を右クリックして、[検証] を選択します。
- ビッグ・スリープ
- さようなら
DOM Tree で
<li>The Big Sleep</li>
を右クリックし、[Store as global variable] を選択します。このオプションが表示されない場合は、付録: オプションがないをご覧ください。コンソールで「
temp1
」と入力し、Enter キーを押します。式の結果は、変数がノードと評価されることを示しています。
JS パスをコピー
自動テストで JavaScript パスを参照する必要がある場合は、その JavaScript パスをノードにコピーします。
下の [The Brothers Karamazov] を右クリックして、[検証] を選択します。
- カラマゾフ兄弟
- 犯罪と罰
DOM Tree で
<li>The Brothers Karamazov</li>
を右クリックし、[Copy] > [Copy JS Path] を選択します。ノードに解決されるdocument.querySelector()
式がクリップボードにコピーされました。Ctrl+V キーまたは Command+V キー(Mac)を押して、式をコンソールに貼り付けます。
Enter キーを押して式を評価します。
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 の概要をご覧ください。
付録: 表示される位置までスクロール
これは、[ビューにスクロール] の続きです。以下の手順に沿ってセクションを完了します。
- DOM ツリーでは
<li>Magritte</li>
ノードが引き続き選択されているはずです。表示されていない場合は、ビューにスクロールに戻って、最初からやり直します。 <li>Magritte</li>
ノードを右クリックして、[Scroll into view] を選択します。ビューポートが再び上にスクロールされて、Magritte ノードが表示されます。[ビューにスクロール] オプションが表示されない場合は、付録: オプションがないをご覧ください。
付録: オプションが見つからない
このチュートリアルの多くの手順では、DOM ツリーのノードを右クリックして、ポップアップ表示されるコンテキスト メニューからオプションを選択します。指定したオプションがコンテキスト メニューに表示されない場合は、ノードテキストで右クリックしてみてください。