BOM：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Bom</title> <script type="text/javascript"> function testalert(){ window.alert("这是alert()方法"); } function testconfirm(){ var a=window.confirm("是否退出"); if(a==true){ alert("拜拜"); }else{ alert(":-"); 移动窗口的偏移量 } } function testprompt(){ var b=window.prompt("请输入你的姓名："); if (b!=null){ alert(b); }else{ alert("你点了取消按钮"); } } function testmoveBy(){ window.moveBy(50,50);//移动窗口的偏移量 } function testmoveTo(){ window.moveTo(150,150);// } function testresizeBy(){ window.resizeBy(50,50);//重设窗口大小的偏移 } function testresizeTo(){ window.resizeTo(150,150);//重设浏览器串口大小位置 } function testopen(){window.open("https://www.baidu.com/","baidu","left=20,top=50,width=300,height=500,location=no,toolbar=no,status=no,resizable=no");} function watch(){ var d=new Date();//创建一个获取系统时间的Date对象 var h=d.getHours();//获取系统时间的小时 var m=d.getMinutes();//获取系统时间的分钟 var s=d.getSeconds();//获取系统时间的秒 document.getElementById("time").innerHTML=h+":"+ m+":"+s; } //设置定时器 var timer=setInterval("watch()",1000);//每隔1秒去调用一下这个方法 </script> </head> <body> <input type="button" value="alert" onClick="testalert()"> <input type="button" value="confirm" onClick="testconfirm()"> <input type="button" value="prompt" onClick="testprompt()"> <input type="button" value="moveBy" onClick="testmoveBy()"> <input type="button" value="moveTo" onClick="testmoveTo()"> <input type="button" value="resizeBy" onClick="testresizeBy()"> <input type="button" value="resizeTo" onClick="testresizeTo()"> <input type="button" value="open" onClick="testopen"> <div id="time"></div> </body> </html>
设置 删除定时器：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>设置 删除定时器</title> <style type="text/css"> #time{ width: 200px; height: 50px; background-color: yellow; border-radius: 10px; text-align: center; line-height: 50px; } </style> <script type="text/javascript"> var count=0; function showTime(){ var d=new Date();//获取系统时间 var hour=d.getHours();//获取小时 var minute=d.getMinutes();//获取分钟 var second=d.getSeconds();//获取秒 if(hour<10){ hour="0"+hour; } if(minute<10){ minute="0"+minute; } if(second<10){ second="0"+second; } count++; if(count==10){ window.clearInterval(timer); } document.getElementById("time").innerHTML=hour+":"+minute+":"+second; } var timer=window.setInterval("showTime()",1000); </script> </head> <body> <div id="time"></div> </body> </html>
DOM练习1：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>DOM操作练习</title> <script type="text/javascript"> function show(){ var content1=document.getElementById("d").innerHTML; var content2=document.getElementById("t").value; var content3=document.getElementById("i").value; alert(content1+" "+content2+" "+content3); } </script> </head> <body> <div id="d">我的div块</div> <textarea name="" id="t" cols="30" rows="10">好好学习，天天向上</textarea><input type="text" value="按我呀" id="i"><br> <input type="button" value=" 访问三个元素的内容" onClick="show()"> </body> </html>
DOM练习2：
<!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); } </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()"> </body> </html>