要素の取得とその内部の操作

ポップアップウィンドウに表示したWebページを対象に、その中にある要素を取得して、内容を変更することができます。

要素の取得

ウィンドウを起点として、その中のHTMLの要素を取得するには、「ウィンドウ○○のセレクタが○○の要素」のブロックを使います。
「ウィンドウ○○」のドロップダウンでは、ウィンドウを代入した変数を選択します。
「セレクタが○○の要素」で、取得する要素を指すセレクタを指定します。

また、ある要素を基準にして、その中にある要素を取得することもできます。
この場合は、「○○以下でセレクタが○○の要素」のブロックを使います。
「○○以下」のパラメータで、基準とする要素を指定します。

これらのブロックの戻り値が、取得した要素を指します。
要素を操作するブロックで、この戻り値を直接使うことができます。
また、同じ要素を複数回操作する場合は、戻り値を変数に代入しておいて、その変数を介して要素を操作することもできます。

要素の内容の変更

取得した要素を対象に、その内部のHTMLやテキストを変更することができます。
それには、「○○の内部のHTMLを○○にする」のブロックを使います。

要素内部の設定

「○○の内部」のパラメータで、操作する対象の要素を指定します。
「HTMLを」のドロップダウンでは、HTMLとテキストのどちらを変更するかを指定します。
そして、「○○にする」のパラメータで、変更後のHTMLまたはテキストを指定します。

要素の内容の取得

取得した要素を対象に、その内部のHTMLやテキストを取得することもできます。
それには、「○○の内部のHTML」のブロックを使います。
戻り値が、取得したHTMLまたはテキストになります。

事例

以下の事例は、Webページを開いて3秒後に、ページの中でIDが「inner」になっている要素の内部を変更するものです。
このファイルはこちらからダウンロードすることができます。
また、このプログラムで開くHTMLのファイルは、こちらからダウンロードすることができます。
HTMLのファイルは、Tsumickyのインストール先フォルダの中に「html」というフォルダを作って、その中に入れます。

このプログラムでは、IDが「inner」になっている要素を、いったん変数elmに代入します。
そして、その変数elmを介して、内容のテキストを書き換えます。

プログラムを実行した直後では、Webページは以下のような表示になります。

要素の内容を変更する例で、プログラムを実行した時点の表示

そして、3秒経過すると、以下のように表示が変わります。

要素の内容を変更する例で、プログラムを実行から3秒経過した時点の表示

« 前のページ：Webブラウザのウィンドウの操作

次のページ：要素の追加と削除 »