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

「.NET TIPS」


Insider.NET フォーラム 新着記事
  • 第2回　簡潔なコーディングのために （2017/7/26）
    　ラムダ式で記述できるメンバの増加、throw式、out変数、タプルなど、C# 7には以前よりもコードを簡潔に記述できるような機能が導入されている
  • 第1回　Visual Studio Codeデバッグの基礎知識 （2017/7/21）
    　Node.jsプログラムをデバッグしながら、Visual Studio Codeに統合されているデバッグ機能の基本の「キ」をマスターしよう
  • 第1回　明瞭なコーディングのために （2017/7/19）
    　C# 7で追加された新機能の中から、「数値リテラル構文の改善」と「ローカル関数」を紹介する。これらは分かりやすいコードを記述するのに使える
  • Presentation Translator （2017/7/18）
    　Presentation TranslatorはPowerPoint用のアドイン。プレゼンテーション時の字幕の付加や、多言語での質疑応答、スライドの翻訳を行える
＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）

注目のテーマ

Insider.NET 記事ランキング

本日 月間
＠IT