Internet Explorer 10/11

Internet Explorer の開発者ツールでテキストボックスやボタンの要素の情報を得る

最終更新日:2014/4/6

Web ページには、文字を入力するボックス、検索ボタンなど、様々な要素があります。たとえば、そんな Web ページの文字を入力するボックスに、Excel のマクロから文字を貼り付けたいとか、検索ボタンをマクロから操作してクリックさせたいとか、そういうちょっとした開発をしたいときに、Internet Explorer の開発者ツールが便利です。

たとえば、次の Yahoo! Japan のトップページには、検索キーワードを入力するボックスと、その右に検索ボタンがあります。

Yahoo! Japan

このボタンに文字を送り込むコードや、ボタンをクリックさせるコードは、JavaScript のサンプルコードなどを載せている各所のサイトを見ていただくとして、それらの操作をするにはそのテキストボックスやボタンの名前(ID)を知る必要があるので、ここでは開発者ツールを使ってそれを知る方法を紹介します。

操作は簡単で、キーボードで F12キーを押します。すると、ブラウザーの下部に開発者ツールの画面が表示されます。そこで、下図で赤枠で囲んだ矢印のマークをクリックします。

● Internet Explorer 11 の開発者ツール
IE11 の開発者ツール

● Internet Explorer 10 の開発者ツール
IE10 の開発者ツール

次に、名前を調べたいテキストボックスやボタンをクリックします。すると、開発者ツールに HTML のソースが表示され、クリックした部分に対応するソースがハイライトで表示されます。下図では、そのテキストボックスが name="p" id="srchtxt" というソースなので、JavaScript で

名前を使い document.form名.p.Value = …、
あるいは ID を使い document.getElementById("srchtxt").Value = …

といったコードを書くことによって、このテキストボックスにプログラムから文字を表示させることができるとわかります。

Yahoo! Japan