DOM通过节点关系获取元素：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DOM操作2-通过节点关系获取元素</title> <style> #n4{ color: red; } </style> <script type="text/javascript"> //第一种方法 // function fu(){ // var f=document.getElementById("n4").parentNode.innerHTML; // alert(f); // } // function first(){ // var first=document.getElementById("n4").parentNode.firstChild.nextSibling.innerHTML; // alert(first); // } // function forward(){ // var f=document.getElementById("n4").previousSibling.previousSibling.innerHTML; // alert(f); // } // function next(){ // var n=document.getElementById("n4").nextSibling.nextSibling.innerHTML; // alert(n); // } // function last(){ // var l=document.getElementById("n4").parentNode.lastChild.previousSibling.innerHTML; // alert(l); // } // function num(){ // var num=document.getElementsByTagName("li").length; // alert(num); // } // 第二种方法 function show(curr){ alert(curr.innerHTML); } </script> </head> <body> <ul type="square" id="m"> <li id="n1">张三</li> <li id="n2">李四</li> <li id="n3">王五</li> <li id="n4">赵六</li> <li id="n5">小红</li> <li id="n6">小明</li> </ul> <!-- <input type="button" value="父节点" onClick="fu()"> <input type="button" value="第一个子节点" onClick="first()"> <input type="button" value="上一个子节点" onClick="forward()"> <input type="button" value="下一个子节点" onClick="next()"> <input type="button" value="最后一个子节点" onClick="last()"> <input type="button" value="得到所有li元素的个数" onClick="num()"> --> <input type="button" value="父节点" onClick="show(document.getElementById('n4').parentNode)"> <input type="button" value="第一个子节点" onClick="show(document.getElementById('n4').parentNode.firstChild.nextSibling)"> <input type="button" value="上一个子节点" onClick="show(document.getElementById('n4').previousSibling.previousSibling)"> <input type="button" value="下一个子节点" onClick="show(document.getElementById('n4').nextSibling.nextSibling)"> <input type="button" value="最后一个子节点" onClick="show(document.getElementById('n4').parentNode.lastChild.previousSibling)"> </body> </html>
网页换肤：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>网页换肤功能</title> <script> function changey(){ document.getElementById("b").style.backgroundColor="yellow"; } function changer(){ document.getElementById("b").style.backgroundColor="red"; } function c(){ document.getElementById("b").style.backgroundColor="blue"; } function d(){ document.getElementById("b").style.backgroundColor="black"; } function e(){ document.getElementById("b").style.backgroundColor="green"; } // 第二种方法 function change(color){ document.getElementById("b").style.backgroundColor=color; } </script> </head> <body id="b" > <!-- <input type="button" value="黄色" onClick="changey()"> <input type="button" value="红蓝" onClick="changer()"> <input type="button" value="蓝色" onClick="c()"> <input type="button" value="黑色" onClick="d()"> <input type="button" value="绿色" onClick="e()"> --> <input type="button" value="黄色" onClick="change('yellow')"> <input type="button" value="红蓝" onClick="change('red')"> <input type="button" value="蓝色" onClick="c('blue')"> <input type="button" value="黑色" onClick="d('black')"> <input type="button" value="绿色" onClick="e('green')"> </body> </html>
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DOM操作表单元素</title> <script type="text/javascript"> function show(curr){ alert(curr.value); } function mysubmit(){ document.getElementById('myform').submit(); } function myreset(){ document.getElementById('myform').reset(); } </script> </head> <body> <form id="myform" action="https://www.baidu.com/" method="get" target="_blank"> <input type="text" value="张三" name="t1"><br> <input type="text" value="123" id="t2" name="t2"><br> <select name="s" id="s" > <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="shenzhen">深圳</option> </select><br> <input type="button" value="获取表单内第一个控件" onClick="show(document.getElementById('myform').elements[0])"> <input type="button" value="获取表单内第二个控件" onClick="show(document.getElementById('myform').elements['t2'])"> <input type="button" value="获取表单内第三个控件" onClick="show(document.getElementById('myform').s)"> <input type="button" value="操作表单" onClick="myreset()"> </form> </body> </html>
DOM下拉列表：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DOM操作下拉列表</title> </head> <body> <form action=""> <select name="" id="s" size="5"> <option value=" beijing">北京</option> <option value="shanghai" selected>上海</option> <option value="tianjin">天津</option> <option value="nanjing">南京</option> <option value="shenzhen">深圳</option> <option value="wuhan">武汉</option> </select><br> <input type="button" value="第一个城市" onClick="show(se.options[0])"> <input type="button" value="上一个城市" onClick="show(se.options[se.selectedIndex-1])"> <input type="button" value="下一个城市" onClick="show(se.options[se.selectedIndex+1])"> <input type="button" value="最后一个城市" onClick="show(se.options[se.length-1])"> </form> <script> var se=document.getElementById("s"); function show(curr){ alert(curr.text); } </script> </body> </html>
DOM操作表格：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DOM操作表格</title> </head> <body> <table border="1px" id="t"> <caption>甲骨文课程表</caption> <tr> <td>HTML</td> <td>JAVASCRIPT</td> </tr> <tr> <td>JAVASE</td> <td>ORACLE</td> </tr> <tr> <td>MYSQL</td> <td>STRUTS2</td> </tr> </table> <br> <input type="button" value="表格标题" onClick="show(t2.caption)"> <input type="button" value="第一行，第一格" onClick="show(t2.rows[0].cells[0])"> <input type="button" value="第二行，第二格" onClick="show(t2.rows[1].cells[1])"> <input type="button" value="第三行，第二格" onClick="show(t2.rows[2].cells[1])"><br> 设置指定单元格的值：第<input type="text" id="i1">行， 第<input type="text" id="i2">列的值为 <input type="text" id="i3"> <input type="button" value="修改" onClick="update()"> <script type="text/javascript"> var t2=document.getElementById("t"); function show(curr){ alert(curr.innerHTML); } function update(){ var a=document.getElementById("i1").value; var b=document.getElementById("i2").value; var c=document.getElementById("i3").value; t2.rows[a-1].cells[b-1].innerHTML=c; } </script> </body> </html>
问候：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>问候</title> </head> <script type="text/javascript"> function hello(){ var t1=document.getElementById("name").value; var o=document.getElementById("s").value; if(t1!==""){ var reg=/[A-z]/;//创建正则表达式并定制规则 var res=reg.test(t1);//判断t1是否满足规则 if(res==true){ switch(o){ case "sex": alert(t1+"，您好!"); break; case"nan": alert(t1+"先生，您好!"); break; case "nv": alert(t1+"女士，您好!"); break; default: alert("错误数据"); } }else{ alert("必须输入姓名才能问候!"); } } </script> <body> <form action=""> <input type="text" placeholder="姓名" id="name"><br> <select name="" id="s"> <option value="sex">性别</option> <option value="nv">女</option> <option value="nan">男</option> </select><br> <input type="button" value="问候" onClick="hello()"> </form> </body> </html>