InternetExplorerによるHTML要素の操作

テキストボックスに文字を入力したりボタンをクリックするなど、HTML要素を操作する方法について説明します。
HTML要素を指定する方法については要素の指定を参照してください。

目次

クリック

ボタン／ラジオボタン／チェックボックス／リンク等をクリックする方法です。

実装方法

操作したいHTML要素を指定してClickメソッドをコールします。
そうすればマウスでクリックしたときと同様の動作が行われます。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'ボタンをクリック
						objIE.Document.getElementById("buttonid1").Click()

						'ラジオボタンの２つ目をクリック
						objIE.Document.GetElementsByName("radioname")(1).Click()

						'チェックボックスをクリック
						objIE.Document.getElementsByName("checkname")(0).Click()
						objIE.Document.Forms[0].Item("checkname").Click();

						'リンクをクリック
						For i As Integer = 0 To objIE.Document.Links.Length - 1
		
							If objIE.Document.Links(i).InnerTEXT = "リンク１" Then
								objIE.Document.Links(i).Click()
								Exit For
							End If
						Next
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//ボタンをクリック
						objIE.Document.getElementById("buttonid1").Click();

						//ラジオボタンの２つ目をクリック
						objIE.Document.GetElementsByName("radioname")(1).Click(); 

						//チェックボックスをクリック
						objIE.Document.getElementsByName("checkname")(0).Click();

						//リンクをクリック
						for (int i = 0; i < objIE.Document.Links.Length; i++)
						{
							if (objIE.Document.Links[i].InnerTEXT == "リンク１")
							{
								objIE.Document.Links[i].Click();
								break;
							}
						}
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'ボタンをクリック
						objIE.document.getElementById("buttonid1").Click
					
						'ラジオボタンの２つ目をクリック
						objIE.document.getElementsByName("radioname")(1).Click
					
						'チェックボックスをクリック
						objIE.document.getElementsByName("checkname")(0).Click
					
						'リンクをクリック
						Dim i As Integer
						For i = 0 To objIE.document.Links.Length - 1
					
							If objIE.document.Links(i).innerText = "リンク１" Then
								objIE.document.Links(i).Click
								Exit For
							End If
						Next

選択

ラジオボタン／セレクトボックスを選択する方法です。

実装方法

ラジオボタン／チェックボックスの場合、操作したいHTML要素を指定してCheckedプロパティにTrue／Falseを設定します。
セレクトボックスの場合は２通りの方法があります。
操作したいセレクトボックスの要素を指定し、SelectedIndexプロパティに選択したいOptionの配列番号(0～)を設定します。
または、セレクトボックス用の中のOption要素を指定して、SelectedプロパティにTrue／Falseを設定します。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'ラジオボタンの２つ目を選択
						objIE.Document.Forms("testform1").Item("radioname")(1).Checked = True

						'セレクトボックスの中の３番目のオプションを選択
						objIE.Document.Forms(0).Item("selectname").Item(2).Selected = True
						objIE.Document.Forms(0).Item("selectname").SelectedIndex = 2
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//ラジオボタンの２つ目を選択
						objIE.Document.Forms("testform1").Item("radioname")[1].Checked = true;

						//セレクトボックスの中の３番目のオプションを選択
						objIE.Document.Forms[0].Item["selectname"].Item[2].Selected = true;
						objIE.Document.Forms[0].Item["selectname"].SelectedIndex = 2;
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'ラジオボタンの２つ目を選択
						objIE.document.forms("testform1").Item("radioname")(1).Checked = True
					
						'セレクトボックスの中の３番目のオプションを選択
						objIE.document.forms(0).Item("selectname").Item(2).Selected = True
						objIE.document.forms(0).Item("selectname").selectedIndex = 2

入力

テキストボックスやパスワード欄に文字を入力する方法です。

実装方法

操作したいHTML要素を指定してValueプロパティに値を設定します。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						
						'テキストボックスに文字を入力
						objIE.Document.getElementById("inputid2").Value = "テキスト２"
		
						'パスワードに文字を入力
						objIE.Document.getElementsByName("passwordname")(0).Value = "password"
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						
						//テキストボックスに文字を入力
						objIE.Document.getElementById("inputid2").Value = "テキスト２";
	
						//パスワードに文字を入力
						objIE.Document.getElementsByName("passwordname")[0].Value = "password";
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'テキストボックスに文字を入力
						objIE.document.getElementById("inputid2").Value = "テキスト２"
					
						'パスワードに文字を入力
						objIE.document.getElementsByName("passwordname")(0).Value = "password"

値の参照

テキストボックスに入力されている値やチェックボックスの選択状態などの、HTML要素に設定されている値を参照する方法です。

実装方法

