DOM Inspector FAQ

Web サイトを調べるには？

Inspector の URL バーに URL を入力して Enter キーを押します。あるいは、Inspector の [ファイル] メニューから [URL を Inspect] を選びます。開いている XUL ウィンドウを調べたいのであれば、[ファイル] メニューから [ウィンドウを Inspect] を選びます。

ドキュメントの DOM ノードビューで一部のノードが赤色表示されるのはなぜ？

これらのノードは 無名コンテントノード であり、元のドキュメントによって生成されて DOM にあるものではないのです。

なるほど。では、これらの無名ノードを表示したくない場合はどうすればいいのでしょう？

[表示] メニューの [無名コンテントを表示] からチェックを外せば Inspector の中で無名ノードを隠せます。

元のドキュメントにない空の #text ノードがいっぱいあります。これらは何でしょう？ どうして存在して、どうすれば取り除けるのでしょう？

これらのテキストノードは実際は要素間の改行とスペースなのです。どうしてそれらを表示するのかについての長々とした議論は バグ 26179 で行われています。

都合の良いことに、[表示] メニューの [ホワイトスペースノードを表示] からチェックを外せば、Inspector の中でこれらの ホワイトスペースノード を隠せます。ただし、すべての空のテキストノードを隠せるわけではありません。連続するホワイトスペースをユーザエージェントがまとめることを CSS の white-space プロパティの値で制限しているノードが隠されることはありません。

DOM ツリー中の特定のノードを探すのが大変です。ツリー中を探す以外にもっと手早くできる方法はありませんか？

ご心配なく。ノード名、ID、あるいは属性と値の組み合わせで検索できます。検索したいドキュメントを調べている Inspector ウィンドウの [検索] メニューから [ノードを検索] を選んで検索条件を入力すればよいのです。

ノードについて何も分かっていないなら、それをクリックして選択してみることもできます。そのノードをビューの中に表示させておいて、[検索] メニューから [クリックで要素を選択] を選び、それから調べたい要素をクリックするのです。