一、DOM简介


        文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标志语言的标准编程接口。

可以将每个HTML标签都做为一个对象，JavaScript通过调用DOM中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。



选择器：

  • document.getElementById('id')

  • document.getElementsByName('name')

  • document.getElementsByTagName('tagname')


实例演示一、修改单个标签中的文本内容。

1
2
3
4
5
6
7
8
9
10
< div  id = "n1" >
< p >hello aaaaaa</ p >
</ div >
 
< script  type = "text/javascript" >
<!-- 通过标签ID获取到标签对象 -->
var name1 = document.getElementById('n1');
<!-- 修改标签文本内容为'tuchao' -->
name1.innerText = 'tuchao';
</ script >


实例演示二、通过标签name修改多个标签的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< div  id = "n1" >
< p >hello aaaaaa</ p >
</ div >
< hr />
< div  name = "n2" > < p >heheheheeeeeee</ p ></ div >
< hr />
< div  name = "n2" > < p >bbabababbabab</ p ></ div >
 
< script  type = "text/javascript" >
<!-- 通过标签name获取到标签对象 -->
var name2 = document.getElementsByName('n2');
<!-- 当获取到多个同name标签时，则通过序号来区别，name2[0]表示第一个，name2[1]则表示第二个 -->
name2[0].innerText = 'tuchao';
name2[1].innerText = 'tuchao';
</ script >

页面效果：

wKioL1bEMIDT76I9AAAG4wS6txc583.png


实例演示三、通过标签tag修改多个标签的内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< div  id = "n1" >
< p >hello aaaaaa</ p >
</ div >
< hr />
< div  name = "n2" > < p >heheheheeeeeee</ p ></ div >
< hr />
< div  name = "n2" > < p >bbabababbabab</ p ></ div >
 
< script  type = "text/javascript" >
<!-- 通过标签tag获取到标签对象 -->
var name3 = document.getElementsByTagName('div');
<!-- 对该对象进行循环，逐一取出每个对象进行修改 -->
for (var item in name3){
 
     name3[item].innerText = 'elephant'
     }
</ script >

页面效果：

wKioL1bEMqyi1N_jAAAEH6wzSMg981.png

常用函数：

  • 创建标签

       document.createElement('a')

  • 获取或者修改样式

        obj.className

  • 获取或设置属性

        setattribute(key,val)    getattribute(key)

  • 获取或修改样式中的属性

        obj.style.属性

  • 提交表单

        document.geElementById('form_id').submit()


实例演示四、在标签中加入内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< div  id = "n1" >
< p >hello aaaaaa</ p >
</ div >
 
< script  type = "text/javascript" >
<!-- 创建一个a标签 -->
var tag = document.createElement("a");
<!-- 给创建的标签赋予链接 -->
tag.href = '
  <!-- 给标签设置文本字符 -->
tag.innerText = '点希望';
 
var id1 = document.getElementById('n1');
<!-- 给id1对象添加标签 -->
id1.appendChild(tag);
 
</ script >

页面效果：

wKiom1bEOjWxVENhAAAC5BDH8aE193.png


实例演示五、标签替换

1
2
3
4
5
6
7
8
9
10
11
< div  id = "n1" >
< p >hello aaaaaa</ p >
</ div >
 
< script  type = "text/javascript" >
<!-- 创建标签对象 -->
var tag = "< a  href = 'http://www.baidu.com' >百度一下</ a >"
var id1 = document.getElementById('n1');
<!-- 替换标签 -->
id1.innerHTML = tag;
</ script >

页面效果会显示原id="n1"的div标签消失了，替换成了自定义的超链接标签。


实例演示六、修改标签的Class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  http-equiv = "Content-Type"  charset = "UTF-8"  content = "text/html" >
     < title >js_st1</ title >
     < style  type = "text/css" >
         .hide {display: none;}
         .n22 {color:red;}
 
     </ style >
 
</ head >
< body >
     < div  class = "n22"  name = "n2" > < p >heheheheeeeeee</ p ></ div >
     < hr />
     < div  name = "n2" > < p >bbabababbabab</ p ></ div >
 
< script  type = "text/javascript" >
var id2 = document.getElementsByName('n2');
<!-- 将原样式n22替换为hide样式 -->
id2[0].className = 'hide'
</ script >      
</ body >
</ html >

此时第一个div在页面中将不会显示了


实例演示七、修改标签的name值

1
2
3
4
5
6
7
8
9
10
11
< div  id = "n3"  name = "dog" > </ div >
 
< script  type = "text/javascript" >
<!-- 通过id获取到标签对象 -->
var id3 = document.getElementById('n3');
<!-- 使用log打印原name值 -->
console.log(id3.getAttribute('name'));
<!-- 修改标签的name值为'cow' -->
id3.setAttribute('name','cow');
console.log(id3.getAttribute('name'));
</ script >

页面效果：

wKioL1bERcHC_WC5AAAtAWRMTsw355.png


