JavaScript DOM programming examples (Zhi Podcast Learning)_javascript skills

He also explained to us a lot of methods on how to learn DOM, and I think it was really beneficial.
Here are a few examples that I think are better to share with you.
1. Second-level linked drop-down menu (the first level is the province, the second level is the city, it is required to select the province at the first level, and the second level city appears accordingly)
Steps: 1) Basic framework (HTML): two complex check box, 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, and the function implementation part in JavaScript will be stimulated through the onchange method.

Copy code The code is as follows:

<br><select id= "province" onchange="selCity()"> <br><option >--Select province--</option> <br><option >Beijing</option> <br>< option >Tianjin</option> <br><option >Hubei</option> <br><option >Shandong</option> <br><option >Hebei</option&gt ; <BR></select> <br><select id="city"> <br><option>--Select city--</option> <br></select> <br>

2) Page modification does not require too much, just let the drop-down menu display one
3) To implement functions through JavaScript, we want to be the first Select a province from a drop-down list, and its city can be directly displayed later. Seeing this one-to-many correspondence, we first thought of the container map collection, but JavaScript does not have a map collection, so we thought of a container such as an array, and finally decided Use a two-dimensional array to help us implement this function.

Copy code The code is as follows:

Summary: Remember to clear the array every time.
2. Mailing list
Thoughts: 1) First of all, when you think of the overall framework, you will definitely think of using tables for formatting, and then realize related functions by operating tables and nodes such as rows and cells
2) css The main thing is to format the table, and the second thing is to select and display different effects on two rows, which is achieved by dynamically modifying the className.
Due to the length, the html and css part of the code is relatively simple, so it will not be embarrassing.
3) JavaScript to implement various functions, the code is as follows:

Copy the code The code is as follows:

<script> <br>var color =""; <br>function getStyle() <br>{ <br>var tableNode =document.getElementsByTagName("table")[0]; <br>var arr = tableNode.rows; <br>for(var x = 0;x<arr.length;x ) <BR>{ <BR>if(x%2) <BR>arr[x].className = " one"; <BR>else <BR>arr[x].className = "two"; <BR>var tdNode0 = arr[x].cells[0]; <BR>tdNode0.align = "center"; <BR>arr[x].onmouseover = function() <BR>{ <BR>color = this.className;//Record the original value, and you can return to the original color after moving the mouse once <BR>this.className = "checked"; <BR>} <BR>arr[x].onmouseout = function() <BR>{ <BR>this.className = color; <BR>} <BR>} <BR>} <BR>/ /We need to select all to achieve the same function, so we pass the value to distinguish which node it is <BR>function allCheck(index) <BR>{ <BR>var allNode = document.getElementsByName("all")[index]; <BR>var checkNodes = document.getElementsByName("mail"); <BR>for(var x=0;x<checkNodes.length;x ) <BR>{ <BR>checkNodes[x].checked = allNode.checked ; <BR>} <BR>} <BR>function checkBut(num) <BR>{ <BR>var mailNodes = document.getElementsByName("mail"); <BR>for(var x=0; x<mailNodes. length; <BR>else <BR>mailNodes[x].checked = num; <BR>} <BR>} <BR>function del() <BR>{ <BR>var b = window.confirm("Are you sure you want to delete all Choose email? "); <BR>if(!b) <BR>return ; <BR>var mailNodes = document.getElementsByName("mail"); <BR>var arr = new Array(); <BR>var pos = 0; <BR>for(var x=0; x<mailNodes.length; .parentNode; <BR>arr[pos ] = trNode; <BR>} <BR>} <BR>for(var x=0; x<arr.length; x ) <BR>{ <BR>arr[x] .parentNode.removeChild(arr[x]); <BR>} <BR>getStyle(); <BR>} <BR>window.onload = getStyle; <BR></script>