WebBrowserコントロールによるHTML要素の指定

WebBrowserコントロールで表示しているWebページのテキストボックスやボタンなどのHTML要素に対して、 プログラムで値を設定したりクリックしたりすることができます。

これら操作を行うためには、まずは操作対象のHTML要素を探し出す必要があります。
htmlのコードに設定されているid属性やname属性等の情報を使って要素を特定する方法について説明します。

目次

ページ内のすべての要素にアクセス

name属性、id属性、インデックス番号を指定してページ内（document内）の全ての要素にアクセスする方法です。

※HTML5では「Document.all」は非推奨となっていますので、後述する「getElementById」「getElementsByName」などを使いましょう。

実装方法

Document.Allプロパティを使用します。
Allプロパティにid属性、インデックス番号を指定して要素を特定します。
※InternetExplorerではname属性を指定できましたが、WebBrowserでは使用できません。

'インデックス指定
WebBrowser1.Document.All(n).～　※先頭からn番目の要素にアクセスします。（nは0～の数値）

'id属性を指定
WebBrowser1.Document.All("id属性").～
WebBrowser1.Document.All.Item("id属性").～

'全要素の数
count = WebBrowser1.Document.All.Count

サンプル

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

						'サイトの全ての要素の内容を表示します。
						For i As Integer = 0 To WebBrowser1.Document.All.Count - 1
							Debug.WriteLine(WebBrowser1.Document.All(i).InnerTEXT)
							Debug.WriteLine(WebBrowser1.Document.All.Item(i).InnerTEXT)
						Next

						'id属性指定				
						WebBrowser1.Document.All("inputid2").InnerText = "テキスト２ all id"
						WebBrowser1.Document.All.Item("inputid3").InnerText = "テキスト３ all item id"
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//サイトの全ての要素の内容を表示します。
						for(int i = 0; i < webBrowser1.Document.All.Count; i++)
						{
							Console.WriteLine(webBrowser1.Document.All[i].InnerText);
						}
		
						//id属性指定
						webBrowser1.Document.All["inputid2"].InnerText = "テキスト２ all id";
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'サイトの全ての要素の内容を表示します。
						Dim i As Integer
						For i = 0 To WebBrowser1.document.all.Length - 1
							Debug.Print WebBrowser1.document.all(i).innerTEXT
							Debug.Print WebBrowser1.document.all.Item(i).innerTEXT
						Next

						'id属性指定
						WebBrowser1.document.all("inputid2").innerText = "テキスト２ all id"
						WebBrowser1.document.all.Item("inputid3").innerText = "テキスト３ all item id"

参考

HtmlDocument.All プロパティ

id属性を指定して要素にアクセス

id属性を指定して一致する要素にアクセスする方法です。

実装方法

Document.GetElementByIdメソッドを使用します。
GetElementByIdメソッドの引数にid属性を指定して要素を特定します。
特定した要素は「HTMLElement」またはnull（一致する要素がない場合）が取得されます。

WebBrowser1.Document.getElementById("id").～

サンプル

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

						'id指定
						WebBrowser1.Document.GetElementById("inputid2").InnerText = "テキスト２ all id"
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
		
						//id指定
						webBrowser1.Document.GetElementById("inputid2").InnerText = "テキスト２ all id";
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'id指定
						WebBrowser1.document.getElementById("inputid2").innerText = "テキスト２ all id"

参考

HtmlDocument.GetElementById(String) メソッド

name属性を指定して要素にアクセス

name属性を指定して一致する複数の要素にアクセスする方法です。

実装方法

Document.All.GetElementsByNameメソッドを使用します。
GetElementsByNameメソッドの引数にname属性を指定すると、一致する要素を全て抽出します。
name属性は同名が複数存在しますので、結果も複数取得されます。
メソッドの戻り値は「HtmlElementCollection」またはnull（一致する要素がない場合）が取得されます。

複数取得できた要素の中で何番目のものを使うかを、添え字で指定します。

Document.All.GetElementsByName("name属性")(n).～
Document.All.GetElementsByName("name属性").Item(n).～
※nは0～の数値。指定したname属性に一致した複数の要素のうち、何番目を使用するか。

