WebBrowserコントロールによるHTML要素の操作

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

目次

クリック

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

実装方法

操作したいHTML要素を指定してInvokeMember("Click")メソッドをコールします。
そうすればマウスでクリックしたときと同様の動作が行われます。
※WebBrowserコントロールでは、HTML要素に対してClickメソッドを直接実行することができませんので、HtmlElementのInvokeMemberメソッドに対して"Click"を渡してやることで、クリックの実行が行えます。

サンプル

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

						'ボタンをクリック
						WebBrowser1.Document.GetElementById("buttonid1").InvokeMember("Click")

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

						'チェックボックスをクリック
						WebBrowser1.Document.All.GetElementsByName("checkname")(0).InvokeMember("Click")

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

						//ボタンをクリック
						webBrowser1.Document.GetElementById("buttonid1").InvokeMember("Click");

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

						//チェックボックスをクリック
						webBrowser1.Document.All.GetElementsByName("checkname")[0].InvokeMember("Click");

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

						'ボタンをクリック
						WebBrowser1.document.getElementById("buttonid1").Click
					
						'ラジオボタンの２つ目をクリック
						WebBrowser1.document.getElementsByName("radioname")(1).Click

						'チェックボックスをクリック
						WebBrowser1.document.getElementsByName("checkname")(0).Click
					
						'リンクをクリック
						Dim i As Integer
						For i = 0 To WebBrowser1.document.Links.Length - 1
							If WebBrowser1.document.Links(i).getAttribute("innerText") = "リンク１" Then
								WebBrowser1.document.Links(i).Click
								Exit For
							End If
						Next

選択

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

実装方法

後述するSetAttributeメソッドを使って属性に値を設定します。
ラジオボタン／チェックボックスの場合、Checked属性に"True"または"空文字"を設定します。（空文字がFalseの意味合いになります。）
セレクトボックスの場合、SelectedIndex属性やSelected属性に設定します。

サンプル

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

						'ラジオボタンの２つ目を選択
						WebBrowser1.Document.All.GetElementsByName("radioname")(1).SetAttribute("Checked", "True")
						WebBrowser1.Document.All.GetElementsByName("radioname")(1).SetAttribute("Checked", "")    '解除は空文字

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

						//ラジオボタンの２つ目を選択
						webBrowser1.Document.All.GetElementsByName("radioname")[1].SetAttribute("Checked", "True");
						webBrowser1.Document.All.GetElementsByName("radioname")[1].SetAttribute("Checked", "");    //解除は空文字

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

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

入力

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

実装方法

操作したいHTML要素を指定してinnerTextプロパティに値を設定します。
またはSetAttributeメソッドを使って、Value属性に値を設定します。

サンプル

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

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

値の参照

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

実装方法

HTML要素を指定し、GetAttributeメソッドでValue属性の値を参照します。

サンプル

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

						'テキストボックスを参照
						MsgBox (WebBrowser1.document.getElementById("inputid2").getAttribute("value"))
					
						'ラジオボタンを参照
						MsgBox (WebBrowser1.document.getElementsByName("radioname")(1).getAttribute("Checked"))
					
						'チェックボックスを参照
						MsgBox (WebBrowser1.document.getElementsByName("checkname")(0).getAttribute("Checked"))
					
						'セレクトボックスを参照
						MsgBox (WebBrowser1.document.getElementsByName("selectname")(0).all(2).getAttribute("Selected"))
						MsgBox (WebBrowser1.document.getElementsByName("selectname")(0).getAttribute("SelectedIndex"))

Reset／Submit

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

実装方法

form要素のInvokeMemberメソッドを使用してSubmit／Resetを実行します。

InvokeMember("メソッド名")

サンプル

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

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

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

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

属性の参照・設定

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

実装方法

getAttrbute／setAttributeメソッドで参照・設定が行えます。

サンプル

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

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

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

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

参考

HtmlElement.GetAttribute(String) メソッド
HtmlElement.SetAttribute(String, String) メソッド

スタイルの参照・設定

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

実装方法

Styleプロパティで文字で参照・設定が行えます。

サンプル

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

						'文字のスタイル内容を表示
						MessageBox.Show(WebBrowser1.Document.GetElementById("styleid1").Style)
		
						'文字のスタイルを変更
						WebBrowser1.Document.GetElementById("styleid1").Style = "font-size: xx-large; font-style: italic; color: red;"
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//文字のスタイル内容を表示
						MessageBox.Show(webBrowser1.Document.GetElementById("styleid1").Style);
	
						//文字のスタイルを変更
						webBrowser1.Document.GetElementById("styleid1").Style = "font-size: xx-large; font-style: italic; color: red;";
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'背景色を変更
						WebBrowser1.document.body.Style.backgroundColor = "Red"
		
						'スタイルの文字色を表示
						MsgBox(WebBrowser1.document.getElementById("styleid1").Style.Color)
		
						'スタイルの文字色を変更
						WebBrowser1.document.getElementById("styleid1").Style.Color = "Red"
		
						'スタイルの文字フォントを変更
						WebBrowser1.document.getElementById("styleid1").Style.fontstyle = "italic"
		
						'スタイルの文字サイズを変更
						WebBrowser1.document.getElementById("styleid1").Style.fontsize = "xx-large"

参考

HtmlElement.Style プロパティ
要素のスタイルを変更する