DOM
首先我们来介绍下什么是DOM(文档对象模型)，DOM是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。下面我们进入今天的主题，如何通过DOM把网页和脚本及其他的编程语言练习起来。
一、访问元素的方法
1、直接访问
|
1
2
3
4
5
6
7
|
document.getElementById(); //根据ID获取一个标签document.getElementsByName(); //根据name属性获取标签集合document.getElementsByClassName(); //根据class属性获取标签集合document.getElementsByTagName(); //根据标签名获取标签集合 |
2、间接访问
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
parentNode(); //父节点childNodes(); //所有子节点firstChild(); //第一个子节点lastChild(); //最后一个子节点nextSibling(); //下一个兄弟节点previousSibling(); //上一个兄弟节点parentElement // 父节点标签元素children // 所有子标签firstElementChild // 第一个子标签元素lastElementChild // 最后一个子标签元素nextElementtSibling // 下一个兄弟标签元素previousElementSibling // 上一个兄弟标签元素 |
示例一：
|
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
|
<body> <p>列表示例：</p> <ul> <li>Coffee</li> <li>Tea</li> </ul> <p id="demo">点击按钮来获得列表中首个列表项的父节点节点名。</p> <button onclick="myFunction()">点我</button> <script> function myFunction(){ var x=document.getElementById("demo"); //通过demo找到id="demo"的标签 var y=document.getElementsByTagName("LI")[0]; //根据li标签名来获取li标签 x.innerHTML=y.parentNode.nodeName; //将x的innerHTML内容设置为y的父节点名字 } </script></body> |
示例二：
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <input id="i1" type="text" value="请输入关键字" onfocus="Focus();" onblur="Blur();"/> <input id="i2" type="text"/> <script type="text/javascript"> function Focus() { //获取标签并清空 var tag = document.getElementById('i1'); if(tag.value == "请输入关键字"){ tag.value = ""; } } function Blur() { var tag = document.getElementById('i1'); var val = tag.value; //如果没有输入离开后，继续显示请输入关键字 if(val.trim().length == 0){ tag.value = "请输入关键字"; } } </script></body></html> |
二、DOM操作
1、内容操作
|
1
2
3
4
5
|
innerText //文本outerText innerHTML //使用innerHEML属性，应用于获取或替换HTML元素value //标签里的值 |
2、属性操作
|
1
2
3
4
5
6
7
8
9
10
11
|
attributes //获取所有标签属性setAttribute(key,value) //设置标签属性getAttributes(key) //获取指定标签属性/*var atr = document.createAttribute('class');atr.nodeValue="democlass";document.getElementByid('n1').setAttributeNode(atr);*/ |
示例：实现全选、反选、取消
|
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>批量操作</title></head><body> <input type="button" value="全选" onclick="CheckAll();"/> <input type="button" value="取消" onclick="CancelAll();"/> <input type="button" value="反选" onclick="ReverseCheck();"/> <table border="1"> <thead> <tr> <th>状态</th> <th>用户名</th> <th>密码</th> </tr> </thead> <tbody id="tb"> <tr> <td><input type="checkbox"/></td> <td>haifeng</td> <td>123456</td> </tr> <tr> <td><input type="checkbox"/></td> <td>haifeng</td> <td>123456</td> </tr> </tbody> </table> <script> function CheckAll(ths) { var tb = document.getElementById('tb'); var trs = tb.childNodes; //获取所有子节点[text, tr, text, tr, text] for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ //获取标签属性，1为元素类型 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked=true; } } } function CancelAll(ths) { var tb = document.getElementById('tb'); var trs = tb.childNodes; //获取所有子节点[text, tr, text, tr, text] for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ //获取标签属性，1为元素类型 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; inp.checked=false; } } } function ReverseCheck(ths) { var tb = document.getElementById('tb'); var trs = tb.childNodes; //获取所有子节点[text, tr, text, tr, text] for(var i=0;i<trs.length;i++){ var current_tr = trs[i]; if(current_tr.nodeType==1){ //获取标签属性，1为元素类型 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0]; if(inp.checked){ inp.checked = false; }else{ inp.checked = true; } } } } </script></body></html> |
上面的例子中涉及到了一个nodeType,nodeType属性是返回节点的类型。
比较重要的节点类型有：
| 元素类型 | NodeType |
|---|---|
| 元素 | 1 |
| 属性 | 2 |
| 文本 | 3 |
| 注释 | 8 |
| 文档 | 9 |
3、class操作
|
1
2
3
4
5
|
className //获取所有类名classList.remove(cls) //删除指定类classList。add(cls) //添加类 |
4、标签操作
创建标签：
|
1
2
3
4
5
6
7
8
9
10
|
//方式一:类方式var tag = document。createElement('a')tag.innerText = "百度"tag.className = "i1"tag.href = "http://www.baidu.com"//方式二：标签方式 |
操作标签：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
//方式一var obj = "<input type='text'/>";xxx.insertAdjacentHTML("beforeEnd",obj);xxx.insertAdjacentElement('afterBegin',document.createElement('p'))//注意：第一个参数只能是'beforeBegin'、'afterBegin'、'beforeEnd'、'afterEnd'//方式二var tag = document.createElement('a')xxx.appendChild(tag)xxx.insertBefore(tag,xxx[1]) |
5、样式操作：
|
1
2
3
4
|
var obj = document.getElementById('i1')obj.style.fontSize = "32px";obj.style.backgroundColor = "red"; |
示例（点赞）：
|
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
51
52
53
54
55
56
57
58
59
60
61
62
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>赞</title> <style> .item{ padding: 50px; position: relative; color: #00CC00; font-weight: bolder; } </style></head><body> <div class="item"> <a onclick="Favor(this);">赞</a> </div> <script> function Favor(ths) { //ths==>this==>当前触发事件的标签 var top = 49; var left =71; var op = 1; var fontSize = 18; //创建对象标签 var tag = document.createElement('span'); tag.innerText = '+1'; tag.style.position = 'absolute'; tag.style.top = top + 'px'; tag.style.left = left + 'px'; tag.style.opacity = op; tag.style.fontSize = fontSize + 'px'; //parentElement添加到父标签下 ths.parentElement.appendChild(tag); //setInterval设置定时器 var interval = setInterval(function () { top -= 10; left += 10; fontSize += 5; op -= 0.1; tag.style.top = top + 'px'; tag.style.left = left + 'px'; tag.style.opacity = op; tag.style.fontSize = fontSize + 'px'; if(op <= 0.2){ //移除定时器 clearInterval(interval); //移除标签 ths .parentElement.removeChild(tag); } },50); } </script></body></html> |
6、位置操作
|
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
|
//总文档高度document。documentElement.offsetHeight//当前文档占屏幕高度document。documentElement。clentHeight//自身高度tag.offsetHeight//距离上级定位高度tag.offsetTop//父定位标签tag.offsetParent//滚动高度tag.scrollTop/* clientHeight --> 可见区域：height + padding clientTop --> boder高度 offsetHeight -->可见区域：height + padding + border offsetTop --> 上级定位标签高度 scrollHeight -->全文高：height + padding scrollTop --> 滚动高度 特殊： document。documentElement（代指文档根节点）*/ |
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body style="margin: 0;"> 8 <div style="height: 900px;"> 9 10 </div> 11 <div style="padding: 10px;"> 12 <div id="i1" style="height:190px;padding: 2px;border: 1px solid red;margin: 8px;"> 13 <p>asdf</p> 14 <p>asdf</p> 15 <p>asdf</p> 16 <p>asdf</p> 17 <p>asdf</p> 18 </div> 19 </div> 20 21 <script> 22 var i1 = document.getElementById('i1'); 23 24 console.log(i1.clientHeight); // 可见区域：height + padding 25 console.log(i1.clientTop); // border高度 26 console.log('====='); 27 console.log(i1.offsetHeight); // 可见区域：height + padding + border 28 console.log(i1.offsetTop); // 上级定位标签的高度 29 console.log('====='); 30 console.log(i1.scrollHeight); //全文高：height + padding 31 console.log(i1.scrollTop); // 滚动高度 32 console.log('====='); 33 34 </script> 35 </body> 36 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 9 body{ 10 margin: 0px; 11 } 12 img { 13 border: 0; 14 } 15 ul{ 16 padding: 0; 17 margin: 0; 18 list-style: none; 19 } 20 .clearfix:after { 21 content: "."; 22 display: block; 23 height: 0; 24 clear: both; 25 visibility: hidden; 26 } 27 28 .wrap{ 29 width: 980px; 30 margin: 0 auto; 31 } 32 33 .pg-header{ 34 background-color: #303a40; 35 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 36 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 37 box-shadow: 0 2px 5px rgba(0,0,0,.2); 38 } 39 .pg-header .logo{ 40 float: left; 41 padding:5px 10px 5px 0px; 42 } 43 .pg-header .logo img{ 44 vertical-align: middle; 45 width: 110px; 46 height: 40px; 47 48 } 49 .pg-header .nav{ 50 line-height: 50px; 51 } 52 .pg-header .nav ul li{ 53 float: left; 54 } 55 .pg-header .nav ul li a{ 56 display: block; 57 color: #ccc; 58 padding: 0 20px; 59 text-decoration: none; 60 font-size: 14px; 61 } 62 .pg-header .nav ul li a:hover{ 63 color: #fff; 64 background-color: #425a66; 65 } 66 .pg-body{ 67 68 } 69 .pg-body .catalog{ 70 position: absolute; 71 top:60px; 72 width: 200px; 73 background-color: #fafafa; 74 bottom: 0px; 75 } 76 .pg-body .catalog.fixed{ 77 position: fixed; 78 top:10px; 79 } 80 81 .pg-body .catalog .catalog-item.active{ 82 color: #fff; 83 background-color: #425a66; 84 } 85 86 .pg-body .content{ 87 position: absolute; 88 top:60px; 89 width: 700px; 90 margin-left: 210px; 91 background-color: #fafafa; 92 overflow: auto; 93 } 94 .pg-body .content .section{ 95 height: 500px; 96 } 97 </style> 98 <body onscroll="ScrollEvent();"> 99 <div class="pg-header"> 100 <div class="wrap clearfix"> 101 <div class="logo"> 102 <a href="#"> 103 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> 104 </a> 105 </div> 106 <div class="nav"> 107 <ul> 108 <li> 109 <a href="#">首页</a> 110 </li> 111 <li> 112 <a href="#">功能一</a> 113 </li> 114 <li> 115 <a href="#">功能二</a> 116 </li> 117 </ul> 118 </div> 119 120 </div> 121 </div> 122 <div class="pg-body"> 123 <div class="wrap"> 124 <div class="catalog"> 125 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 126 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 127 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 128 </div> 129 <div class="content"> 130 <div menu="function1" class="section"> 131 <h1>第一章</h1> 132 </div> 133 <div menu="function2" class="section"> 134 <h1>第二章</h1> 135 </div> 136 <div menu="function3" class="section"> 137 <h1>第三章</h1> 138 </div> 139 </div> 140 </div> 141 142 </div> 143 <script> 144 function ScrollEvent(){ 145 var bodyScrollTop = document.body.scrollTop; 146 if(bodyScrollTop>50){ 147 document.getElementsByClassName('catalog')[0].classList.add('fixed'); 148 }else{ 149 document.getElementsByClassName('catalog')[0].classList.remove('fixed'); 150 } 151 152 } 153 </script> 154 </body> 155 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 9 body{ 10 margin: 0px; 11 } 12 img { 13 border: 0; 14 } 15 ul{ 16 padding: 0; 17 margin: 0; 18 list-style: none; 19 } 20 h1{ 21 padding: 0; 22 margin: 0; 23 } 24 .clearfix:after { 25 content: "."; 26 display: block; 27 height: 0; 28 clear: both; 29 visibility: hidden; 30 } 31 32 .wrap{ 33 width: 980px; 34 margin: 0 auto; 35 } 36 37 .pg-header{ 38 background-color: #303a40; 39 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 40 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 41 box-shadow: 0 2px 5px rgba(0,0,0,.2); 42 } 43 .pg-header .logo{ 44 float: left; 45 padding:5px 10px 5px 0px; 46 } 47 .pg-header .logo img{ 48 vertical-align: middle; 49 width: 110px; 50 height: 40px; 51 52 } 53 .pg-header .nav{ 54 line-height: 50px; 55 } 56 .pg-header .nav ul li{ 57 float: left; 58 } 59 .pg-header .nav ul li a{ 60 display: block; 61 color: #ccc; 62 padding: 0 20px; 63 text-decoration: none; 64 font-size: 14px; 65 } 66 .pg-header .nav ul li a:hover{ 67 color: #fff; 68 background-color: #425a66; 69 } 70 .pg-body{ 71 72 } 73 .pg-body .catalog{ 74 position: absolute; 75 top:60px; 76 width: 200px; 77 background-color: #fafafa; 78 bottom: 0px; 79 } 80 .pg-body .catalog.fixed{ 81 position: fixed; 82 top:10px; 83 } 84 85 .pg-body .catalog .catalog-item.active{ 86 color: #fff; 87 background-color: #425a66; 88 } 89 90 .pg-body .content{ 91 position: absolute; 92 top:60px; 93 width: 700px; 94 margin-left: 210px; 95 background-color: #fafafa; 96 overflow: auto; 97 } 98 .pg-body .content .section{ 99 height: 500px; 100 border: 1px solid red; 101 } 102 </style> 103 <body onscroll="ScrollEvent();"> 104 <div class="pg-header"> 105 <div class="wrap clearfix"> 106 <div class="logo"> 107 <a href="#"> 108 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> 109 </a> 110 </div> 111 <div class="nav"> 112 <ul> 113 <li> 114 <a href="#">首页</a> 115 </li> 116 <li> 117 <a href="#">功能一</a> 118 </li> 119 <li> 120 <a href="#">功能二</a> 121 </li> 122 </ul> 123 </div> 124 125 </div> 126 </div> 127 <div class="pg-body"> 128 <div class="wrap"> 129 <div class="catalog" id="catalog"> 130 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 131 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 132 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 133 </div> 134 <div class="content" id="content"> 135 <div menu="function1" class="section"> 136 <h1>第一章</h1> 137 </div> 138 <div menu="function2" class="section"> 139 <h1>第二章</h1> 140 </div> 141 <div menu="function3" class="section"> 142 <h1>第三章</h1> 143 </div> 144 </div> 145 </div> 146 147 </div> 148 <script> 149 function ScrollEvent(){ 150 var bodyScrollTop = document.body.scrollTop; 151 if(bodyScrollTop>50){ 152 document.getElementsByClassName('catalog')[0].classList.add('fixed'); 153 }else{ 154 document.getElementsByClassName('catalog')[0].classList.remove('fixed'); 155 } 156 157 var content = document.getElementById('content'); 158 var sections = content.children; 159 for(var i=0;i<sections.length;i++){ 160 var current_section = sections[i]; 161 162 // 当前标签距离顶部绝对高度 163 var scOffTop = current_section.offsetTop + 60; 164 165 // 当前标签距离顶部，相对高度 166 var offTop = scOffTop - bodyScrollTop; 167 168 // 当前标签高度 169 var height = current_section.scrollHeight; 170 171 if(offTop<0 && -offTop < height){ 172 // 当前标签添加active 173 // 其他移除 active 174 var menus = document.getElementById('catalog').children; 175 var current_menu = menus[i]; 176 current_menu.classList.add('active'); 177 for(var j=0;j<menus.length;j++){ 178 if(menus[j] == current_menu){ 179 180 }else{ 181 menus[j].classList.remove('active'); 182 } 183 } 184 break; 185 } 186 187 } 188 189 190 } 191 </script> 192 </body> 193 </html>
1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <style> 8 9 body{ 10 margin: 0px; 11 } 12 img { 13 border: 0; 14 } 15 ul{ 16 padding: 0; 17 margin: 0; 18 list-style: none; 19 } 20 h1{ 21 padding: 0; 22 margin: 0; 23 } 24 .clearfix:after { 25 content: "."; 26 display: block; 27 height: 0; 28 clear: both; 29 visibility: hidden; 30 } 31 32 .wrap{ 33 width: 980px; 34 margin: 0 auto; 35 } 36 37 .pg-header{ 38 background-color: #303a40; 39 -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2); 40 -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2); 41 box-shadow: 0 2px 5px rgba(0,0,0,.2); 42 } 43 .pg-header .logo{ 44 float: left; 45 padding:5px 10px 5px 0px; 46 } 47 .pg-header .logo img{ 48 vertical-align: middle; 49 width: 110px; 50 height: 40px; 51 52 } 53 .pg-header .nav{ 54 line-height: 50px; 55 } 56 .pg-header .nav ul li{ 57 float: left; 58 } 59 .pg-header .nav ul li a{ 60 display: block; 61 color: #ccc; 62 padding: 0 20px; 63 text-decoration: none; 64 font-size: 14px; 65 } 66 .pg-header .nav ul li a:hover{ 67 color: #fff; 68 background-color: #425a66; 69 } 70 .pg-body{ 71 72 } 73 .pg-body .catalog{ 74 position: absolute; 75 top:60px; 76 width: 200px; 77 background-color: #fafafa; 78 bottom: 0px; 79 } 80 .pg-body .catalog.fixed{ 81 position: fixed; 82 top:10px; 83 } 84 85 .pg-body .catalog .catalog-item.active{ 86 color: #fff; 87 background-color: #425a66; 88 } 89 90 .pg-body .content{ 91 position: absolute; 92 top:60px; 93 width: 700px; 94 margin-left: 210px; 95 background-color: #fafafa; 96 overflow: auto; 97 } 98 .pg-body .content .section{ 99 height: 500px; 100 border: 1px solid red; 101 } 102 </style> 103 <body onscroll="ScrollEvent();"> 104 <div class="pg-header"> 105 <div class="wrap clearfix"> 106 <div class="logo"> 107 <a href="#"> 108 <img src="http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn"> 109 </a> 110 </div> 111 <div class="nav"> 112 <ul> 113 <li> 114 <a href="#">首页</a> 115 </li> 116 <li> 117 <a href="#">功能一</a> 118 </li> 119 <li> 120 <a href="#">功能二</a> 121 </li> 122 </ul> 123 </div> 124 125 </div> 126 </div> 127 <div class="pg-body"> 128 <div class="wrap"> 129 <div class="catalog" id="catalog"> 130 <div class="catalog-item" auto-to="function1"><a>第1张</a></div> 131 <div class="catalog-item" auto-to="function2"><a>第2张</a></div> 132 <div class="catalog-item" auto-to="function3"><a>第3张</a></div> 133 </div> 134 <div class="content" id="content"> 135 <div menu="function1" class="section"> 136 <h1>第一章</h1> 137 </div> 138 <div menu="function2" class="section"> 139 <h1>第二章</h1> 140 </div> 141 <div menu="function3" class="section" style="height: 200px;"> 142 <h1>第三章</h1> 143 </div> 144 </div> 145 </div> 146 147 </div> 148 <script> 149 function ScrollEvent(){ 150 var bodyScrollTop = document.body.scrollTop; 151 if(bodyScrollTop>50){ 152 document.getElementsByClassName('catalog')[0].classList.add('fixed'); 153 }else{ 154 document.getElementsByClassName('catalog')[0].classList.remove('fixed'); 155 } 156 157 var content = document.getElementById('content'); 158 var sections = content.children; 159 for(var i=0;i<sections.length;i++){ 160 var current_section = sections[i]; 161 162 // 当前标签距离顶部绝对高度 163 var scOffTop = current_section.offsetTop + 60; 164 165 // 当前标签距离顶部，相对高度 166 var offTop = scOffTop - bodyScrollTop; 167 168 // 当前标签高度 169 var height = current_section.scrollHeight; 170 171 if(offTop<0 && -offTop < height){ 172 // 当前标签添加active 173 // 其他移除 active 174 175 // 如果已经到底部，现实第三个菜单 176 // 文档高度 ＝ 滚动高度 + 视口高度 177 178 var a = document.getElementsByClassName('content')[0].offsetHeight + 60; 179 var b = bodyScrollTop + document.documentElement.clientHeight; 180 console.log(a+60,b); 181 if(a == b){ 182 var menus = document.getElementById('catalog').children; 183 var current_menu = document.getElementById('catalog').lastElementChild; 184 current_menu.classList.add('active'); 185 for(var j=0;j<menus.length;j++){ 186 if(menus[j] == current_menu){ 187 188 }else{ 189 menus[j].classList.remove('active'); 190 } 191 } 192 }else{ 193 var menus = document.getElementById('catalog').children; 194 var current_menu = menus[i]; 195 current_menu.classList.add('active'); 196 for(var j=0;j<menus.length;j++){ 197 if(menus[j] == current_menu){ 198 199 }else{ 200 menus[j].classList.remove('active'); 201 } 202 } 203 } 204 break; 205 } 206 } 207 } 208 </script> 209 </body> 210 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>返回顶部</title> 6 <style> 7 .back{ 8 position: fixed; 9 right: 20px; 10 bottom: 20px; 11 color: green; 12 } 13 .hide{ 14 display: none; 15 } 16 </style> 17 </head> 18 <body onscroll="BodyScroll();"> 19 <!--onscroll获取每次鼠标滚动操作--> 20 <div style="height: 2000px;background-color: #dddddd;"></div> 21 <div id="back" class="back hide" onclick="BackTop();">返回顶部</div> 22 <script> 23 function BackTop() { 24 document.body.scrollTop = 0; 25 } 26 function BodyScroll() { 27 var s = document.body.scrollTop; 28 // 获取滚轮距离顶部的大小 29 var t = document.getElementById('back'); 30 if(s >= 300){ 31 t.classList.remove('hide'); 32 }else{ 33 t.classList.add('hide'); 34 } 35 } 36 </script> 37 </body> 38 </html>
7、提交表单
|
1
|
document.getElementById('from').submit() |
如果标签直接的属性和自定义的事件同时出现先执行那个操作，答案是定义的事件先执行。请看下面的例子：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <a href="http://www.baidu.com" onclick="ClickB();">百度</a> 9 <form> 10 <input type="text" /> 11 <input type="submit" onclick="ClickB();" /> 12 </form> 13 14 <input type="checkbox" onclick="ClickB();" /> 15 <script> 16 function ClickB(){ 17 alert(123); 18 } 19 </script> 20 </body> 21 </html>
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <form action="http://www.baidu.com"> 9 <input type="text" id="username" /> 10 <input type="submit" value="提交" onclick="return SubmitForm();" /> 11 </form> 12 <script> 13 function SubmitForm(){ 14 var user = document.getElementById('username'); 15 if(user.value.length > 0 ){ 16 // 可以提交 17 return true; 18 }else{ 19 // 不可提交，提示错误 20 alert('用户名输入不能为空'); 21 return false; 22 } 23 } 24 </script> 25 </body> 26 </html>
8、其他操作
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
console.log //输出框alert //弹出框confirm //确认框 // URL和刷新location.href //获取URLlocation.href = "url" //重定向location.reload() //重新加载 // 定时器setInterval //多次定时器clearInterval //清除多次定时器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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <div id="status" style="color: red;"> </div> <input type="submit" onclick="DeleteStatus();" value="删除" /> <script> function DeleteStatus(){ var s = document.getElementById('status'); s.innerText = '删除成功'; setTimeout(function(){ s.innerText = ""; },5000); //单位毫秒 } </script></body></html> |
三、事件（event）
| 属性 | 此事件发生在何时... |
|---|---|
| onabort | 图像的加载被中断。 |
| onblur | 元素失去焦点。 |
| onchange | 域的内容被改变。 |
| onclick | 当用户点击某个对象时调用的事件句柄。 |
| ondblclick | 当用户双击某个对象时调用的事件句柄。 |
| onerror | 在加载文档或图像时发生错误。 |
| onfocus | 元素获得焦点。 |
| onkeydown | 某个键盘按键被按下。 |
| onkeypress | 某个键盘按键被按下并松开。 |
| onkeyup | 某个键盘按键被松开。 |
| onload | 一张页面或一幅图像完成加载。 |
| onmousedown | 鼠标按钮被按下。 |
| onmousemove | 鼠标被移动。 |
| onmouseout | 鼠标从某元素移开。 |
| onmouseover | 鼠标移到某元素之上。 |
| onmouseup | 鼠标按键被松开。 |
| onreset | 重置按钮被点击。 |
| onresize | 窗口或框架被重新调整大小。 |
| onselect | 文本被选中。 |
| onsubmit | 确认按钮被点击。 |
| onunload | 用户退出页面。 |
对于事件需要注意的要点：
-
this：当前正在操作的标签
-
event：封装了当前事件内容
-
事件链以及跳出
那个鼠标按钮被点击：
|
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
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <div onmousedown="whichButton(event)" style="border: 2px solid red;height: 200px;"> </div> <script type="text/javascript"> function whichButton(event){ var btnNum = event.button; if (btnNum==2){ alert("您点击了鼠标右键！") }else if(btnNum==0){ alert("您点击了鼠标左键！") }else if(btnNum==1){ alert("您点击了鼠标中键！"); }else{ alert("您点击了" + btnNum+ "号键，我不能确定它的名称。"); } } </script></body></html> |
获取光标的坐标：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><body> <div onmousedown="show_coords(event)" style="border: 2px solid red;height: 200px;"> </div> <script> function show_coords(event){ x=event.clientX; y=event.clientY; alert("X 坐标: " + x + ", Y 坐标: " + y); } </script></body></html> |
被按的按键的Unicode是：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <script> function show_coords(event){ alert(event.keyCode); } </script></head><body onkeyup="show_coords(event)"></body></html> |
更多DOM的使用方法请参考：
