HTML要素の指定

テキストボックスやボタンなどのHTML要素に対して、プログラムで値を設定したりクリックしたりすることができます。
これら操作を行うためには、まずは操作対象のHTML要素を探し出す必要があります。
htmlのコードに設定されているid属性やname属性等の情報を使って要素を特定する方法について説明します。

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

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

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

InternetExplorer操作時


Document.Allプロパティを使用します。
Allプロパティにname属性、id属性、インデックス番号を指定して要素を特定します。
name属性を指定した場合は複数の要素が取得されるため、さらに要素を特定するためにインデックス番号も指定する必要があります。
'インデックス指定
IE.Document.All(n).～　※先頭からn番目の要素にアクセスします。（nは0～の数値）

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

'name属性を指定
IE.Document.All("name属性")(n).～　※指定したname属性に一致する複数要素のうちn番目にアクセスします。（nは0～の数値）
IE.Document.All.Item("name属性")(n).～

'全要素の数
count = IE.Document.All.Length

サンプル

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

							'サイトの全ての要素の内容を表示します。
							For i = 0 As Integer To objIE.Document.All.Length - 1
								Debug.WriteLine(objIE.Document.All(i).InnerTEXT)
								Debug.WriteLine(objIE.Document.All.Item(i).InnerTEXT)
							Next
				
							'id属性指定
							objIE.Document.all("inputid2").value = "テキスト２ all id"
							objIE.Document.all.item("inputid3").value = "テキスト３ all item id"
							
							'name属性指定
							objIE.Document.all("inputname")(1).value = "テキスト２ all name 1"
							objIE.Document.all.item("inputname")(2).value = "テキスト３ all item name"
						
							//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

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

							'サイトの全ての要素の内容を表示します。
							Dim i As Integer
							For i = 0 To objIE.Document.All.Length - 1
								Debug.Print objIE.Document.All(i).InnerTEXT
								Debug.Print objIE.Document.All.Item(i).InnerTEXT
							Next
			
							'id属性指定
							objIE.Document.all("inputid2").value = "テキスト２ all id"
							objIE.Document.all.item("inputid3").value = "テキスト３ all item id"
							
							'name属性指定
							objIE.Document.all("inputname")(1).value = "テキスト２ all name 1"
							objIE.Document.all.item("inputname")(2).value = "テキスト３ all item name"

参考

IHTMLDocument2::all Property

WebBrowserコントロール使用時


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 プロパティ

WebView2コントロール使用時


WebView2コントロールのDOM操作はJavaScriptを使います。

document.allプロパティを使用します。
allプロパティにname属性、id属性、インデックス番号を指定して要素を特定します。
name属性を指定した場合は複数の要素が取得されるため、さらに要素を特定するためにインデックス番号も指定する必要があります。

allプロパティは「HTMLAllCollection」を取得します。
allプロパティにname属性を指定すると、１件見つかった場合は「Element」が取得され、 複数見つかった場合は「HTMLCollection」が取得され、見つからない場合はnullが返却されます。 allプロパティにid属性やインデックスを指定すると「Element」が取得され、見つからない場合はnullが返却されます。

サンプル

							'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
							Private Async Sub Button1_Click(sender As Object, e As EventArgs) Handles btnAllProperty.Click
								Await WebView2.ExecuteScriptAsync("document.all('inputid2').value = 'テキスト２ all id';")
								Await WebView2.ExecuteScriptAsync("document.all.item('inputid3').value = 'テキスト３ all item id';")
							End Sub
						
							//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
							private async void btnAllProperty_Click(object sender, EventArgs e)
							{
								await webView2.ExecuteScriptAsync("document.all('inputid2').value = 'テキスト２ all id';");
								await webView2.ExecuteScriptAsync("document.all.item('inputid3').value = 'テキスト３ all item id';");
							}

参考

Document.all

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

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

InternetExplorer操作時


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

サンプル

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

参考

getElementById method

WebBrowserコントロール使用時


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) メソッド

WebView2コントロール使用時


WebView2コントロールのDOM操作はJavaScriptを使います。
document.getElementByIdメソッドを使用します。
getElementByIdメソッドの引数にid属性を指定して要素を特定します。
特定した要素は「Element」オブジェクトまたはnull（一致する要素がない場合）が取得されます。

document.getElementById("id").～

サンプル

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

							Private Async Sub btnGetID_Click(sender As Object, e As EventArgs) Handles btnGetID.Click
								Await WebView2.ExecuteScriptAsync("document.getElementById('inputid2').value = 'テキスト２ all id';")
							End Sub
						
							//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
			
							private async void btnGetId_Click(object sender, EventArgs e)
							{
								await webView2.ExecuteScriptAsync("document.getElementById('inputid2').value = 'テキスト２ all id';");
							}

