Document.getElementById メソッド

本ページには広告が含まれています。

1 getElementByIdとは
2 使い方
3 プログラム実行例

id属性が指定された文字列に一致する要素を表すElement オブジェクト (DOM)を返します。

構文

Element = Document.getElementById( id )

引数

id （String）必須: 探す要素のid

戻り値: 指定されたid属性を持つHTML要素を表すElement オブジェクト (DOM)、文書内に一致する要素がなければNULLを返します。

getElementByIdとは

getElementById メソッドは、英語の意味を直訳するとget（取得する）＋Element（要素）＋ById（id属性によって）となり、これはid属性によって要素を取得するという意味になります。このメソッドは、引数に指定されたidに一致するDOM要素を取得します。

同じ名前のid属性はHTML内に基本的に一つしかないので、getElementsByIdと複数形にはならず単数形のgetElementByIdとなります。

id属性からDOM要素を取得するメソッドはquerySelector メソッドとgetElementById メソッドがありますが、要素の取得は汎用性の高いquerySelector メソッドよりもid属性に特化しているgetElementById メソッドの方が速いとされています。しかし最近のブラウザの処理速度は向上していてquerySelector メソッドもあまり変わらない速度で取得することができるため、どちらを使うかはケースバイケースです。

また、getElementById メソッドは大文字・小文字を含め完全に一致する要素を取得するため、部分一致などの曖昧検索を行いたい場合はDocument.getElementById メソッドもしくはDocument.querySelectorAll メソッドを使います。

使い方

指定したid属性を持つタグのテキストを取得

id属性にcontentを持つ要素のテキストを取得します。

<div id="content">こんにちは！</div>

DIM Document = IE.Document
DIM Element = Document.getElementById("content")

PRINT Element.innerText

結果

こんにちは！

指定したid属性を持つタグのテキストを書き換える

id属性にcontentを持つ要素のテキストをおはよう！に書き換えます。

<div id="content">こんにちは！</div>

DIM Document = IE.Document
DIM Element = Document.getElementById("content")

Element.innerText = "おはよう！"

結果

<div id="content">おはよう！</div>

指定したid属性を持つタグに属性を追加

id属性にcontentを持つ要素にname属性を追加し、その値としてgreetingを設定します。

<div id="content">こんにちは！</div>

DIM Document = IE.Document
DIM Element = Document.getElementById("content")

Element.setAttribute("name", "greeting")

結果

<div id="content" name="greeting">こんにちは！</div>

指定したid属性を持つ要素をクリック

指定したid属性を持つ要素をクリックします。

<input type="button" value="ボタン" id="send" />

DIM Document = IE.Document
DIM Element = Document.getElementById("send")
Element.click

同じ名前のid属性を持つ要素が複数ある場合

同じ名前のid属性は一つのHTMLファイルに一つしか使用できませんが、名前が重複していてもエラーとはなりません。

例えば以下のように名前がcontentのid属性が複数存在する場合、Element.getElementById (DOM)で取得できる要素は1つ目の要素のみです。

<div id="content">おはよう！</div>
<div id="content">こんにちは！</div>

DIM Document = IE.Document
DIM Element = Document.getElementById("content")
PRINT Element.innerText

結果

おはよう！

2つ目以降の要素を取得したい場合は、Document.querySelectorAll メソッドを使うことで取得することができます。

<div id="content">おはよう！</div>
<div id="content">こんにちは！</div>
<div id="content">こんばんは！</div>

DIM Document = IE.Document
DIM NodeList = Document.querySelectorAll("#content")

PRINT NodeList.length
PRINT "-----"
PRINT NodeList.item(0).innerText
PRINT NodeList.item(1).innerText
PRINT NodeList.item(2).innerText

結果

3
-----
おはよう！
こんにちは！
こんばんは！

入れ子要素の取得

Document.getElementById メソッドは指定されたid属性を持つ要素を取得することはできますが、その要素の子要素に直接アクセスすることはできません。入れ子になっている要素を取得するには、まずDocument.getElementById メソッドで親要素を取得し、取得した親要素に対してElement.getElementById (DOM)やElement.getElementById (DOM)などのメソッドを使い取得したい要素を絞っていきます。

<div id="curry">
	<div>カレーの材料</div>
	<ul>
		<li>牛肉</li>
		<li>じゃがいも</li>
		<li>玉ねぎ</li>
		<li>にんじん</li>
		<li>カレールウ</li>
		<li>水</li>
		<li>油</li>
	</ul>
</div>
<div id="hamburg">
	<div>ハンバーグの材料</div>
	<ul>
		<li>合挽き肉</li>
		<li>たまねぎ</li>
		<li>パン粉</li>
		<li>牛乳</li>
		<li>卵</li>
		<li>塩、胡椒</li>
		<li>水</li>
		<li>ケチャップ</li>
		<li>ウスターソース</li>
	</ul>