实例演示八、修改标签样式

1
2
3
4
5
6
7
8
9
10
< div  style = "width:500px; height:300px; border:solid black 1px"  id = "n3"  name = "dog" > </ div >
 
< script  type = "text/javascript" >
var id3 = document.getElementById('n3');
<!-- 获取该标签的宽度 -->
var w = id3.style.width;
console.log(w);
<!-- 修改样式 -->
id3.style.width = '200px'
</ script >

页面效果：修改前

wKioL1bESOSRizCOAAAM3SpJY_o215.png

页面效果：修改后

wKioL1bESO-ijmHyAAAEdRqevg8430.png


常用事件：

wKiom1bEbrPChngOAAOLKOkh7Gc125.png


实例演示九、创建按钮点击事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< form  id = "F1"  action = 'https://www.baidu.com/s?'  method = "GET" >
     <!-- 这里的wd是传给后端程序的value -->
     < input  type = 'text'  name = 'wd'  />
   <!-- 定义点击事件，对应Foo()函数 -->  
     < input  type = 'button'  value = '按钮提交'  onclick = 'Foo();'  />
 
</ form >
 
< script  type = "text/javascript" >
<!-- 定义点击函数内容，提交'F1'对象表单 -->
function Foo (){
 
     document.getElementById('F1').submit()
}
</ script >


常用方法：

  • 定义一个函数每隔一定的时间自动执行一次，括号中左边写执行的函数名逗号分割，右边写间隔的时长单位为毫秒。

        setInterval('Foo()',20)

  • 用于停止setInterval的循环执行，这个函数括号中接受的参数为setInterval函数返回的值。

        clearInterval(interval)

  • 定义一个函数间隔一定的时间自动执行，与setInterval函数不同的是这个方法只让函数执行一次。

        setTimeout('Go()',10000)

  • 用于取消setTimeout函数的执行，函数接受的参数是setTimeout函数返回的值。

        clearTimeout()


搜索框实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  http-equiv = "Content-Type"  charset = "UTF-8"  content = "text/html" >
     < title >搜索框实例</ title >
     < style  type = "text/css" >
     .gray{color: gray;
         height: 30px;
         width: 220px;
    }
 
    .black{
      color: black;
      height: 30px;
     width: 220px;
    }
 
     </ style >
</ head >
< body >
  
< input  type = 'text'  class = 'gray'  id = 'tip'  value = '请输入关键词'  onfocus = 'Enter();'  onblur = 'Leave();'  />
 
  < script  type = "text/javascript" >
    function Enter(){
        var id = document.getElementById('tip');
        id.className = 'black'
 
        if(id.value=='请输入关键词' || id.value.trim()==''){
            id.value = ''
        }
    }
 
    function Leave(){
 
        var id = document.getElementById('tip');
 
        if(id.value=='请输入关键词' || id.value.trim()==''){
            
            id.value='请输入关键词'
            id.className='gray'
 
        }else{
            id.className='black'
        }
    }
  
  </ script >
</ body >
</ html >


跑马灯实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  http-equiv = "Content-Type"  charset = "UTF-8"  content = "text/html" >
     < title >跑马灯&nbsp;&nbsp;哈哈和进度条&nbsp;&nbsp;</ title >
     < style  type = "text/css" >
     </ style >
 
</ head >
< body >
< script  type = "text/javascript" >
 
     function Go(){
 
     <!-- 获取title文本内容 -->
     var content = document.title;
     <!-- 获取内容的第一个字符 -->
     var firstChar = content.charAt(0)
     <!-- 获取title的第二个至最后一个字符 -->
     var sub = content.substring(1,content.length)
     document.title = sub + firstChar;
}
 
setInterval('Go()',1000);
</ script >
</ body >
</ html >


进度条实例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<!DOCTYPE html>
< html  lang = "en" >
< head >
     < meta  http-equiv = "Content-Type"  charset = "UTF-8"  content = "text/html" >
     < title >跑马灯&nbsp;&nbsp;哈哈和进度条&nbsp;&nbsp;</ title >
     < style  type = "text/css" >
     </ style >
 
</ head >
< body >
     < div  style = "width:1000px;background-color:gray" >
         < div  id = 'jindu'  style = "width:10%;background-color:red;height:20px;" ></ div >
 
     </ div >
 
     < div >
         < input  type = 'button'  value = '点击停止'  onclick = 'Stop();'  />
     </ div >
 
< script  type = "text/javascript" >
 
pro = 10
function Foo(){
     var id = document.getElementById('jindu');
     pro = pro + 1;
     if(pro > 100){
         clearInterval(interval)
     }else{ 
         id.style.width = pro+'%';
     }
}
interval = setInterval('Foo()',20)
 
<!-- 定义停止函数，用于停止进度条 -->
function Stop(){
 
     clearInterval(interval)
}
 
 
</ script >
</ body >
</ html >