またもカブる

教えてgoo JavaScript

【JS】phpで作成した多数のdivを操作したい
http://oshiete.goo.ne.jp/qa/8034381.html

FUjillin さんとかぶる。
正規表現のとこは、うっしっし。
スペースが続く場合もあるし。


本日、睡眠時間まじ30分。ほぼ徹夜。テンションが高くてもう眠れない。
なので、HTMLにして回答。ばか丸出し。


追記。
５００は、少なすぎた。５００００くらいにしておけば良かった。


後記
LancerVII さんに点数が寄与された。それはないぜ〜！

<!DOCTYPE html>
<title>子は親を見て育つ</title>
<meta charset="UTF-8"/>
<style>
body {
  width : 40em;
}
div.hoge {
  border: 3px red double;
}
em {
  color:gray;
}
</style>
<body>

<h1>親のブロック構造を探して弄る</h1>
<dl>
  <dt>&gt; divが縦に沢山ならび、リストとしています。
  <dd>
    <p>ならば、DIV要素を使わずリスト要素を使うべきです。<br>
       <em>CSS で、list-style: none; とするだけでよくね？</em>
  
  <dt>子要素からは、node.parentNode で親を特定できる
  <dd>
    <p>ボタンが子要素ならば、親をたどります。
    <p>しかし、その親を特定する名前が必要です。<br>
       今回は、className を利用してはどうでしょうか？
    <p>className には、空白で複数指定できるのですから、
       それをチェックするには、注意が必要です。
</dl>

<h2>コピーするサンプル</h2>
<div class="hoge">
  <h3>これは、サンプルのDIV要素です</h2>
  <p>
    なんだよ！丁寧に回答しても、無視するやつ！
    <input type="button" name="change" value="顔色を変える">
</div>

<h2>実行手順</h2>
<ol>
  <li>まず、実験的にスクリプトで div 要素を沢山つくります。
      <input type="button" name="make" value="作る">
  <li>それぞに出来た<input type="button" name="dmy" value="顔色を変える">を、
      苛立ちをあらわにしてクリックします。
  <li>動かないと思ったら、これは IE のことなど考慮しない仕様だからです。
  <li>jQuery を持ち出すほどのことは、ありません。
</ol>

<h2>イベントの実装</h2>
<ul>
  <li>クリックイベントは、バブリングします。なので、document で監視します。
  <li>呼び出されたハンドラの第１引数には、そのイベントオブジェクトが勝手に
      プレゼントされます。素直に受けとりましょう。
  <li>event.target で、クリックした要素が判別できます。もしその、要素が
      ボタンなら名前を見て、次に何をすべきか教え込みます。
  <li>もし、親の className が、 "hoge" だったら、望んでいた行為におよびます。<br>
      今回は、背景をランダムに色を変えます。
</ul>

<h2>実行結果</h2>
<div id="view"></div>
  
<script>
function make () {
  var origin = document.querySelector ('div.hoge');
  var view = document.querySelector ('#view');
  for (var i = 500; i--; )
    view.appendChild (origin.cloneNode (true));
}

function r (n) {
  return Math.floor (Math.random () * n);
}

function color (e) {
  e.style.background = 'rgb(' + r(256) + ',' + r(256) + ',' + r(256) + ')';
}
  
function change (e) {
  var isHoge = /(^|\s+)hoge(\s+|$)/;
  var prt = e;
  while (prt = prt.parentNode)
    if (prt.className)
      if (isHoge.test (prt.className))
        return color (prt);
}

function handler (event) {
  var e = event.target;

  if ('INPUT' === e.tagName)
    if ('button' === e.type)
      switch (e.name) {
      case 'make' : make (); break; 
      case 'change' : change (e); break;
      case 'dmy' : alert ('これじゃないから');break;
      }
}
document.addEventListener ('click', handler, false);

</script>