</div>

以下はまずHTML全体からid属性がcurryの要素を取得しElementに代入します。取得したElementのHTMLはPRINT Element.outerHTMLで確認することができます。その後さらにliのタグに一致する要素のみを取得しElementsに代入します。

DIM Document = IE.Document
DIM Element = Document.getElementById("curry")
Elements = Element.getElementsByTagName("li")

FOR Element IN Elements
	PRINT Element.innerText
NEXT

結果

牛肉
じゃがいも
玉ねぎ
にんじん
カレールウ
水
油

仮にDocument.getElementById メソッドを使わずDocument.getElementById メソッドでのみ要素を取得するとHTML内にあるすべてのliタグを取得することになります。

DIM Document = IE.Document
DIM Elements = Document.getElementsByTagName("li")

FOR Element IN Elements
	PRINT Element.innerText
NEXT

結果

牛肉
じゃがいも
玉ねぎ
にんじん
カレールウ
水
油
合挽き肉
たまねぎ
パン粉
牛乳
卵
塩、胡椒
水
ケチャップ
ウスターソース

要素の有無をチェック

Document.getElementById メソッドは要素が見つからない場合NULLを返すので、戻り値がNULLかどうかで要素が見つかったかどうかを判断できます。

以下はid属性がcontentの要素を探し、取得できた場合は要素が見つかりました、取得できなかった場合は要素が見つかりませんでしたと出力します。

DIM Document = IE.Document
DIM Element = Document.getElementById("content")

IFB Element <> NULL THEN
	PRINT "要素が見つかりました"
ELSE
	PRINT "要素が見つかりませんでした"
ENDIF

プログラム実行例

Yahoo!ファイナンスから米ドル・ユーロ・豪ドルのレートを取得

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.Visible = TRUE
IE.Navigate("https://info.finance.yahoo.co.jp/fx/")
BusyWait(IE)

// ループを抜ける用のフラグ
PUBLIC flg = FALSE

// ESCキーを入力でloopBreak関数を実行
SETHOTKEY(VK_ESC, , "loopBreak")

REPEAT
	usd = IE.document.getElementById("USDJPY_top_bid").innerText
	eur = IE.document.getElementById("EURJPY_top_bid").innerText
	aud = IE.document.getElementById("AUDJPY_top_bid").innerText
	msg = "米ドル/円<#TAB>" + usd + "<#CR>" + _
			"ユーロ/円<#TAB>" + eur + "<#CR>" + _
			"豪ドル/円<#TAB>" + aud + "<#CR>" + _
			"ESCで終了"
	FUKIDASI(msg)
	SLEEP(0.01)
UNTIL flg = TRUE

IE.Quit

PROCEDURE loopBreak()
	flg = TRUE
FEND

使用関数

Yahoo! JAPANトップページのメニューを取得

IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.Visible = TRUE
IE.Navigate("http://yahoo.co.jp")
BusyWait(IE)

DIM element = IE.document.getElementById("ToolList")
DIM elements = element.getElementsByTagName("li")

FOR element IN elements
	PRINT element.textContent
NEXT

IE.Quit

[syntaxHighlight language="HTML"]

ショッピング
PayPayモール
ヤフオク!
PayPayフリマ
ZOZOTOWN
LOHACO
トラベル
一休.com
一休.comレストラン
ニュース
天気・災害
スポーツナビ
ファイナンス
テレビ
映画
GYAO!
ゲーム
Yahoo!モバゲー
ebookjapan
占い
地図
路線情報
Retty
クラシル
不動産
自動車
TRILL
パートナー

[/syntaxHighlight]

結果

ショッピング
PayPayモール
ヤフオク!
PayPayフリマ
ZOZOTOWN
LOHACO
トラベル
一休.com
一休.comレストラン
ニュース
天気・災害
スポーツナビ
ファイナンス
テレビ
映画
GYAO!
ゲーム
Yahoo!モバゲー
ebookjapan
占い
地図
路線情報
Retty
クラシル
不動産
自動車
TRILL
パートナー

使用関数

気象庁のホームページから一月分の気温を取得しExcelでグラフを作成

CONST xlUp = -4162
CONST xlLineMarkers = 65

DIM year = 2020
DIM month = 8

DIM IE = IEBoot()
IE.Navigate("https://www.data.jma.go.jp/obd/stats/etrn/view/daily_s1.php?prec_no=14&block_no=47412&year=" + year + "&month=" + month + "&day=&view=p1")
BusyWait(IE)

DIM array[-1][-1]
DIM element = IE.document.getElementById("tablefix1")
getTableData(element, array)

IE.Quit

DIM Excel = XLOPEN()
DIM SheetName = Excel.ActiveSheet.Name

XLSETDATA(Excel, array, "A1")

