JavaScript application analysis for DOM (4)_DOM

Below I will write a few for everyone to see
1. Click on the parameter transfer method

Copy the code The code is as follows:

<script> <br>function tab(dom){ <br>var list = document.getElementById("list").getElementsByTagName("li"); <br>var con = document. getElementById("con").getElementsByTagName("div"); <br>for(var i=0;i<list.length;i ){ <BR>if(list==dom){ <BR>list.className = "on"; <BR>con.style.display = "block"; <BR>} <BR>else{ <BR>list.className=""; <BR>con.style.display="none"; <BR>} <BR>} <BR>} <BR></script>

• 1


• 2


• 3


• 4

111111

222222

333333

444444

Let me explain
var list = document.getElementById("list").getElementsByTagName("li");
var con = document.getElementById("con").getElementsByTagName("div");
Get dom elements, needless to say this. The first thing to do when writing any effect is to get the element

Copy the code The code is as follows:

for (var i=0;iif(list==dom){
list.className = "on";
con.style.display = "block";
}
else{
list.className="";
con.style.display="none";
}

Loop through all li element, find the same thing as the passed in dom, then set its class to on, and display the corresponding div. For all others, set the className to empty and hide the corresponding div.
That’s probably it. But everyone must have discovered the shortcoming of this way of writing, that is, each li must set an onclick time and pass it to itself. This somewhat violates the separation of structure and performance. So we change the way of writing
Second, write the mouse event method directly

Copy the code The code is as follows:

<script> <br>function tab(){ <br>var list = document.getElementById("list").getElementsByTagName("li"); <br>var con = document.getElementById(" con").getElementsByTagName("div"); <br>for(var i = 0;i<list.length;i ) <BR>{ <BR>list.onclick=function(){ <BR>for(var i=0;i<list.length;i ){ <BR>if(list==this){ <BR>list.className = "on"; <BR>con.style.display = "block"; <BR>} <BR>else{ <BR>list.className=""; <BR>con.style.display="none"; <BR>} <BR>} <BR>} <BR>} <BR>} <BR>window.onload=function(){tab();} <BR></script>

• 1


• 2


• 3


• 4

111111

222222

333333

444444

Just a simple change is enough, because there are these methods in JS such as onclick, onmouseover Wait, but when using it, I need to traverse all the elements that need to use this event. If that element is clicked, a this will be passed in. We only need to judge whether the list is the same as the first method. this is the same, and the following operations are the same as the first method
(in this way, both methods are relatively simple writing methods. There are also some more advanced and complex writing methods in JS, but the ideas used are the same as these two writing methods. Mostly the same. )
That’s it. I suggest you use this method to write an image switching effect. I think it should be very simple.

Continue to talk about effects in the next chapter.