DOM向けJavaScriptアプリケーション解析(4)_DOM

以下に、皆さんに見ていただけるようにいくつか書きます
1. パラメータ転送メソッドをクリックします

コードをコピー コード

<script> <br>function tab(dom){ <br>var list = document.getElementById("list").getElementsByTagName("li"); >var con = document.getElementById("con").getElementsByTagName("div"); <br>for(var i=0;i<list.length>if(list==dom){ <br>list.className = "on"; <br>con.style.display = "ブロック"; <br>} <br>else{ <br>list.className="";表示 = "なし"; <br>} <br>} <br></script>

;li class="on ">1

• 2


• 4

/div>

222222

333333

"display:none;" >444444

var list = document.getElementById("list").getElementsByTagName( "li");
var con = document.getElementById("con").getElementsByTagName("div");
これは言うまでもなく dom 要素を取得します。エフェクトを記述するときに最初に行うことは、要素




コードをコピーすることです

コードは次のとおりです:


for (var i=0;iif(list==dom){ list.className = "on"; .display = "ブロック"; else{ list.className=""; }

すべての li 要素をループし、渡された dom と同じものを見つけて、そのクラスを on に設定し、対応する div を表示します。その他のすべてについては、className を空に設定し、対応する div を非表示にします。

おそらくそれです。しかし、誰もがこの書き方の欠点に気づいたはずです。それは、各 li が onclick 時間を設定し、それを自分自身に渡さなければならないということです。これは、構造とパフォーマンスの分離に多少違反します。そこで、書き方を変更します
次に、マウスイベントメソッドを直接記述します




コードをコピーします


コードは次のとおりです:

<script> <br>function tab(){ <br>var list = document.getElementById("list").getElementsByTagName("li"); document.getElementById(" con").getElementsByTagName("div"); <br>for(var i = 0;i<list.length class="codetitle">{ <span>list.onclick=function(){ <a style="CURSOR: pointer" data="45679" class="copybut" id="copybut45679" onclick="doCopy('code45679')">for(var i=0;i<list.length>if(list==this){ list.className = "on"; </list.length></a>con.style.display = " block"; </span>} else{ <div class="codebody" id="code45679">list.className=""; <br>con.style.display="none"; <br>} <br>} <br>} <br> } <br>} <br>window.onload=function(){tab();} <br></script>

🎜>
• 1


• 2


• /li>
  

/div>

222222

333333

div style="display :none;">/div>

onclick などのメソッドがあるため、単純な変更で十分です。 , onmouseover 待ちますが、これを使用する場合は、このイベントを使用する必要があるすべての要素をトラバースする必要があります。その要素がクリックされると、 this が渡されます。リストが最初のものと同じかどうかを判断するだけで済みます。これは同じであり、以降の操作は最初のメソッド
と同じです (このように、どちらのメソッドも比較的単純な記述メソッドです。JS にはさらに高度で複雑な記述メソッドもありますが、その考え方は次のとおりです)使用されるものはこれら 2 つの書き方と同じです。 )
これで、このメソッドを使用して画像切り替えエフェクトを作成することをお勧めします。

エフェクトについては次の章で説明します。