一、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>