DOM の表示と変更を開始する

[アーティクル]
10/20/2023

Microsoft Edge DevTools を使用してページのドキュメントオブジェクトモデル (DOM) を表示および変更する方法の基本については、次の対話型チュートリアルセクションに従ってください。

DOM と HTML の違いを理解するには、以下の「付録: HTML と DOM」を参照してください。

DOM ノードを表示する

要素ツールの DOM ツリーは、DevTools で DOM 関連のすべてのアクティビティを実行する場所です。

ノードを検査する

特定の DOM ノードに関心がある場合、 Inspect は DevTools を開いてそのノードを調査するための高速な方法です。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。(新しいウィンドウまたはタブでリンクを開くには、リンクを右クリックします。または、 Ctrl ( Windows、Linux) または Command (macOS) を長押しし、リンクをクリックします。

レンダリングされた Web ページの [ ノードの検査] で、[ Michelangelo ] を右クリックし、[ 検査] を選択します。

DevTools の Elements ツールが開きます。 <p>Michelangelo</p> ノードは DOM ツリーで強調表示されています。
DevTools の左上隅にある [ 検査 ()] アイコンをクリックします。
[ ノードの検査] で、 Tokyo テキストをクリックします。次 <p>Tokyo</p> ノードが DOM ツリーで強調表示されます。

ノードの検査は、ノードのスタイルを表示および変更するための最初の手順でもあります。「CSS の表示と変更の概要」を参照してください。

キーボードを使用して DOM ツリーを移動する

DOM ツリーでノードを選択したら、キーボードを使用して DOM ツリーを移動できます。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ キーボードを使用して DOM ツリーを移動する] で、[ Ringo ] を右クリックし、[ 検査] を選択します。 <p>Ringo</p> は DOM ツリーで選択されています。
上方向キーを 2 回押します。 <div> が選択されています。
左方向キーを押します。 <div>リストが折りたたまれます。
左方向キーをもう一度押します。 <div> ノードの親が選択されています。この場合、ID がnavigate-the-dom-tree-with-a-keyboard-1されているのは<section>です。
下方向キーを 2 回押すと、折りたたんだ<div>リストが再選択されます。

次のようになります: <div>... </div>。
右方向キーを押します。一覧が展開されます。

ビューにスクロールする

DOM ツリーを表示すると、レンダリングされた Web ページに現在表示されていない DOM ノードに興味を持つ場合があります。たとえば、ページの下部までスクロールし、ページの上部にある <h1> ノードに関心があるとします。 ビューにスクロール すると、ノードを表示できるようにビューポートをすばやく再配置できます。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ 表示にスクロール] で、[ Magritte ] を右クリックし、[ 検査] を選択します。
DOM の [例] ページの下部までスクロールします。
ノードは引き続き DOM ツリーで選択する必要があります。表示されない場合は、[ スクロールして表示] に戻り、最初からやり直します。
[ <p>Magritte</p> ] ノードを右クリックし、[ 表示にスクロール] を選択します。

ビューポートが上にスクロールして 、[マグリット ]ノードが表示されます。 [表示にスクロール] オプションが表示されない場合は、「付録: オプションがありません」を参照してください。

ノードを検索する

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

[要素] タブをクリックするなどして、[要素] ツールにカーソルを合わせてください。
Ctrl + F (Windows、Linux) または Command + F (macOS) を押します。 DOM ツリーの下部に検索バーが開きます。
「 月は厳しいミストレス」と入力します。最後の文は DOM ツリーで強調表示されています。

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

DOM を編集する

DevTools で DOM を編集し、変更がページに与える影響をリアルタイムで表示できます。

テキストコンテンツを編集する

ノードのテキストコンテンツを編集するには、次のように DOM ツリー内のコンテンツをダブルクリックします。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ コンテンツの編集] で、[ Michelle ] を右クリックし、[ 検査] を選択します。
DOM ツリーで、<p>タグと</p> タグの間のテキスト Michelleをダブルクリックします。テキストが強調表示され、選択されていることを示します。
Michelleを削除し、「Leela」と入力し、Enter キーを押して変更を確定します。 DOM 内のテキストは 、Michelle から Leela に変更されます。

属性を編集または追加する

既存の属性を編集するには、属性の名前または値をダブルクリックします。

新しい属性を追加するには、次のように、属性を追加する要素をダブルクリックします。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ 属性の編集] で、[ ハワード ] を右クリックし、[ 検査] を選択します。
[ <p>] をダブルクリックします。ノードが選択されていることを示すテキストが強調表示されます。
右方向キーを押し、スペースを追加し、「style="background-color:gold"」と入力し、Enter キーを押します。ノードの背景色がゴールドに変わります。

ノードタグ名の編集

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

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ ノードタグ名の編集] で、[ Hank ] を右クリックし、[ 検査] を選択します。
[ <p>] をダブルクリックします。テキスト p が強調表示されています。
pを削除し、「button」と入力し、Enter キーを押します。 <p> ノードは、<button> ノードに変更されます。

