Javascript DOM-based application analysis (iv) _ DOM-js tutorial

From this beginning, I will talk about some practical effects. Of course, the first thing that bears the brunt is our lovely TAB. It is convenient to write tabs with JQ and there are many methods. In fact, there are many ways to write tabs using native JS. Below I will write a few for you to see.
1. Click the parameter passing method.

The Code is as follows:

Script
Function tab (dom ){
Var list = document. getElementById ("list"). getElementsByTagName ("li ");
Var con = document. getElementById ("con"). getElementsByTagName ("p ");
For (var I = 0; I If (list = dom ){
List. className = "on ";
Con. style. display = "block ";
}
Else {
List. className = "";
Con. style. display = "none ";
}
}
}
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 ("p ");
Get dom elements. The first thing to do is to get elements.

The Code is as follows:

For (var I = 0; I If (list = dom ){
List. className = "on ";
Con. style. display = "block ";
}
Else {
List. className = "";
Con. style. display = "none ";
}

Traverse all the li elements, find the same thing as the passed dom, set his class to on, and display the corresponding p, for others, set className to null and hide the corresponding p.
This is probably the case. However, everyone must have discovered the disadvantage of this writing method, that is, each li must set an onclick time to input itself. This violates the principle of separation of structure and performance. So let's just try another way.
2. Method for writing mouse events directly

The Code is as follows:

Script
Function tab (){
Var list = document. getElementById ("list"). getElementsByTagName ("li ");
Var con = document. getElementById ("con"). getElementsByTagName ("p ");
For (var I = 0; I {
List. onclick = function (){
For (var I = 0; I If (list = this ){
List. className = "on ";
Con. style. display = "block ";
}
Else {
List. className = "";
Con. style. display = "none ";
}
}
}
}
}
Window. onload = function () {tab ();}
Script

• 1


• 2


• 3


• 4

111111

222222

333333

444444

It's just a simple change, because these methods can be used in JS, such as onclick and onmouseover, however, when using this function, I first need to traverse all the elements that use this event. If the clicked element is passed in, we only need to judge whether the list is the same as this as the first method, and then the following operations are the same as the first method.
(These two methods are relatively simple writing methods. There are some more advanced and complex writing methods in JS, but most of them use the same idea .)
Now, we recommend that you use this method to write an image switching result. I think it should be very simple.

Continue to explain the effect in the next chapter