JavaScript application Analysis for DOM (d) _dom

I'll write a few for you to see
One, click on the Reference method

Copy Code code as follows:

<script>
Function tab (DOM) {
var list = Document.getelementby Id ("list"). getElementsByTagName ("Li");
var con = document.getElementById ("con"). getElementsByTagName ("div");
for (Var i=0;i<list.length;i++) {
if (list==dom) {
List.classname = ' on ';
Con.style.display = "block";
}
else{
list.classname= "";
con.style.display= "None";
}
}
}
</script>
<div id= "list" >
<ul>
<li class= "on" >1</ Li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
< /div>
<div id= "Con" >
<div style= "Display:block;" >111111</div>
<div style= "Display:none;" >222222</div>
<div style= "Display:none;" >333333</div>
<div style= "Display:none;" >444444</div>
</div>

Let me explain.
var list = document.getElementById ("list"). getElementsByTagName ("Li");
var con = document.getElementById ("con"). getElementsByTagName ("div");
Get the DOM element, that's needless to say. The first thing to write is to get the element

Copy Code code as follows:

for (Var i=0;i<list.length;i++) {
if (list==dom) {
List.classname = "on";
Con.style.display = "block";
}
else{
List.classname= "";
Con.style.display= "None";
}

Iterate through all the LI elements, find something like the DOM that comes in, and then set his class to on and display the corresponding Div, all the rest of the classname is set to empty and the corresponding Div is hidden.
That's probably it. But everyone must have found the disadvantage of such a writing, that is, each Li has to set an onclick time to pass into its own. This is a bit of a violation of the structure and performance of the separation of the truth. So we're going to change the wording.
Two, direct write mouse event method

Copy Code code as follows:

<script>
Function tab () {
var list = document.getElementById ("list"). getElementsByTagName ("Li");
var con = document.getElementById ("con"). getElementsByTagName ("div");
for (var i = 0;i<list.length;i++)
{
List.onclick=function () {
for (Var i=0;i<list.length;i++) {
if (list==this) {
List.classname = "on";
Con.style.display = "block";
}
else{
List.classname= "";
Con.style.display= "None";
}
}
}
}
}
Window.onload=function () {tab ();}
</script>
<div id= "List" >
<ul>
<li class= "on" >1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div id= "Con" >
<div style= "Display:block;" >111111</div>
<div style= "Display:none;" >222222</div>
<div style= "Display:none;" >333333</div>
<div style= "Display:none;" >444444</div>
</div>

Just a simple change is OK, because in JS there are these methods can be used such as onclick,onmouseover and so on, but the use of the time I want to use this event to all the elements are traversed, if that is clicked will pass into a this, We just need to be like the first method to determine if the list is the same as this one, and then the following action is the same as this one
(Such two methods are relatively simple writing, in JS there are some more advanced complex writing, but the use of the idea and the two kinds of writing are mostly the same.) ）
All right, here, I suggest you can write a picture switch effect in this way, I think it should be very simple

The next chapter continues to say the effect