複数のノード、テキスト、属性を編集する

複数のノードのタグ名、テキストコンテンツ、または属性を一度に変更するには、DOM ツリーの HTML テキストエディターを使用して DOM の一部を次のように編集できます。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページで、[コンテンツの編集]、[ タグ名]、[属性 ] セクションを右クリックし、[ 検査] を選択します。
DOM ツリーで、[ <section id="edit-as-html-1"> ] ノードを右クリックし、[ HTML として編集] を選択します。 HTML エディターが DOM ツリー内に表示され、編集中のセクションの周りにボックスが表示されます。
HTML エディターで行う変更を次のように入力します。
- 属性の追加、削除、または編集。
- ノードの追加または削除。
- ノードのテキストコンテンツまたはタグ名を編集する。
たとえば、<p>Marseille</p>行の後に<p>Dijon</p>を追加します。
HTML エディターの外側にある DOM ツリーをクリックするか、 Ctrl キーを押しながら Enter キーを押します。編集内容が DOM ツリーとレンダリングされた Web ページに適用され、HTML エディターが閉じます。

DOM ノードを並べ替える

DOM ツリー内のノードを並べ替えるには、次のようにノードをドラッグします。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ DOM ノードの並べ替え] で、[ Elvis Presley ] を右クリックし、[ 検査] を選択します。
DOM ツリーで、 <p>Elvis Presley</p> をリストの一番上にドラッグします。

強制状態

次のように、ノードを :active、 :hover、 :focus、 :visited、 :focus-withinなどの状態のままにすることができます。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ 強制状態] で、 ハエの主にマウスポインターを合わせます。背景色がオレンジ色になります。
[ハエの主] を右クリックし、[検査] を選択します。
<p class="demo--hover">The Lord of the Flies</p>を右クリックし、[状態の強制>:hover] を選択します。そのオプションが表示されない場合は、以下の「付録: オプションがありません」を参照してください。実際にノードの上にマウスポインターを置いていない場合でも、背景色はオレンジ色のままです。

ノードを非表示にする

次のように、 H キーを押してノードを非表示にします。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ ノードを非表示にする] で、[ 星の宛先 ] を右クリックし、[ 検査] を選択します。
H キーを押します。ノードは、レンダリングされた Web ページから非表示になります。
H キーをもう一度押します。ノードが再び表示されます。

ノードを削除する

次のように、Delete キーを押してノードを削除 します 。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ ノードの削除] で、[ Foundation ] を右クリックし、[ 検査] を選択します。
Delete キーを押します。ノードが削除されます。
Ctrl + Z (Windows、Linux) または Command + Z (macOS) を押します。最後のアクションは元に戻され、ノードが再び表示されます。

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

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

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

ノードを検査する場合、ノードの横にある == $0 テキストは、変数 $0を使用してコンソールでこのノードを参照できることを意味します。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ 現在選択されているノードを $0 で参照する] で、[ 暗闇の左手 ] を右クリックし、[ 検査] を選択します。
Esc キーを押して、クイックビュー パネルでコンソール ツールを開きます。
「 $0 」と入力し、 Enter キーを押します。式の結果は、 $0 が <p>The Left Hand of Darkness</p>に評価されることを示しています。
結果にマウスポインターを合わせます。ビューポートでノードが強調表示されます。
DOM ツリーで [ <p>Dune</p> ] をクリックし、コンソールに「 $0 」と入力し、もう一度 Enter キーを押します。次に、 $0 は <p>Dune</p>に評価されます。

グローバル変数として格納する

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

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ グローバル変数として保存] で、[ 大きなスリープ] を右クリックし、[ 検査] を選択します。
DOM ツリーで <p>The Big Sleep</p> を右クリックし、[ グローバル変数として保存] を選択します。そのオプションが表示されない場合は、以下の「付録: オプションがありません」を参照してください。
コンソールに「temp1」と入力し、Enter キーを押します。式の結果は、変数がノードに評価されることを示しています。

JS パスをコピーする

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

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ JS パスのコピー] で、[ The Brothers Karamazov] を右クリックし、[ 検査] を選択します。
DOM ツリーで <p>The Brothers Karamazov</p> を右クリックし、[ コピー>Copy JS パス] を選択します。ノードに解決される document.querySelector() 式がクリップボードにコピーされました。
Ctrl + V (Windows、Linux) または Command + V (macOS) を押して、式をコンソール ツールに貼り付けます。
Enter キーを押して式を評価します。 Copy JS Path 式は、ノードに評価されます。

DOM の変更を中断する

DevTools を使用すると、JavaScript が DOM を変更するときに、ページの JavaScript を一時停止できます。

属性の変更を中断する

