InternetExplorerによるHTML要素の指定

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

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

ページ内のすべての要素にアクセス
id属性を指定して要素にアクセス
name属性を指定して要素にアクセス
class属性を指定して要素にアクセス
タグ名を指定して要素にアクセス
アンカー要素にアクセス
form内の要素にアクセス
frame内の要素にアクセス
座標から要素にアクセス

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

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

実装方法

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

サンプル

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

//下記コードの動作確認はテストページ(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";

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

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

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

実装方法

document.getElementByIdメソッドを使用します。
getElementByIdメソッドの引数にid属性を指定して要素を特定します。
メソッドの戻り値は「IHTMLElement」またはnull（一致する要素がない場合）となります。

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

サンプル

1

2

3

4

5

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

参考

getElementById method

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

実装方法

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

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

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

サンプル

1

2

3

4

5

6

7

8

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

1

2

3

4

5

6

7

8

//下記コードの動作確認はテストページ(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";

1

2

3

4

5

6

7

8

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

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

実装方法

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

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

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

サンプル

1

2

3

4

5

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

参考

getElementsByClassName method

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

実装方法

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

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

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

サンプル

1

2

3

4

5

6

7

8

9

10

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

1

2

3

4

5

6

7

8

9

10

11

//下記コードの動作確認はテストページ(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);
}

1

2

3

4

5

6

7

8

9

10

11

12

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

html内の全てのリンク（アンカー要素<a>とarea要素<area>）オブジェクトにアクセスする方法です。

実装方法

Document.Linksプロパティを使用します。
html内のすべてのリンクがコレクション型IHTMLElementCollectionで取得できます。
要素が見つからなかった場合はnullが返却されます。

コレクション型なので、インデックス番号を指定してアンカー要素を取得できますし、
Lengthプロパティでリンク数を取得できます。

リンクオブジェクトは、hrefプロパティ（href属性の値にアクセス）やinnerTextプロパティ（<a>タグ中の文字列にアクセス）が使えますので、
コレクションをループしてこれらプロパティ値と一致するか比較すれば、
クリックしたいリンクオブジェクト探し出すような使い方ができます。

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

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

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

サンプル

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

//下記コードの動作確認はテストページ(https://web.biz-prog.net/test/testpage.html)で
 
//サイトの全てのリンクの内容を表示します。
for (int i = 0; i < objIE.Document.Links.Length; i++) {
 
    Console.WriteLine(objIE.Document.Links[i].Href);       //hrefを表示
    Console.WriteLine(objIE.Document.Links[i].InnerTEXT);  //リンク名を表示
 
    if (objIE.Document.Links[i].InnerTEXT == "リンク１")
    {
        //リンク１をクリック
        objIE.Document.Links[i].Click();
        break;
    }
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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

参考

IHTMLDocument2::links Property
IHTMLLinkElement interface

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

実装方法

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属性を指定します。

サンプル

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

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

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

実装方法

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.～

サンプル

1

2

3

4

5

6

7

8

9

'２番目のフレームの要素にアクセスします
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"

1

2

3

4

5

6

7

8

9

//２番目のフレームの要素にアクセスします
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";

1

2

3

4

5

6

7

8

9

'２番目のフレームの要素にアクセスします
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

InternetExplorerによるHTML要素の指定

目次

実装方法

サンプル

参考

実装方法

サンプル

参考

実装方法

サンプル

参考

実装方法

サンプル

参考

実装方法

サンプル

参考

実装方法

サンプル

参考

実装方法

サンプル

参考

実装方法

サンプル

参考