参考

Document.getElementById()

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

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

InternetExplorer操作時


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

IE.Document.getElementsByName("name属性")(n).～
IE.Document.getElementsByName("name属性").item(n).～
※nは0～の数値

サンプル

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

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

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

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

参考

getElementsByName method

WebBrowserコントロール使用時


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

Document.All.GetElementsByName("name属性")(n).～
Document.All.GetElementsByName("name属性").Item(n).～
※nは0～の数値

サンプル

							'下記コードの動作確認はテストページ(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) メソッド

WebView2コントロール使用時


WebView2コントロールのDOM操作はJavaScriptを使います。
document.getElementsByNameメソッドを使用します。
getElementsByNameメソッドの引数にname属性を指定して要素を特定します。
name属性は同名が複数存在しますので、結果も複数取得されます。
特定した要素は「HTMLCollection/NodeList」またはnull（一致する要素がない場合）が取得されます。

C#書式

document.getElementsByName("name属性")[n].～

※nは0～の数値

サンプル

							Private Async Sub Button1_Click(sender As Object, e As EventArgs) Handles Button1.Click

								'Yahooの検索欄に文字を設定する
								Await WebView2.ExecuteScriptAsync($"document.getElementsByName('p')[0].value = 'プログラムでネットサーフィン！';")
										
							End Sub

							'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
							Private Async Sub btnGetName_Click(sender As Object, e As EventArgs) Handles btnGetName.Click

								Await WebView2.ExecuteScriptAsync("document.getElementsByName('inputname')[0].value = 'テキスト１ all name 0';")

    						End Sub
						
							async private void button1_Click(object sender, EventArgs e)
							{
								//Yahooの検索欄に文字を設定する
								await webView2.ExecuteScriptAsync("document.getElementsByName('p')[0].value = 'プログラムでネットサーフィン！';");
							}

							//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
							private async void btnGetName_Click(object sender, EventArgs e)
							{
								await webView2.ExecuteScriptAsync("document.getElementsByName('inputname')[1].value = 'テキスト２ all name 1';");
							}

参考

Document.getElementsByName()

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

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

InternetExplorer操作時


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

IE.GetElementsByClassName("name")(n).～
IE.GetElementsByClassName("name").item(n).～
※nは0～の数値

サンプル

							'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
				
							'指定するclass属性の１番目にアクセス
							objIE.Document.getElementsByClassName("inputclass")(1).value = "テキスト２ class 1"
						
							//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

							//指定するclass属性の１番目にアクセス
							objIE.Document.getElementsByClassName("inputclass")(1).value = "テキスト２ class 1";
						
							'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
							
							'指定するclass属性の１番目にアクセス
							objIE.document.getElementsByClassName("inputclass")(1).Value = "テキスト２ class 1"

参考

getElementsByClassName method

WebBrowserコントロール使用時


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

参考

なし

WebView2コントロール使用時


WebView2コントロールのDOM操作はJavaScriptを使います。
document.getElementsByClassNameメソッドを使用します。
getElementsByClassNameメソッドの引数にclass属性を指定して要素を特定します。
class属性は同名が複数存在しますので、結果も複数取得されます。
特定した要素は「HTMLCollection」またはnull（一致する要素がない場合）が取得されます。

document.getElementsByClassName('inputclass')[0].～

サンプル

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

							Private Async Sub btnGetClass_Click(sender As Object, e As EventArgs) Handles btnGetClass.Click

								'指定するclass属性の０番目にアクセス
								Await WebView2.ExecuteScriptAsync("document.getElementsByClassName('inputclass')[0].value = 'テキスト１ class 0';")
							
							End Sub
						
							//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で

							private async void btnClass_Click(object sender, EventArgs e)
							{
								//指定するclass属性の０番目にアクセス
								await webView2.ExecuteScriptAsync("document.getElementsByClassName('inputclass')[0].value = 'テキスト１ class 0';" );
							}

参考

Document.getElementsByClassName()

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

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

InternetExplorer操作時


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

IE.Document.getElementsByTagName("tag")(n)～
IE.Document.getElementsByTagName("tag").Item(n)～
※nは0～の数値

サンプル

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

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

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

							Dim element As IHTMLElement
    
							'inputタグの０番目にアクセス
							objIE.document.getElementsByTagName("input")(0).Value = "テキスト１ tag 0"
						
							'全inputタグのテキストを表示
							For Each element In objIE.document.getElementsByTagName("input")
								Debug.Print (element.ID)
							Next

参考

getElementsByTagName method

WebBrowserコントロール使用時


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について

WebView2コントロール使用時