ノードの属性を変更する JavaScript を一時停止する場合は、属性変更ブレークポイントを使用します。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ 属性の変更時に中断] で、[ Sauerkraut ] を右クリックし、[ 検査] を選択します。
DOM ツリーで、<p id="botm_target">Sauerkraut</p>を右クリックし、[中断] を選択します>Attribute の変更:

オプションが表示されない場合は、「付録: オプションがありません」を参照してください。
[ 背景の設定 ] ボタンをクリックします。これにより、ノードの style 属性が background-color:thistleに設定されます。 DevTools はページを一時停止し、 ソース ツールで属性を変更する原因となったコードを強調表示します。
[ スクリプトの再開 ()] をクリックして、JavaScript の実行を再開します。

ノードの削除時に中断する

特定のノードが削除されたときに一時停止する場合は、ノードの削除ブレークポイントを使用します。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ ノードの削除時の中断] で、[ Neuromancer ] を右クリックし、[ 検査] を選択します。
DOM ツリーで、[<p id="target">Neuromancer</p>] を右クリックし、[中断] [オン] >[ノードの削除] を選択します。オプションが表示されない場合は、「付録: オプションがありません」を参照してください。
上の [ 削除 ] ボタンをクリックします。 DevTools はページを一時停止し、ノードを削除する原因となったコードを強調表示します。
[ スクリプトの再開 (スクリプト の)] を選択します。

サブツリーの変更を中断する

サブツリー変更ブレークポイントをノードに配置すると、ノードの子孫のいずれかが追加または削除されると、DevTools によってページが一時停止されます。

新しいウィンドウまたはタブで DOM Examples デモページを開きます。
レンダリングされた Web ページの [ サブツリーの変更時の中断] で、[ 詳細に対する火災 ] を右クリックし、[ 検査] を選択します。
DOM ツリーで、<p>A Fire Upon the Deep</p>上のノードである<div id="ul_target">を右クリックし、[ブレークオン]、[サブツリーの変更] の順に選択>。 [サブツリーの変更] コマンドが表示されない場合は、「付録: オプションがありません」を参照してください。
[ 子の追加] をクリックします。 <p> ノードがリストに追加されたため、コードは一時停止します。
[ スクリプトの再開 (スクリプト の)] を選択します。

次のステップ

これは、DevTools の DOM 関連の機能の大部分をカバーしています。 DOM ツリーでノードを右クリックし、このチュートリアルで取り上げなかった他のオプションを試すことで、残りの機能を確認できます。「要素ツールのキーボードショートカット」も参照してください。

DevTools の概要に関するページを参照して、DevTools でできることをすべて確認してください。

付録: HTML と DOM

このセクションでは、HTML と DOM の違いについて説明します。

Web ブラウザーを使用してページを要求すると、サーバーは次のような 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 に基づいてオブジェクトのツリーを作成します。

html
    head
        title
    body
        h1
        p
        script

ページの内容を表すオブジェクトまたはノードのこのツリーは、 ドキュメントオブジェクトモデル (DOM) と呼ばれます。現在、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 ツリーでノードを右クリックし、ポップアップ表示されるコンテキストメニューからオプションを選択するように指示します。指定したオプションがコンテキストメニューに表示されない場合は、ノードテキストから離れて右クリックするか、ノードの左側にある [ ... ] ボタンをクリックします。

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

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。元のページはここにあり、ケイス・バスクによって作成されています。

この作品は、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。

次の方法で共有

DOM の表示と変更を開始する

DOM ノードを表示する

ノードを検査する

キーボードを使用して DOM ツリーを移動する

ビューにスクロールする

ノードを検索する

DOM を編集する

テキストコンテンツを編集する

属性を編集または追加する

ノードタグ名の編集

複数のノード、テキスト、属性を編集する

DOM ノードを並べ替える

強制状態

ノードを非表示にする

ノードを削除する

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

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

グローバル変数として格納する

JS パスをコピーする

DOM の変更を中断する

属性の変更を中断する

ノードの削除時に中断する

サブツリーの変更を中断する

次のステップ

付録: HTML と DOM

付録: オプションがありません

フィードバック

その他のリソース

次の方法で共有

DOM の表示と変更を開始する

DOM ノードを表示する

ノードを検査する

キーボードを使用して DOM ツリーを移動する

ビューにスクロールする

ノードを検索する

DOM を編集する

テキスト コンテンツを編集する

属性を編集または追加する

ノード タグ名の編集

複数のノード、テキスト、属性を編集する

DOM ノードを並べ替える

強制状態

ノードを非表示にする

ノードを削除する

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

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

グローバル変数として格納する

JS パスをコピーする

DOM の変更を中断する

属性の変更を中断する

ノードの削除時に中断する

サブツリーの変更を中断する

次のステップ

付録: HTML と DOM

付録: オプションがありません

フィードバック

その他のリソース

テキストコンテンツを編集する

ノードタグ名の編集