Javascript DOM programming example (smart podcast learning)

I also explained a lot about how to learn DOM. I think it is really beneficial.
The following are some examples that I think are better.
1. Level-2 linkage drop-down menu (level-1 is a province, level-2 is a city, and level-1 is required to select a province, level-2 cities correspond to appear)
Step: 1) Basic Framework (HTML): There are two check boxes, and there should be no options in the second check box. Note that the first drop-down box will be used as the event source, the onchange method is used to stimulate the function implementation in JavaScript.
Copy codeThe Code is as follows:
<Xmp>
<Select id = "province" onchange = "selCity ()">
<Option> -- select a province -- </option>
<Option> Beijing </option>
<Option> Tianjin </option>
<Option> Hubei </option>
<Option> Shandong </option>
<Option> Hebei </option>
</Select>
<Select id = "city">
<Option> -- select a city -- </option>
</Select>
</Xmp>

2) There is no need to modify the page. You just need to display one in the drop-down menu.
3) JavaScript is used to implement the function. If you want to select a province from the first drop-down list, the corresponding city will be directly displayed, first, we thought of the map set container, but the JavaScrip does not have a map set. Then we thought of an array container and finally decided to use a two-dimensional array to help us implement this function.
Copy codeThe Code is as follows:
<Script type = "text/javascript">
Function selCity ()
{
Var arr = [["-- select city --"], ["Haidian District", "Chaoyang District", "Dongcheng District", "Xicheng district", "Xuanwu District"],
["Heping District", "Hebei District", "Hedong district", "Hexi District", "Nankai district"],
["Wuhan", "Yichang", "Xiaogan", "Xiangfan", "Jingzhou"],
["Jinan", "Qingdao", "Yantai", "Weihai", "Rizhao"],
["Shijiazhuang", "Baoding", "Zhangjiakou", "Langfang", "Handan"];
Var selpNode = document. getElementById ("province ");
Var selcNode = document. getElementById ("city ");
Var citys = arr [selpNode. selectedIndex];
SelcNode. options. length = 0;
For (var x = 0; x <citys. length; x ++)
{
Var optNode = document. createElement ("option ");
OptNode. innerText = citys [x];
SelcNode. appendChild (optNode );
}
}
</Script>

Summary: Remember to clear the array each time.
2. email list
Idea: 1) first think of the overall framework, you will surely think of using tables for formatting, and then using tables, rows, and cells to implement relevant functions.
2) css is mainly used to format the table, followed by selecting and displaying different results for the two rows. It is implemented through dynamic modification of className.
Due to the length, some html and css code is relatively simple and will not be ugly.
3) JavaScript to implement various functions. The Code is as follows:
Copy codeThe Code is as follows:
<Script>
Var color = "";
Function getStyle ()
{
Var tableNode = document. getElementsByTagName ("table") [0];
Var arr = tableNode. rows;
For (var x = 0; x <arr. length; x ++)
{
If (x % 2)
Arr [x]. className = "one ";
Else
Arr [x]. className = "two ";
Var tdNode0 = arr [x]. cells [0];
TdNode0.align = "center ";
Arr [x]. onmouseover = function ()
{
Color = this. className; // record the original value, and the original color can be returned after the mouse is clicked.
This. className = "checked ";
}
Arr [x]. onmouseout = function ()
{
This. className = color;
}
}
}
// We need to select all to implement the same function, so we can identify the node by passing values.
Function allCheck (index)
{
Var allNode = document. getElementsByName ("all") [index];
Var checkNodes = document. getElementsByName ("mail ");
For (var x = 0; x <checkNodes. length; x ++)
{
CheckNodes [x]. checked = allNode. checked;
}
}
Function checkBut (num)
{
Var mailNodes = document. getElementsByName ("mail ");
For (var x = 0; x <mailNodes. length; x ++)
{
If (num> 1)
MailNodes [x]. checked =! (MailNodes [x]. checked); // returns the status of the user to the user for reverse selection.
Else
MailNodes [x]. checked = num;
}
}
Function del ()
{
Var B = window. confirm ("are you sure you want to delete the selected email? ");
If (! B)
Return;
Var mailNodes = document. getElementsByName ("mail ");
Var arr = new Array ();
Var pos = 0;
For (var x = 0; x <mailNodes. length; x ++)
{
If (mailNodes [x]. checked)
{
Var trNode = mailNodes [x]. parentNode. parentNode;
Arr [pos ++] = trNode;
}
}
For (var x = 0; x <arr. length; x ++)
{
Arr [x]. parentNode. removeChild (arr [x]);
}
GetStyle ();
}
Window. onload = getStyle;
</Script>