WebView2コントロールのDOM操作はJavaScriptを使います。
document.getElementsByTagNameメソッドを使用します。
getElementsByTagNameメソッドの引数にタグ名を指定して一致する要素を全て抽出します。
タグは同名が複数存在しますので、結果も複数取得されます。
特定した要素は「HTMLCollection」またはnull（一致する要素がない場合）が取得されます。

document.getElementsByTagName('tag')[0].～

サンプル

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

							Private Async Sub btnGetTag_Click(sender As Object, e As EventArgs) Handles btnGetTag.Click

								'inputタグの０番目にアクセス
								Await WebView2.ExecuteScriptAsync("document.getElementsByTagName('input')[0].value = 'テキスト１ tag 0';")

							End Sub
						
							//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
							private async void btnTag_Click(object sender, EventArgs e)
							{
								//inputタグの０番目にアクセス
								await webView2.ExecuteScriptAsync("document.getElementsByTagName('input')[0].value = 'テキスト１ tag 0';");
							}

参考

Document.getElementsByTagName()

アンカー要素にアクセス

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

InternetExplorer操作時


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

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

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

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

サンプル

参考

IHTMLDocument2::links Property
IHTMLLinkElement interface

WebBrowserコントロール使用時


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について

WebView2コントロール使用時


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

'アンカー要素を全て取得する
document.links

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

'アンカー要素の数を取得する。
document.links.length

サンプル

							'下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
							Private Async Sub btnAnchr_Click(sender As Object, e As EventArgs) Handles btnAnchr.Click

								Dim js As New System.Text.StringBuilder
								js.AppendLine("var str = '';")
								js.AppendLine("for (let i = 0; i < document.links.length; i++)")
								js.AppendLine("{")
								js.AppendLine("    str += document.links[i].href + '\n';")
								js.AppendLine("    str += document.links[i].innerText + '\n';")
								js.AppendLine("    if(document.links[i].innerText == 'リンク１') document.links[i].click();")
								js.AppendLine("}")
								js.AppendLine("alert(str);")
				
								Await WebView2.ExecuteScriptAsync(js.ToString())

							End Sub
						
							//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
							private async void btnAnchr_Click(object sender, EventArgs e)
							{
								System.Text.StringBuilder js = new System.Text.StringBuilder();
								js.AppendLine("var str = '';");
								js.AppendLine("for (let i = 0; i < document.links.length; i++)");
								js.AppendLine("{");
								js.AppendLine("    str += document.links[i].href + '\\n';");
								js.AppendLine("    str += document.links[i].innerText + '\\n';");
								js.AppendLine("    if(document.links[i].innerText == 'リンク１') document.links[i].click();");
								js.AppendLine("}");
								js.AppendLine("alert(str);");

								await webView2.ExecuteScriptAsync(js.ToString());
							}

参考

document.links

form内の要素にアクセス

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

InternetExplorer操作時


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

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

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

サンプル

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

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

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

							'formをReset
							objIE.document.forms("testform1").Reset
						
							'0番目（テキストボックス１）に値を設定
							objIE.document.forms("testform1").Item(0).Value = 100
						
							'name属性が"checkname"のチェックボックスをON
							objIE.document.forms("testform1").Item("checkname").Checked = True
						
							'Submit
							objIE.document.forms("testform1").submit

参考

IHTMLDocument2::forms Property
IHTMLFormElement interface

WebBrowserコントロール使用時


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 プロパティ

WebView2コントロール使用時


WebView2コントロールのDOM操作はJavaScriptを使います。
documentのformsプロパティを使用します。
formsプロパティにname属性、id属性、インデックス番号を指定してform要素を特定します。
特定したform内の全ての要素は「HtmlCollection」で取得できます。

'ページの先頭からn番目のform要素にアクセスします。（nは0～の数値）
document.forms[index]

'form要素に定義されているid／name属性を指定します。
document.forms["name属性またはid属性"]

サンプル

							Private Async Sub btnForm_Click(sender As Object, e As EventArgs) Handles btnForm.Click

								Dim js As New System.Text.StringBuilder
								js.AppendLine("document.forms['testform1'].reset();")
								js.AppendLine("document.forms['testform1'][0].value = 100;")
								js.AppendLine("document.forms['testform1']['checkname'].checked = true;")
								js.AppendLine("document.forms['testform1'].submit();")

								Await WebView2.ExecuteScriptAsync(js.ToString())

							End Sub
						
							private async void btnForm_Click(object sender, EventArgs e)
							{
								System.Text.StringBuilder js = new System.Text.StringBuilder();
								js.AppendLine("document.forms['testform1'].reset();");
								js.AppendLine("document.forms['testform1'][0].value = 100;");
								js.AppendLine("document.forms['testform1']['checkname'].checked = true;");
								js.AppendLine("document.forms['testform1'].submit();");
			
								await webView2.ExecuteScriptAsync(js.ToString());
							}

