13

バックエンドでHTMLソースを生成し、個別の独立したウィジェットを使用しています。

結果のHTML出力にこのようなマークアップを含めるだけです。

 <div>
     I want to work with this DOM element
     <script>
          new Obj(/*but I can't get this <div> as a parameter! */);
     </script>
 </div>

が作成されたDOM要素を見つける方法を探していますobj(一意のIDなし)。これにより、アプリに柔軟性が加わり、開発がスピードアップします。しかし、それはJavaScriptで技術的に可能ですか?

4

4 に答える 4

10

そこに要素をシードし、その親を取得してから、要素を削除することができます。

<div>
 I want to work with this DOM element
 <script>
      document.write("<div id='UniqueGUID_3477zZ7786_' style='display:none;'></div>");
      var thatDivYouWanted;
      (function(){
       var target = document.getElementById("UniqueGUID_3477zZ7786_");
       thatDivYouWanted = target.parentNode;
       target.parentNode.removeChild(target);
      })();
      new Obj(/*but I can't get this <div> as a parameter! */);
 </script>
</div>
于 2012-12-13T19:17:41.207 に答える
6

次のコードが機能します。

<script>
  function Obj(color) {
    var scriptTags = document.getElementsByTagName("script");
    var scriptTag = scriptTags[scriptTags.length - 1];
    // find parent or do whatsoever
    var divTag = scriptTag.parentNode;
    divTag.style.backgroundColor = color;
  }
</script>


<div>
  I want to work with this DOM element
  <script>new Obj("green");</script>
</div>
<div>
  I want to work with this DOM element
  <script>new Obj("yellow");</script>
</div>
<div>
  I want to work with this DOM element
  <script>new Obj("lime");</script>
</div>

このメソッドのコードは非常に単純で、パフォーマンスへの影響はほとんどありません。

注:これはIE6では機能しないと確信しています(開いているタグの操作をサポートしていないことを覚えている限り)。

于 2012-12-13T19:21:19.753 に答える
1

あなたのアプローチは理想的ではないと思います。を取得しようとしている場合は<div>、JavaScriptと、ターゲットをクエリできるAPIを使用して、従来の方法でプログラムで実行する必要があります。<div>

インラインで実行する代わりに、制御された方法で別のスコープで実行できます(DOM Ready、Query、Your Method)。ID、CSSクラス名、またはJavaScriptの他のCSSセレクターを使用して、divをターゲットにすることができます。

これにより、インラインではなく、好きな場所でフォローを行うことができます。

// on dom ready...
var div = document.getElementById('myDiv'), // replace with any other selector method
    myObject = new Object(div);

あなたのdivを見つける必要がありますか?https://developer.mozilla.org/en-US/docs/DOM/Document.querySelectorAll

于 2012-12-13T19:23:36.097 に答える
0

ページがどのように構成されるかを事前に知っている場合は、たとえば次のように使用できます。

document.getElementsByTagName("div")[4]

5番目のdivにアクセスします。

于 2012-12-13T19:20:24.687 に答える