form以外のHTML内のデータをPHPに送信したいです。

Question

###実現したいこと

実現したいことは以下になります：
・HTMLドキュメントのエレメントのデータをPHPに送信したい
・送信したいデータは、『class属性"hoge"を持つ幾つかのdivエレメントのstyle属性、id属性、innerHTML属性の値』
・最悪、divに変わる別のエレメント(inputなど)を利用するのでもよい

###調べたこと

「HTMLのデータをPHPに送信する方法」
を調べると、「formのpost送信」のやり方しか出てきません。
これだと、

formタグ内にエレメントを作る
→てきとうにname属性を設定する
→value属性に送りたいデータを書く
→postメソッドでPHPファイルにsubmitする
→name=>valueという形式の連想配列$_POSTで取得

という流れになると思いますが、
このやり方の問題点として、

・value属性の値しか送信できない
・そもそも「divエレメントにはname属性が存在しない」ので、POST送信はできない

というのがあります。
別のやり方を調べると、
file_get_contentsやcURLを組み合わせるやり方がありましたが、
よくわかりませんでした。

どうすれば冒頭に書いたデータの送信を実現できるでしょうか？

ご回答宜しくお願いします。
###追記
maisumakun様のご指摘を受けて
＞なぜ、そのような実装をしたいのか

もともと以下のようなことをしたいからです。

「HTMLドキュメント上のある特定のエレメントのデータを、外部のデータベース（あるいはもっと簡易にcsvファイルなど）に保存したい。
必要に応じてそのデータベースに保存したエレメントデータをドキュメントに読み込みたい。理想的にはエレメントを丸ごと保存したいが、無理ならば属性値だけでも構わない」

そのためには、まずDOMエレメントのデータをPHPに送信しなければならない、と思い、質問いたしました。
イメージとしては以下のような感じです。

<form method="post" action="hogehoge.php" >
<div id="aaa" style="background-color:red" innerHTML="hoge1">
<div id="bbb" style="background-color:yellow" innerHTML="hoge2">
<button type="submit">送信</button>
</form>

<?php
//各divのname、style、value、innerHTMLのデータを、各配列で受け取る
$for_aaa = スーパーグローバル変数的な何かfor_aaa;
$for_bbb = スーパーグローバル変数的な何かfor_bbb;

print_r($for_aaa);//Array([0]=>"aaa",[1]=>"rgba=(hoge,hoge,hoge,hoge);",[2]=>"hoge1")
print_r($for_bbb);//上同様に、２つめのdivエレメントのid,style,innerHTMLの値を要素にもつ配列
?>

ご回答宜しくお願いします。

###追記 その２
maisumakun様のご回答 及び 2つ目のご指摘を受けて

もっとも、WebサイトはHTMLを直接打ち込む、あるいは何かしらのデータからサーバサイドでHTMLを生成するものですので、わざわざ「ブラウザで表示したHTMLをサーバに送信して保存したい」という状況がどのような場合に必要となるのか、なかなか想像できません（基本的に、サーバにある情報でHTMLは再現できるはずですから）

私は今、JavaScriptを使って、
「ボタンを押すと、ランダムな『能力値』を持ったインスタンスがランダムな時刻に生成されるプログラム（ポケモンやたまごっちみたいな育成ゲーム的なもの）」
を作っているのですが、せっかくHTMLというものがあるし、Web上で利用できればと思い、

・オブジェクト（≒クラス）として、既に存在するDOM（のエレメント）を流用
・インターフェイスとしてHTMLドキュメントを利用

している感じです。
ブラウザを閉じたりリロードしたら、せっかく生まれてきたエレメントたちが消えてしまうのも忍びないので、「セーブ機能」として、
外にデータベースを作って、エレメントのデータ（能力値や育成記録）を保存できれば、と思いました。

ですので、
Webサイトを作る、
というよりかは、
HTMLやDOMを利用したWebアプリを作ろうとしている、
という感じです。

Comments

[maisumakun]

「なんのために」そのような実装としたいのでしょうか。

[tabuu]

追記その2まで読んだけど、その用途ならサーバ側で生成したほうがいいと思う。
クライアント(JavaScript)で生成しても結局はサーバ側で管理する必要があるので。

[WeilSpinor]

なるほど、
PHPのようなサーバーサイド言語でも気楽にDOM操作って出来るもんなんですかね？だったらそっちの方がいいかもしれないですね。
また調べてみたいとおもいます。

Answer 1

このやり方の問題点として、

・value属性の値しか送信できない
・そもそも「divエレメントにはname属性が存在しない」ので、POST送信はできない

何が問題なのでしょう？
何の問題もないと思います。

サーバーにデータを送る役割が与えられているのが、form要素であって、それ以外の要素に余計な役割を持たせることがそもそも設計を逸脱しています。

Answer 2

セーブ機能

localStorage

Answer 3

HTMLドキュメント上のある特定のエレメントのデータを、外部のデータベース（あるいはもっと簡易にcsvファイルなど）に保存したい

こういう要件であれば、element.outerHTML（MDN）を使ってエレメントのHTML表記を取得して、それを適当なフォーム要素に詰め込んで送る、という形がいいのではないかと思います。

---

もっとも、WebサイトはHTMLを直接打ち込む、あるいは何かしらのデータからサーバサイドでHTMLを生成するものですので、わざわざ「ブラウザで表示したHTMLをサーバに送信して保存したい」という状況がどのような場合に必要となるのか、なかなか想像できません（基本的に、サーバにある情報でHTMLは再現できるはずですから）。

Comments

[maisumakun]

「ユーザーがブラウザサイドでHTMLを構築できるような仕組みがある」、あるいは「スクレイピングなど他サイトのデータを保存する」などの状況は考えられますが、そうでないなら「HTMLを保存する」というフローそのものを見直したほうがいいかもしれません。

[WeilSpinor]

ご回答ありがとうございます。ご紹介頂いたメソッドを試してみたいと思います。

[WeilSpinor]

＞そうでないなら「HTMLを保存する」というフローそのものを見直したほうがいいかもしれません。

確かに、フローはあまり考えていませんでしたね。
何かsetIntervalの練習に作ったおもちゃを雛型にして、いろいろ機能を実装しているうちに大きくなっていってる感じです。どこに行きつくかは分かりませんし、どこまで面白いものが作れるか、実験している感じですね。
HTMLエレメント（特にdiv）というオブジェクトをつかって、どこまで「自由に動きまわったり成長したりできる機能をもった面白いがロボットができるか」ためしてみたいと思いました。

Answer 4

JavaScriptで後付けでinput要素をformにappendすればsubmit時点でform内に存在しなくても送信できます。※拾うイベントはフォームのsubmitイベントではなくボタンのclickイベントのほうが良い

$('form').append($('<input />', {
  type: 'hidden',
  name: 'hoge',
  value: $("div#hoge").text()
}));
$('form').submit();