参考

Document.forms
HTMLFormElement

frame内の要素にアクセス

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

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

InternetExplorer操作時


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

特定したframe内の全要素は「IHTMLFramesCollection2」で取得できます。

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

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

'frame内の要素の数
IE.Document.Frames.length

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

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

サンプル

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

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

							'複数フレームで構成されている場合、framesを繰り返し指定します。
							objIE.Document.Frames(0).Frames(0).Document.All.Item("login2").value = "login"
						
							//２番目のフレームの要素にアクセスします
							objIE.Document.Frames[1].Document.All.Item["login"].value = "login";

							//NAME属性が"frame1"のフレームの要素にアクセスします
							objIE.Document.Frames["frame1"].Document.All.Item["login"].value = "login";

							//複数フレームで構成されている場合、framesを繰り返し指定します。
							objIE.Document.Frames[0].Frames[0].Document.All.Item["login2"].value = "login";
						
							'２番目のフレームの要素にアクセスします
							objIE.Document.Frames(1).Document.All.Item("login").value = "login"

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

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

参考

IHTMLDocument2::frames Property
IHTMLFramesCollection2 interface

WebBrowserコントロール使用時


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 プロパティ

CSSセレクタによる要素へのアクセス（WebView2）

WebView2での要素の操作はJavaScriptを使用するので、querySelector／querySelectorAllが使えます。
CSSセレクタを指定することでマッチした要素が取得できます。

サンプル

WebView2のExecuteScriptAsyncメソッドに以下のコードを渡して実行します。
※WebView2でのJavaScript実行についてはこちらを参照。 

						//id指定
						document.querySelector('#inputid2').value = "bbbb";
	
						//class指定
						document.querySelector('.inputclass').value = "aaaa";          //最初に見つかった要素
	
						//class指定
						document.querySelectorAll('.inputclass')[4].click();           //見つかった要素の番号を指定
	
						//type指定
						document.querySelectorAll('input[type="text"]')[2].value = "cccc";

JavaScriptのコードが期待通りマッチするか確認するには、ブラウザの開発者ツールを使うのが簡単です。
例えばChromeのデベロッパーツールだと、ConsoleでJavaScriptのコードを入力して実行できます。
下記はセレクターのJavaScriptを実行して、期待通りに結果が得られていることが確認できます。

CSSセレクタのデバッグ

参考

セレクターを使用した DOM 要素の特定

座標から要素にアクセス

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

WebBrowserコントロール使用時


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

WebView2コントロール使用時


WebView2コントロールのDOM操作はJavaScriptを使います。
document.elementFromPointメソッドを使用します。
//xとyで指定した座標に位置する要素のオブジェクトが取得されます。
element = document.elementFromPoint(x,y);

サンプル

マウスクリックした座標にある要素のタグ名を取得して、フォーム上のラベルに表示します。 
								Private Async Sub btnPoint_Click(sender As Object, e As EventArgs) Handles btnPoint.Click

									Dim js As New System.Text.StringBuilder
									js.AppendLine("var str = '';")
									js.AppendLine("document.addEventListener('click', (event) => {")
									js.AppendLine("const element = document.elementFromPoint(event.x, event.y);")
									js.AppendLine("str = element.tagName;")
									js.AppendLine("window.chrome.webview.postMessage(str);")
									js.AppendLine("});")
					
									Await WebView2.ExecuteScriptAsync(js.ToString())

								End Sub
								
								Private Sub MessageReceived(sender As Object, args As Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs) Handles WebView2.WebMessageReceived

									Label1.Text = args.TryGetWebMessageAsString()

								End Sub

								'JavaScriptからの値の取得方法についてはhttps://web.biz-prog.net/readme/webview_new3.htmlを参照
							
								private async void btnPoint_Click(object sender, EventArgs e)
								{
									System.Text.StringBuilder js = new System.Text.StringBuilder();
									js.AppendLine("var str = '';");
									js.AppendLine("document.addEventListener('click', (event) => {");
									js.AppendLine("const element = document.elementFromPoint(event.x, event.y);");
									js.AppendLine("str = element.tagName;");
									js.AppendLine("window.chrome.webview.postMessage(str);");
									js.AppendLine("});");
				
									await webView2.ExecuteScriptAsync(js.ToString());
								}
				
								private void MessageReceived(object sender, Microsoft.Web.WebView2.Core.CoreWebView2WebMessageReceivedEventArgs args)
								{
									label1.Text = args.TryGetWebMessageAsString();
								}

								//JavaScriptからの値の取得方法についてはhttps://web.biz-prog.net/readme/webview_new3.htmlを参照

参考

document.elementFromPoint