サンプル

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

						'指定するname属性の１番目にアクセス
						WebBrowser1.Document.All.GetElementsByName("inputname")(1).InnerText = "テキスト２ all name 1"
		
						'指定するname属性の２番目にアクセス
						WebBrowser1.Document.All.GetElementsByName("inputname").Item(2).InnerText = "テキスト３ all item name 2"
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//指定するname属性の１番目にアクセス
						webBrowser1.Document.All.GetElementsByName("inputname")[1].InnerText = "テキスト２ all name 1";
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'指定するname属性の１番目にアクセス
						WebBrowser1.document.getElementsByName("inputname")(1).innerText = "テキスト２ all name 1"

						'指定するname属性の２番目にアクセス
						WebBrowser1.document.getElementsByName("inputname").Item(2).innerText = "テキスト３ all item name 2"

参考

HtmlElementCollection.GetElementsByName(String) メソッド

class属性を指定して要素にアクセス

class属性を指定して一致する複数の要素にアクセスする方法です。

実装方法

WebBrowserコントロールにはgetElementsByClassNameがありませんが、以下の処理で代用できます。
allプロパティで全エレメントを先頭から取得し、GetAttribute("className")でエレメントのクラス名を取得します。

WebBrowser1.Document.All(n).GetAttribute("className").～

サンプル

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

						'指定するclass属性の１番目にアクセス
						Dim count As Integer = 0
						For Each element As HtmlElement In WebBrowser1.Document.All
		
							If element.GetAttribute("className") = "inputclass" Then
								If count = 1 Then
									element.InnerText = "テキスト２ class 1"
									Exit For
								End If
								count += 1
							End If
		
						Next
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//指定するclass属性の１番目にアクセス
						int count = 0;
						foreach (HtmlElement element in webBrowser1.Document.All)
						{
							if(element.GetAttribute("className") == "inputclass")
							{
								if(count == 1)
								{
									element.InnerText = "テキスト２ class 1";
									break;
								}
							}
						}
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'指定するclass属性の１番目にアクセス
						Dim count As Integer
						Dim element As IHTMLElement
						count = 0
						For Each element In WebBrowser1.document.all
					
							If element.getAttribute("className") = "inputclass" Then
								If count = 1 Then
									element.innerText = "テキスト２ class 1"
									Exit For
								End If
								count = count + 1
							End If
					
						Next

参考

なし

タグ名を指定して要素にアクセス

タグ名を指定して一致する複数の要素にアクセスする方法です。

実装方法

Document.GetElementsByTagNameメソッドを使用します。
GetElementsByTagNameメソッドの引数にタグ名を指定して一致する要素を全て抽出します。
タグは同名が複数存在しますので、結果も複数取得されます。
特定した要素は「HtmlElementCollection」またはnull（一致する要素がない場合）が取得されます。

WebBrowser1.Document.GetElementsByTagName("tag")(n)～
※nは0～の数値

サンプル

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

						'inputタグの０番目にアクセス
						WebBrowser1.Document.GetElementsByTagName("input")(0).InnerText = "テキスト１ tag 0"
		
						'全inputタグのテキストを表示
						For Each element As HtmlElement In WebBrowser1.Document.GetElementsByTagName("input")
							Debug.WriteLine(element.Id)
						Next
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//inputタグの０番目にアクセス
						webBrowser1.Document.GetElementsByTagName("input")[0].InnerText = "テキスト１ tag 0";
	
						//全inputタグのテキストを表示
						foreach(HtmlElement element in webBrowser1.Document.GetElementsByTagName("input"))
						{
							Console.WriteLine(element.Id);
						}
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						'inputタグの０番目にアクセス
						WebBrowser1.document.getElementsByTagName("input")(0).innerText = "テキスト１ tag 0"

						'全inputタグのテキストを表示
						Dim element As IHTMLElement
						For Each element In WebBrowser1.document.getElementsByTagName("input")
							Debug.Print (element.ID)
						Next

参考

WebBrowserのGetElementsByTagNameについて

アンカー要素にアクセス

href属性を持つすべてのarea要素とアンカー要素にアクセスする方法です。

実装方法

Document.Linksプロパティを使用します。
Document.Linksプロパティで全てのアンカー要素が取得できます。インデックス番号を指定すると該当するアンカー要素を取得します。
特定した要素は「HtmlElementCollection」またはnull（一致する要素がない場合）が取得されます。