HTML要素を指定してValueプロパティの値を参照します。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						
						'テキストボックスを参照
						MsgBox(objIE.Document.getElementById("inputid2").Value)
		
						'ラジオボタンを参照
						MsgBox((objIE.Document.Forms("testform1").Item("radioname")(1).Checked).ToString())
		
						'チェックボックスを参照
						MsgBox((objIE.Document.getElementsByName("checkname")(0).Checked).ToString())
		
						'セレクトボックスを参照
						MsgBox((objIE.Document.Forms(0).Item("selectname").Item(2).Selected).ToString())
						MsgBox((objIE.Document.Forms(0).Item("selectname").SelectedIndex).ToString())
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						
						//テキストボックスを参照
						MessageBox.Show(objIE.Document.getElementById("inputid2").Value);
	
						//ラジオボタンを参照
						MessageBox.Show((objIE.Document.Forms("testform1").Item("radioname")[1].Checked).ToString());
	
						//チェックボックスを参照
						MessageBox.Show((objIE.Document.getElementsByName("checkname")(0).Checked).ToString());
	
						//セレクトボックスを参照
						MessageBox.Show((objIE.Document.Forms[0].Item["selectname"].Item[2].Selected).ToString());
						MessageBox.Show((objIE.Document.Forms[0].Item["selectname"].SelectedIndex).ToString());
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'テキストボックスを参照
						MsgBox (objIE.document.getElementById("inputid2").Value)
					
						'ラジオボタンを参照
						MsgBox ((objIE.document.forms("testform1").Item("radioname")(1).Checked))
					
						'チェックボックスを参照
						MsgBox ((objIE.document.getElementsByName("checkname")(0).Checked))
					
						'セレクトボックスを参照
						MsgBox ((objIE.document.forms(0).Item("selectname").Item(2).Selected))
						MsgBox ((objIE.document.forms(0).Item("selectname").selectedIndex))

Reset／Submit

formに対してreset／submitを行う方法です。

実装方法

指定したフォーム要素のReset／Submitメソッドを実行します。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'Reset
						objIE.Document.Forms("testform1").Reset()
		
						'Submit
						objIE.Document.Forms("testform1").Submit()
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//Reset
						objIE.Document.Forms("testform1").Reset();
	
						//Submit
						objIE.Document.Forms("testform1").Submit();
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'Reset
						objIE.document.forms("testform1").Reset
					
						'Submit
						objIE.document.forms("testform1").submit

属性の参照・設定

HTML要素の属性の値を参照・設定する方法です。

実装方法

HTML要素の属性の値を参照するにはgetAttributeメソッドを使用します。
引数に属性名を指定します。

getAttribute("属性の名前")

戻り値：文字
※引数は、大文字と小文字が区別されません。

HTML要素の指定した属性に値を設定するにはsetAttributeメソッドを使用します。
引数に属性名と設定値を指定します。
setAttribute("設定する属性名","この属性の新しい値")

※「class」属性を指定したい場合は、そのままではなく「className」と指定してください
※Document.allで取得したIHTMLElementに対してgetAttributeで独自属性を指定しても、 DBNullとなって取得できない場合がありました。
代わりにgetAttributeNode("・・・").nodeValueを使うことで取得できました。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'info属性の値を表示
						MsgBox(objIE.Document.getElementById("styleid1").getAttribute("info"))
		
						'info属性に値を設定
						objIE.Document.getElementById("styleid1").setAttribute("info", "newinfo")
						MsgBox(objIE.Document.getElementById("styleid1").getAttribute("info"))
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//info属性の値を表示
						MessageBox.Show(objIE.Document.getElementById("styleid1").getAttribute("info"));
	
						//info属性に値を設定
						objIE.Document.getElementById("styleid1").setAttribute("info", "newinfo");
						MessageBox.Show(objIE.Document.getElementById("styleid1").getAttribute("info"));
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'info属性の値を表示
						MsgBox (objIE.document.getElementById("styleid1").getAttribute("info"))
					
						'info属性に値を設定
						Call objIE.document.getElementById("styleid1").setAttribute("info", "newinfo")
						MsgBox (objIE.document.getElementById("styleid1").getAttribute("info"))

参考

getAttributeメソッド
setAttributeメソッド

スタイルの参照・設定

指定した要素のスタイルを設定・参照する方法です。

実装方法

HtmlElement.Styleプロパティに、さらにスタイルを指定することで、スタイルの設定と参照が行えます。

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'背景色を変更
						objIE.Document.body.Style.backgroundColor = "Red"
		
						'スタイルの文字色を表示
						MessageBox.Show(objIE.Document.getElementById("styleid1").Style.Color)
		
						'スタイルの文字色を変更
						objIE.Document.getElementById("styleid1").Style.Color = "Red"
		
						'スタイルの文字フォントを変更
						objIE.Document.getElementById("styleid1").Style.fontstyle = "italic"
		
						'スタイルの文字サイズを変更
						objIE.Document.getElementById("styleid1").Style.fontsize = "xx-large"
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//背景色を変更
						objIE.Document.body.Style.backgroundColor = "Red";
	
						//スタイルの文字色を表示
						MessageBox.Show(objIE.Document.getElementById("styleid1").Style.Color);
	
						//スタイルの文字色を変更
						objIE.Document.getElementById("styleid1").Style.Color = "Red";
	
						//スタイルの文字フォントを変更
						objIE.Document.getElementById("styleid1").Style.fontstyle = "italic";
	
						//スタイルの文字サイズを変更
						objIE.Document.getElementById("styleid1").Style.fontsize = "xx-large";
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						
						'背景色を変更
						objIE.document.body.Style.backgroundColor = "Red"
					
						'スタイルの文字色を表示
						MsgBox (objIE.document.getElementById("styleid1").Style.Color)
					
						'スタイルの文字色を変更
						objIE.document.getElementById("styleid1").Style.Color = "Red"
					
						'スタイルの文字フォントを変更
						objIE.document.getElementById("styleid1").Style.FontStyle = "italic"
					
						'スタイルの文字サイズを変更
						objIE.document.getElementById("styleid1").Style.FontSize = "xx-large"