DIM row = Excel.Cells(Excel.Rows.Count, 1).End(xlUp).Row
DIM Charts = Excel.Charts.Add

WITH Charts
	.ChartType = xlLineMarkers
	.SeriesCollection.NewSeries
	.HasTitle = TRUE
	.ChartTitle.Text = "札幌 " + year + "年" + month + "月気温"

	WITH .FullSeriesCollection(1)
		.XValues = "=Sheet1!$A$5:$A$35"
		.Name = "=<#DBL>最高気温<#DBL>"
		.Values = "=Sheet1!$H$5:$H$35"
		WITH .Format
			.Fill.ForeColor.RGB = 255
			.Line.ForeColor.RGB = 255
		ENDWITH
	ENDWITH

	WITH .FullSeriesCollection(2)
		.XValues = "=Sheet1!$A$5:$A$35"
		.Name = "=<#DBL>最高気温<#DBL>"
		.Values = "=Sheet1!$I$5:$I$35"
		WITH .Format
			.Fill.ForeColor.RGB = 16711680
			.Line.ForeColor.RGB = 16711680
		ENDWITH
	ENDWITH
ENDWITH

CONST xlUp = -4162
CONST xlLineMarkers = 65

DIM year = 2020
DIM month = 8

DIM IE = IEBoot()
IE.Navigate("https://www.data.jma.go.jp/obd/stats/etrn/view/daily_s1.php?prec_no=14&block_no=47412&year=" + year + "&month=" + month + "&day=&view=p1")
BusyWait(IE)

DIM array[-1][-1]
DIM element = IE.document.getElementById("tablefix1")
getTableData(element, array)

IE.Quit

DIM Excel = XLOPEN()
DIM SheetName = Excel.ActiveSheet.Name

XLSETDATA(Excel, array, "A1")

DIM row = Excel.Cells(Excel.Rows.Count, 1).End(xlUp).Row
DIM Charts = Excel.Charts.Add

WITH Charts
	.ChartType = xlLineMarkers
	.SeriesCollection.NewSeries
	.HasTitle = TRUE
	.ChartTitle.Text = "札幌 " + year + "年" + month + "月気温"

WITH .FullSeriesCollection(1)
		.XValues = "=Sheet1!$A$5:$A$35"
		.Name = "=<#DBL>最高気温<#DBL>"
		.Values = "=Sheet1!$H$5:$H$35"
		WITH .Format
			.Fill.ForeColor.RGB = 255
			.Line.ForeColor.RGB = 255
		ENDWITH
	ENDWITH

WITH .FullSeriesCollection(2)
		.XValues = "=Sheet1!$A$5:$A$35"
		.Name = "=<#DBL>最高気温<#DBL>"
		.Values = "=Sheet1!$I$5:$I$35"
		WITH .Format
			.Fill.ForeColor.RGB = 16711680
			.Line.ForeColor.RGB = 16711680
		ENDWITH
	ENDWITH
ENDWITH

結果

使用関数

歌ネットから歌詞を取得してテキストファイルに保存

CONST ssfDesktop = 0

DIM IE = CREATEOLEOBJ("InternetExplorer.Application")
IE.Visible = TRUE
IE.Navigate("https://www.uta-net.com/song/280568/")
BusyWait(IE)

DIM element, elements, name, lyrics

element = IE.document.getElementById("view_kashi")
elements = element.getElementsByClassName("title")
name = TRIM(elements.Item(0).innerText)

element = IE.document.getElementById("kashi_area")
lyrics = element.innerText

IE.Quit

DIM Shell = CREATEOLEOBJ("Shell.Application")
DIM Folder = Shell.NameSpace(ssfDesktop)
DIM path = Folder.Self.Path
DIM FSO = CREATEOLEOBJ("Scripting.FileSystemObject")
path = uniqueFilename(FSO.BuildPath(path, name + ".txt"))

DIM FID = FOPEN(path, F_READ OR F_WRITE)
FPUT(FID, lyrics)
FCLOSE(FID)

使用関数

Documentドキュメント.getElementById メソッド

getElementByIdとは

使い方

指定したid属性を持つタグのテキストを取得

指定したid属性を持つタグのテキストを書き換える

指定したid属性を持つタグに属性を追加

指定したid属性を持つ要素をクリック

同じ名前のid属性を持つ要素が複数ある場合

入れ子要素の取得

要素の有無をチェック

プログラム実行例

Yahoo!ファイナンスから米ドル・ユーロ・豪ドルのレートを取得

Yahoo! JAPANトップページのメニューを取得

気象庁のホームページから一月分の気温を取得しExcelでグラフを作成

歌ネットから歌詞を取得してテキストファイルに保存

検索フォーム

設定

最近の投稿・更新

関連記事

タグ一覧

このページを共有する

寄付・支援