'アンカー要素を全て取得する
Webbrowser.Document.Links

'nに0～の数値を指定することで、該当するアンカー要素を取得する
Webbrowser.Document.Links(n)

'アンカー要素の数を取得する。
Webbrowser.Document.Links.Length

サンプル

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

						'サイトの全てのリンクの内容を表示します。
						For i As Integer = 0 To WebBrowser1.Document.Links.Count - 1
							Debug.WriteLine(WebBrowser1.Document.Links(i).GetAttribute("href")) 'hrefを表示
							Debug.WriteLine(WebBrowser1.Document.Links(i).InnerText)            'リンク名を表示
							If WebBrowser1.Document.Links(i).InnerText = "リンク１" Then
								'リンク１をクリック
								WebBrowser1.Document.Links(i).InvokeMember("Click")
								Exit For
							End If
						Next
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

						//サイトの全てのリンクの内容を表示します。
						for (int i = 0; i < webBrowser1.Document.Links.Count; i++)
						{
							Console.WriteLine(webBrowser1.Document.Links[i].GetAttribute("href"));       //hrefを表示
							Console.WriteLine(webBrowser1.Document.Links[i].GetAttribute("innerText"));  //リンク名を表示
							if (webBrowser1.Document.Links[i].GetAttribute("innerText") == "リンク１")
							{
								//リンク１をクリック
								webBrowser1.Document.Links[i].InvokeMember("click");
								break;
							}
						}
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						
						'サイトの全てのリンクの内容を表示します。
						Dim i As Integer
						For i = 0 To WebBrowser1.document.Links.Length - 1
							Debug.Print (WebBrowser1.document.Links(i).getAttribute("href"))    'hrefを表示
							Debug.Print (WebBrowser1.document.Links(i).innerText)               'リンク名を表示
							If WebBrowser1.document.Links(i).innerText = "リンク１" Then
								'リンク１をクリック
								WebBrowser1.document.Links(i).Click
								Exit For
							End If
						Next

参考

WebBrowserのDocument.Linksについて

form内の要素にアクセス

form要素内の全ての要素にアクセスする方法です。
form要素の指定は、name属性、id属性、インデックス番号が使用できます。
submit／resetの実行が行えます。

実装方法

Document.Formsプロパティを使用します。
formsプロパティにname属性、id属性、インデックス番号を指定してform要素を特定します。
特定したform内の全ての要素は「HtmlElementCollection」で取得できます。

'ページの先頭からn番目のform要素にアクセスします。（nは0～の数値）
WebBrowser1.Document.Forms(n)

'form要素に定義されているid／name属性を指定します。
WebBrowser1.Document.Forms("name属性またはid属性")

サンプル

						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						'name属性が"testform1"のformに対するアクセス

						'formをReset
						WebBrowser1.Document.Forms("testform1").InvokeMember("reset")
		
						'0番目（テキストボックス１）に値を設定
						WebBrowser1.Document.Forms("testform1").All(0).InnerText = "100"
		
						'name属性が"checkname"のチェックボックスをON
						WebBrowser1.Document.Forms("testform1").All.Item("checkname").SetAttribute("Checked", "True")
		
						'Submit
						WebBrowser1.Document.Forms("testform1").InvokeMember("submit")
					
						//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						//name属性が"testform1"のformに対するアクセス

						//formをReset
						webBrowser1.Document.Forms["testform1"].InvokeMember("reset");
	
						//0番目（テキストボックス１）に値を設定
						webBrowser1.Document.Forms["testform1"].All[0].InnerText = "100";
	
						//★ここでForm内に要素が１つしかみえなくなっている
						//name属性が"checkname"のチェックボックスをON。Allプロパティにname属性は指定できない。
						//webBrowser1.Document.Forms["testform1"].All.GetElementsByName("checkname")[0].SetAttribute("checked", "true");
	
						//Submit
						webBrowser1.Document.Forms["testform1"].InvokeMember("submit");
					
						'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
						'name属性が"testform1"のformに対するアクセス

						'formをReset
						WebBrowser1.document.forms("testform1").Reset
					
						'0番目（テキストボックス１）に値を設定  TABLEがヒットするため、このページでは0番目では指定できない
						'WebBrowser1.document.forms("testform1").all(0).innerText = "100"
					
						'name属性が"checkname"のチェックボックスをON
						WebBrowser1.document.forms("testform1").all.Item("checkname").Checked = True
					
						'Submit
						WebBrowser1.document.forms("testform1").submit

