学习内容：
1.DOM操作CSS：
改变背景颜色
1 <body id="bd"> 2 <input type="button" onClick="bgc('lightblue')" value="换肤"> 3 function bgc(color){ 4 document.getElementById("bd").style.backgroundColor=color; 5 } 6 </body>
2.表单操作：
1 <body> 2 <form action="http://www.baidu.com/" id="mf" method="get" target="_blank"> 3 <input type="text" value="张三" name="zs"><br/> 4 <input type="text" value="123" name="num"><br/> 5 <select name="" id="se"> 6 <option value="">北京</option> 7 <option value="">天津</option> 8 <option value="">上海</option> 9 </select><br/> 10 <input type="button" value="获取表单内第一个控件" onClick="op1()"> 11 <input type="button" value="获取表单内第二个控件" onClick="op2()"> 12 <input type="button" value="获取表单内第三个控件" onClick="op3()"> 13 <input type="button" value="操作表单" onClick="op4()"> 14 </form> 15 16 17 <script> 18 function op1(){ 19 var myform = document.forms[0].elements[0];//forms 返回指定表单 在elments返回的数组中访问具体的表单控件 20 alert(myform.value); 21 } 22 function op2(){ 23 var myform = document.forms[0].elements[1]; 24 alert(myform.value); 25 } 26 function op3(){ 27 var x = document.forms[0].elements[2].selectedIndex;//返回下拉列表被选中项的索引 28 var y = document.getElementsByTagName("option");//所有option储存为数组 29 /*var x=document.getElementById("se").selectedIndex; 30 var y=document.getElementsByTagName("option");*/ 31 alert(y[x].text); 32 } 33 function op4(){ 34 var myform = document.getElementById("mf"); 35 myform.submit();//执行submit功能 36 //myform.reset();//执行reset 37 //alert(myform.action);//返回action 38 //alert(myform.method);//返回method 39 } 40 </script> 41 </body>
3.DOM访问下拉菜单
1 <body> 2 <form action=""> 3 <select name="" id="sc" size="5"> 4 <option value="">北京</option> 5 <option value="" selected>上海</option> 6 <option value="">天津</option> 7 <option value="">南京</option> 8 <option value="">深圳</option> 9 <option value="">广州</option> 10 <option value="">武汉</option> 11 <option value="">重庆</option> 12 </select> 13 <br/> 14 <input type="button" value="第一个城市" onClick="f1()"> 15 <input type="button" value="上一个城市" onClick="f2()"> 16 <input type="button" value="下一个城市" onClick="f3()"> 17 <input type="button" value="最后一个城市" onClick="f4()"> 18 </form> 19 <script> 20 function f1(){ 21 var x = document.getElementById("sc"); 22 alert(x.options[0].text);//返回文本值 23 } 24 function f2(){ 25 var y = document.getElementById("sc"); 26 alert(y.options[y.selectedIndex-1].text); 27 } 28 function f3(){ 29 var z = document.getElementById("sc"); 30 alert(z.options[z.selectedIndex+1].text); 31 } 32 function f4(){ 33 var l = document.getElementById("sc"); 34 //alert(l.lastChild.previousSibling.text); 35 alert(l.options[l.length-1].text) 36 } 37 </script> 38 </body>
4.DOM访问表格
1 <body> 2 <input type="button" value="表格标题" onClick="a()"> 3 <input type="button" value="第一行、第一格" onClick="b()"> 4 <input type="button" value="第二行、第二格" onClick="c()"> 5 <input type="button" value="第三行、第二格" onClick="d()"> 6 <br/> 7 <p> 8 设定指定单元格的值：第<input type="text" width="70px" id="t1">行， 9 第<input type="text" width="70px" id="t2">列的值为 10 <input type="text" width="100px" id="t3"> 11 <input type="button" onClick="au()" value="执行"> 12 </p> 13 <script> 14 function a(){ 15 var a = document.getElementById("ta"); 16 alert(a.caption.innerHTML); 17 } 18 function b(){ 19 var a = document.getElementById("ta").rows[0].cells[0].innerHTML; 20 alert(a); 21 } 22 function au(){ 23 var a = parseInt(document.getElementById("t1").value)-1; 24 var b = parseInt(document.getElementById("t2").value)-1; 25 var c = document.getElementById("t3"); 26 var d = document.getElementById("ta"); 27 c.value = d.rows[a].cells[b].innerHTML; 28 } 29 function c(){ 30 var a = document.getElementById("ta"); 31 alert(a.rows[1].cells[1].innerHTML); 32 } 33 function d(){ 34 var a = document.getElementById("ta"); 35 alert(a.rows[2].cells[1].innerHTML); 36 } 37 </script> 38 </body>
5.DOM增删改元素
1 <script> 2 function c1(){ 3 var a = document.getElementById("u"); 4 var nj = document.createElement("li");//创造元素 5 nj.innerHTML="南京";
a.replaceChild(nj,a.firstChild.nextSibling);//替换元素 6 //a.insertBefore(nj,a.firstChild.nextSibling);//增加元素 7 } 8 function c2(){ 9 var a = document.getElementById("u"); 10 var ele = a.firstChild.nextSibling.cloneNode(true);//false时只复制li不复制内部的文字 11 a.appendChild(ele); 12 } 13 function c3(){ 14 var a = document.getElementById("u"); 15 var ele = a.firstChild.nextSibling; 16 a.removeChild(ele);//删除元素 17 } 18 </script>
PS 问候练习
1 <body> 2 <input type="text" placeholder="姓名" id="name"> 3 <select name="" id="sex"> 4 <option value="" selected>性别</option> 5 <option value="">男</option> 6 <option value="">女</option> 7 </select> 8 <input type="button" value="问候" onClick="sex()"> 9 <script> 10 function sex(){ 11 var a = document.getElementById("name").value; 12 var p = /d/.test(a); 13 var d = document.getElementById("sex").selectedIndex; 14 var c = new Date().getHours(); 15 if(a==""){ 16 alert("请输入姓名"); 17 return; 18 } 19 if(p==true){ 20 alert("请重新输入姓名"); 21 return; 22 } 23 if(c>=5&&c<=10){ 24 c="，早上好！"; 25 }else if(c>=11&&c<=14){ 26 c="，中午好！"; 27 }else if(c>=15&&c<=18){ 28 c="，下午好！"; 29 }else{ 30 c="，晚上好！"; 31 } 32 switch(d){ 33 case 0: 34 alert("请选择性别"); 35 break; 36 case 1: 37 alert(a+"先生"+c); 38 break; 39 case 2: 40 alert(a+"女士"+c); 41 break; 42 } 43 } 44 </script> 45 </body>
2018/03/01