DOM实例

同一种功能两种方法：

 1 　　　　<script type='text/javascript'>
 2             <!--
 3             
 4             var tag = document.creatElement("a");
 5             tag.href = 'http://www.baidu.com';
 6             tag.innerText = '点我啊';
 7             
 8             var id1 = document.getElementById('t1');
 9             id1.appendChild(tag);
10             
11             
12             -->
13             
14             var tag = '<a href="http://baidu.com">zouni</a>'
15             var id1=document.getElementById('t1')
16             id1.appendChild(tag)
17         </script>     


上述方法可以使用html的很多操作，例如css的属性可以通过此方式修改，标签可以插入，标签的属性修改，标签的内容可以插入。

 1 <body>
 2         
 3         
 4             
 5         <form id='f1' action='https://www.sogou.com/web?' method='GET'>
 6             
 7             <input id='query' type='text' name='query'/>  //在服务器端一般都是通过name来获取我要发送的值，name就类似于key
 8             <!--<input type='submit' value='提交'>-->   //这个是默认就会提交
 9             <input type='button' value=‘伪提交' onclick='foo()；'/>     //这个是利用button来提交，这个一般没有什么效果，所以在foo()函数中使用提交，在foo()函数中可以定义我需要识别内容，可以让这个函数内部检查我是否输入正确，是否输入合适的字符。
10         
11         </form>
12     
13             
14         <script type='text/javascript'>
15             
16             function foo(){
17                 
18                 document.getElementById('f1').submit();
19             
20             }
21         
22             
23         </script>     
24         
25         
26         <script type='text/javascript'>alert('bill');</script> 
27 </body>

搜索框实例：

 1 <html>
 2     <head>
 3                 <meta http-equiv=“content-type” content=“text/html;charset=utf-8”>
 4                 <style>
 5                     .black{
 6                         color:black;
 7                     }
 8                     .gray{
 9                         color:gray;                
10                     }
11                 </style>
12     </head>
13 
14     <body>
18         <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='enter();' onblur='leave();'/> //但鼠标落在框里与框外的区别
21         <script type='text/javascript'>
22             
23             function enter(){
24                 
25                 var id = document.getElementById('tip');;
26                 
27                 id.className = 'black';
28                 
29                 if(id.value=='请输入关键字'|| id.value.trim()==''){  //trim()用于消除字符串两端的空白字符
30                 
31                     id.value='';
32                 }
33             }
34             
35             function leave(){
36             
37                 var id = document.getElementById('tip')
38                 
39                 var val =  id.value;
40                 
41                 if (val.length==0 || id.value.trim()==''){
42                     
43                     id.value='请输入关键字';
44                     id.className='gray';
45                     
46                 }else{
48                     id.className='black';                
49                 }
52             }
55         </script> 
59     </body>
62 </html>

滚动条：

 1<div style='500px;background-color:red;'>
 2      <div id='nima' style='10%;background-color:green;height:10px;'></div>        
 3</div>   
 6             
 7<script type='text/javascript'>
 9         
10         tmp=10;
11             function foo(){
13                 var id = document.getElementById('nima');
14                 tmp=tmp+10;
15                 if(tmp>100){
17                      clearInterval(interval);
18                 }else{
20                      id.style.width=tmp+'%';
22                 }            
23             }
24             interval=setInterval('foo()',500);  //每半秒钟执行一次，setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
26</script>     


如果此时我将setInterval改成setTimeout,此时就变成0.5秒后再执行一次就不执行了。