参考

HtmlDocument.Forms プロパティ

frame内の要素にアクセス

frame要素内の全ての要素にアクセスする方法です。
frame要素の指定は、name属性、id属性、インデックス番号が使用できます。

※HTML5ではframe要素は廃止されました。

実装方法

Document.Windows.Framesプロパティを使用します。
framesプロパティにname属性、id属性、インデックス番号を指定してframe要素を特定します。

特定したframeは「HtmlWindowCollection」で取得されます。

'インデックス指定
IE.Document.Frames(n).～　※ページの先頭からn番目のframe要素にアクセスします。（nは0～の数値）

'id属性／name属性の直接指定
IE.Document.Window.Frames("name属性またはid属性").～　※frame要素に定義されているid／name属性を指定します。

'frame内の要素の数
IE.Document.Window.Frames.Count

'frame内の要素にアクセスする場合
IE.Document.Window.Frames(n).Document.～

'複数frameで構成されている場合
IE.Document.Window.Frames(n).Frames(n).Document.～

サンプル

						'２番目のフレームの要素にアクセスします
						WebBrowser1.Document.Window.Frames(1).Document.All.Item("login").InnerText = "login"

						'NAME属性が"frame1"のフレームの要素にアクセスします
						WebBrowser1.Document.Window.Frames("frame1").Document.All.Item("login").InnerText = "login"

						'複数フレームで構成されている場合、framesを繰り返し指定します。
						WebBrowser1.Document.Window.Frames(0).Frames(0).Document.All.Item("login2").InnerText = "login"
					


					
						'２番目のフレームの要素にアクセスします
						WebBrowser1.Document.Frames(1).Document.All.Item("login").value = "login"

						'NAME属性が"frame1"のフレームの要素にアクセスします
						WebBrowser1.Document.Frames("frame1").Document.All.Item("login").value = "login"

						'複数フレームで構成されている場合、framesを繰り返し指定します。
						WebBrowser1.Document.Frames(0).Frames(0).Document.All.Item("login2").value = "login"

参考

HtmlWindow.Frames プロパティ

座標から要素にアクセス

ブラウザの左上を基準として、指定した座標にあるHTML要素を取得します。
マウスカーソル上にあるHTML要素を取得したい場合などに使えます。

実装方法

WebBrowser.GetElementFromPointメソッドを使います。
引数にブラウザ内の座標を指定することで、座標上にあるhtml要素を戻り値として取得します。

element = WebBrowser1.Document.GetElementFromPoint(座標値)

サンプル

							'マウスカーソルがある位置のHTML要素を取得する

							Dim elem As HtmlElement = Nothing
							
							Private Sub WebBrowser1_DocumentCompleted(ByVal sender As Object, ByVal e As WebBrowserDocumentCompletedEventArgs) Handles WebBrowser1.DocumentCompleted
								
								AddHandler WebBrowser1.Document.MouseOver, AddressOf Document_MouseOver
								
							End Sub
							
							Private Sub Document_MouseOver(sender As object, e As HtmlElementEventArgs)
							
								elem = WebBrowser1.Document.GetElementFromPoint(e.MousePosition)
							
							End Sub					
						
							//マウスカーソルがある位置のHTML要素を取得する
		
							//this.webBrowser1.DocumentCompleted += new WebBrowserDocumentCompletedEventHandler(this.webBrowser1_DocumentCompleted);
							//を実行しておくこと
							//formにラベルコントロールを貼り付けておくこと
							
							HtmlElement elem = null;
							private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
							{
								webBrowser1.Document.MouseOver += new HtmlElementEventHandler(Document_MouseOver);
							}
			
							void Document_MouseOver(object sender, HtmlElementEventArgs e)
							{
								elem = webBrowser1.Document.GetElementFromPoint(e.MousePosition);
			
								label1.Text = elem.TagName + "," + elem.Id + "," + elem.Name;
							}

参考

HtmlDocument.GetElementFromPoint