.NET TIPS

［Silverlight 2］HTML要素のDOMプロパティを取得／設定するには？［C#、VB］

デジタルアドバンテージ　一色 政彦
2009/09/17

　Silverlightでは、基になるWebページのHTML DOM（Document Object Model：Webブラウザが提供するオブジェクト指向のプログラミング・インターフェイスで、HTMLドキュメントを構造的に表現し、それを操作できるようにする）にアクセスして、HTML要素（＝DOMオブジェクト）が持つプロパティ（＝例えばvalueプロパティやinnerHTMLプロパティなど：JavaScriptにおけるDOMプロパティと同じもの）を利用することにより、さまざまな処理が可能になる。例えばSilverlightアプリケーションから、HTMLのテキストボックスの内容を取得／設定したり、HTML要素内のHTMLコードを書き換えたりできる。

　次のSilverlightアプリケーションでは、ボタンをクリックすると、HTMLのテキストボックス（＝type属性に「text」が設定された<input>要素）に対応するDOMオブジェクトのvalueプロパティから、入力されているテキストを読み出し（＝プロパティ値の取得）、<div>要素に対応するDOMオブジェクトのinnerHTMLプロパティにより、<div>要素内のHTMLコードを書き換える（＝プロパティ値の設定）。

ここのinnerHTML値が設定される
HTML要素のDOMプロパティの値を取得／設定するSilverlightサンプル・アプリケーション

■HTML要素のDOMプロパティを取得／設定する方法

　本稿では例として、次のようなHTML要素をあらかじめHTMLページ内に記述しているものとする。

<input id="targetTextBoxID" type="text"
  value="ここのvalue値が取得される"
/>
<div id="targetHtmlCodeID">
  <font color="#FF0000">ここのinnerHTML値が設定される</font>
</div>
プロパティ値の取得／設定する対象となるHTML要素のHTMLコード例

　ここでは、<input>要素（id属性値は「targetTextBoxID」）のvalueプロパティ値を取得し、<div>要素（id属性値は「targetHtmlCodeID」）のinnerHTMLプロパティ値を設定する。

　これには、HTML要素を表すHtmlElementクラス（System.Windows.Browser名前空間）のオブジェクトのGetPropertyメソッド／SetPropertyメソッドを使用する。

　HtmlElementオブジェクトを取得するには、ブラウザに表示されているHTMLドキュメントを表すHtmlDocumentクラス（System.Windows.Browser名前空間）のオブジェクトのGetElementByIdメソッドを呼び出せばよい。GetElementByIdメソッドは、引数としてHTML要素のid値（＝id属性の値。この例では「targetTextBoxID」や「targetHtmlCodeID」）を（文字列で）受け取り、戻り値として該当HTML要素を表すHtmlElementオブジェクトを返す。

　この際に必要となるHtmlDocumentオブジェクトは、次のプロパティから取得できる。

HtmlPage.Document

　このように、ブラウザのHTML DOMにアクセスするためのHtmlPageクラス（System.Windows.Browser名前空間）には、HTMLドキュメント（＝HtmlDocumentオブジェクト）を取得するための静的プロパティDocumentがある。

　先ほど示したGetPropertyメソッドは、引数としてプロパティ名を（文字列で）受け取り、戻り値としてそのプロパティの値を（Object型で）返す（※Object型のプロパティ値は、プロパティのデータ型に合わせて適切な型、例えば文字列（String）型やdouble／Double型、bool／Boolean型、DateTime型などにキャストする。データはSilverlightとHTML DOMを結ぶ相互運用層（＝HTMLブリッジ）で暗黙的にマーシャリングされる）。

　またSetPropertyメソッドは、第1引数としてプロパティ名を（文字列で）受け取り、第2引数としてそのプロパティの値を（任意の型で）受け取る（※第2引数のプロパティ値としては、プロパティのデータ型に合わせて適切な型のデータを指定する。データはSilverlightとHTML DOMを結ぶ相互運用層で暗黙的にマーシャリングされる）。戻り値はない。

　次のコードは、GetPropertyメソッド／SetPropertyメソッドを利用する例だ。

private void Button_Click(object sender, RoutedEventArgs e)
{
  HtmlElement htmlTextBox =
    HtmlPage.Document.GetElementById("targetTextBoxID");
  HtmlElement targetHtmlCode =
    HtmlPage.Document.GetElementById("targetHtmlCodeID");

  string textValue =
    (string)htmlTextBox.GetProperty("value");
  targetHtmlCode.SetProperty("innerHTML",
    "<font color=\"#0000FF\">" + textValue + "</font>");
}
Private Sub Button_Click(ByVal sender As System.Object, ByVal e As System.Windows.RoutedEventArgs)

  Dim htmlTextBox As HtmlElement = _
    HtmlPage.Document.GetElementById("targetTextBoxID")
  Dim targetHtmlCode As HtmlElement = _
    HtmlPage.Document.GetElementById("targetHtmlCodeID")

  Dim textValue As String = _
    CType(htmlTextBox.GetProperty("value"), String)
  targetHtmlCode.SetProperty("innerHTML", _
    "<font color=""#0000FF"">" & textValue & "</font>")
End Sub
HTML要素のDOMプロパティの値を取得／設定するサンプル・コード（上：C#、下：VB）

　このコードを実行すると、冒頭のサンプル・アプリケーションと同じ実行結果になる。

　※今回のサンプルはほとんどのブラウザで同じように動作するが、利用するDOMプロパティによっては、ブラウザ間で挙動が異なる場合もあるので注意してほしい。

　なお、HTML要素のDOMメソッドをSilverlightアプリケーションから呼び出すこともできる。その方法は「TIPS：［Silverlight 2］HTML要素のDOMメソッドを呼び出すには？」（後日公開予定）で説明する。End of Article

カテゴリ：Silverlight 2　処理対象：HTML DOM
使用ライブラリ：HtmlElementクラス（System.Windows.Browser名前空間）
使用ライブラリ：HtmlDocumentクラス（System.Windows.Browser名前空間）
関連TIPS：［Silverlight 2］HTML要素のDOMメソッドを呼び出すには？（後日公開予定）

この記事と関連性の高い別の.NET TIPS
［Silverlight 2］HTML要素のDOMメソッドを呼び出すには？
［Silverlight 2］HTML要素にフォーカスを設定するには？
［Silverlight 2］HTML要素のstyle属性のCSSプロパティを取得／設定するには？
［Silverlight 2］HTML要素の属性を設定／取得するには？
［Silverlight 2］HTML要素の属性を追加／削除するには？
［Silverlight 2］文字列として作成したJavaScriptコードを実行するには？
［Silverlight 2］HTML要素クリック時にSilverlightのメソッドを実行するには？
このリストは、（株）デジタルアドバンテージが開発した
自動関連記事探索システム Jigsaw（ジグソー） により自動抽出したものです。
generated by

「.NET TIPS」

TechTargetジャパン

Insider.NET フォーラム 新着記事

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

RSSフィード

＠IT 新着記事

キャリアアップ

- PR -
＠IT Sepcial
→ ＠IT Special ヘ

イベントカレンダー

PickUpイベント

- PR -
もっと見る
- PR -

お勧め求人情報

ホワイトペーパー（TechTargetジャパン）

＠IT Sepcial
→ ＠IT Special ヘ
ソリューションFLASH