文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。DOM属于浏览器，而不是JavaScript语言规范里的规定的核心内容。
命名规则：
驼峰式命名法：coHuiTop
查找元素
1、直接查找
document.getElementById 根据ID获取一个标签 document.getElementsByName 根据name属性获取标签集合 document.getElementsByClassName 根据class属性获取标签集合 document.getElementsByTagName 根据标签名获取标签集合
2、间接查找
parentNode // 父节点 childNodes // 所有子节点 firstChild // 第一个子节点 lastChild // 最后一个子节点 nextSibling // 下一个兄弟节点 previousSibling // 上一个兄弟节点 parentElement // 父节点标签元素 children // 所有子标签 firstElementChild // 第一个子标签元素 lastElementChild // 最后一个子标签元素 nextElementtSibling // 下一个兄弟标签元素 previousElementSibling // 上一个兄弟标签元素
操作
1、内容
innerText 文本 outerText innerHTML HTML全内容 innerHTML value 获取与设置值 input value获取和设置文本内容 select(selectedIndex索引某一选项位置) value获取和设置选项 textarea value获取和设置文本内容
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--捕获光标焦点onfocus，包括tab键，而不仅是点击事件，移除焦点onblur-->
<div style="width: 500px; margin: 0 auto;">
<!--<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" value="请输入关键字" />-->
<!--placeholder-->
<input id="i1" onfocus="Focus();" onblur="Blur();" type="text" placeholder="请输入关键字" />
</div>
<script>
function Focus() {
//下面这段无法实现,需要先实例化对象
/*
var current_value = document.getElementById('i1').value;
if(current_value == '请输入关键字'){
current_value = '';
}
*/
var current_id = document.getElementById('i1');
var current_value = current_id.value;
var current_value2 = current_id.placeholder;
if(current_value === '请输入关键字' || current_value2 === '请输入关键字'){
current_id.value = '';
current_id.placeholder = '';
}
}
function Blur() {
var current_id = document.getElementById('i1');
var current_value = current_id.value;
var current_value2 = current_id.placeholder;
// if(current_value === '' || current_value2 === ''){
if(current_value.length == 0 || current_value2.length == 0){
current_id.value = '请输入关键字';
current_id.placeholder = '请输入关键字';
}
}
</script>
</body>
</html>
2、属性
attributes // 获取所有标签属性
setAttribute(key,value) // 设置标签属性
getAttribute(key) // 获取指定标签属性
removeAttribute(key) // 删除标签属性
/*
var atr = document.createAttribute("class");
atr.nodeValue="democlass";
document.getElementById('n1').setAttributeNode(atr);
*/
1 <!DOCTYPE html>
2 <html>
3 <head lang="en">
4 <meta charset="UTF-8">
5 <title></title>
6 </head>
7 <body>
8 <input type="button" value="全选" onclick="CheckAll();"/>
9 <input type="button" value="取消" onclick="CancelAll();"/>
10 <input type="button" value="反选" onclick="ReverseCheck();"/>
11
12 <table border="1" >
13 <thead>
14
15 </thead>
16 <tbody id="tb">
17 <tr>
18 <td><input type="checkbox" /></td>
19 <td>111</td>
20 <td>222</td>
21 </tr>
22 <tr>
23 <td><input type="checkbox" /></td>
24 <td>111</td>
25 <td>222</td>
26 </tr>
27 <tr>
28 <td><input type="checkbox" /></td>
29 <td>111</td>
30 <td>222</td>
31 </tr>
32 <tr>
33 <td><input type="checkbox" /></td>
34 <td>111</td>
35 <td>222</td>
36 </tr>
37 </tbody>
38 </table>
39 <script>
40 function CheckAll(ths){
41 var tb = document.getElementById('tb');
42 var trs = tb.childNodes;
43 for(var i =0; i<trs.length; i++){
44
45 var current_tr = trs[i];
46 if(current_tr.nodeType==1){
47 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
48 inp.checked = true;
49 }
50 }
51 }
52
53 function CancelAll(ths){
54 var tb = document.getElementById('tb');
55 var trs = tb.childNodes;
56 for(var i =0; i<trs.length; i++){
57
58 var current_tr = trs[i];
59 if(current_tr.nodeType==1){
60 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
61 inp.checked = false;
62 }
63 }
64 }
65
66 function ReverseCheck(ths){
67 var tb = document.getElementById('tb');
68 var trs = tb.childNodes;
69 for(var i =0; i<trs.length; i++){
70 var current_tr = trs[i];
71 if(current_tr.nodeType==1){
72 var inp = current_tr.firstElementChild.getElementsByTagName('input')[0];
73 if(inp.checked){
74 inp.checked = false;
75 }else{
76 inp.checked = true;
77 }
78 }
79 }
80 }
81
82 </script>
83 </body>
84 </html>
3、class操作（样式集合操作）
className // 获取所有类名 classList.remove(cls) // 删除指定类 classList.add(cls) // 添加类
4、标签操作
a.创建标签（jQuery中没有创建标签的功能）
// 方式一
var tag = document.createElement('a')
tag.innerText = "uson"
tag.className = "c1"
tag.href = "http://www.cnblogs.com/uson"
# 注意：该方法创建标签的第一个参数只能是：'beforeBegin'、'afterBegin'、'beforeEnd'、'afterEnd'，其中之一
// 方式二
var tag = "<a class='c1' href='http://www.cnblogs.com/uson'>uson</a>"
1)字符串形式创建法：
<input type="button" value="+" onclick="AddEle(id);" />
<!--无法获取到下面的id-->
<div id="i1">
<!-- 在当前div下自动创建input标签 -->
<p><input type="text" /></p>
</div>
<script>
function AddEle(nid) {
var tag = "<p><input type='text' /></p>";
document.getElementById('i1').insertAdjacentHTML("beforeEnd", tag); //添加的是字符串
}
</script>
2)对象形式创建法：
<input type="button" value="+" onclick="AddEle();" />
<!--无法获取到下面的id-->
<div id="i1">
<!-- 在当前div下自动创建input标签 -->
<p><input type="text" /></p>
</div>
<script>
function AddEle() {
var tag = document.createElement('input');
tag.setAttribute('type', 'text');
tag.style.fontSize = '16px';
tag.style.color = 'red';
tag.setAttribute('value', '第二种创建标签的方式');
//创建p标签,包裹input标签
var tagP = document.createElement('p');
//将tag标签放进p标签里面
// document.getElementById('i1').appendChild(tag);
tagP.appendChild(tag);
//p标签放进id所在的div里面
document.getElementById('i1').appendChild(tagP); // 添加的是对象
}
</script>
b.操作标签
// 方式一
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、样式操作（单个样式操作）
var obj = document.getElementById('i1')
// 驼峰式命名
obj.style.fontSize = "32px"; // font-size
obj.style.backgroundColor = "red"; // background-color
1 <input onfocus="Focus(this);" onblur="Blur(this);" id="search" value="请输入关键字" style="color: gray;" />
2
3 <script>
4 function Focus(ths){
5 ths.style.color = "black";
6 if(ths.value == '请输入关键字' || ths.value.trim() == ""){
7
8 ths.value = "";
9 }
10 }
11
12 function Blur(ths){
13 if(ths.value.trim() == ""){
14 ths.value = '请输入关键字';
15 ths.style.color = 'gray';
16 }else{
17 ths.style.color = "black";
18 }
19 }
20 </script>
6、位置操作
总文档高度
document.documentElement.offsetHeight
当前文档占屏幕高度
document.documentElement.clientHeight
自身高度
tag.offsetHeight
距离上级定位高度
tag.offsetTop
父定位标签
tag.offsetParent
滚动高度
tag.scrollTop
/*
clientHeight -> 可见区域：height + padding
clientTop -> border高度
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
205
206
207
208 break;
209 }
210
211 }
212
213
214 }
215 </script>
216 </body>
217 </html>
7、提交表单（任意标签都可以通过DOM进行表单提交）
document.geElementById('form').submit()
<form id="f1" action="http://www.cohui.top">
<input type="text" />
<!--<input type="submit" value="提交" />-->
<a onclick="submitTb();">通过a标签提交表单</a>
</form>
<script>
function submitTb(){
document.getElementById('f1').submit();
}
</script>
8、其他操作
console.log 输出框 alert 弹出框 confirm 确认框 true/false // URL和刷新 location.href 获取当前的URL location.href = "url" 重定向，跳转（设置当前url） location.reload() 重新加载，页面刷新 《===》location.href=location.href // 定时器 setInterval 多次定时器，永远执行 clearInterval 清除多次定时器 setTimeout 单次定时器，仅执行一次 clearTimeout 清除单次定时器
confirm示例：
<input type="button" value="删除" onclick="DelConfirm();" />
<script>
function DelConfirm() {
var f = confirm("确定要永久删除吗？");
console.log(f);
//确定：true
//取消：false
}
</script>
setInterval示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器设置与清除</title>
</head>
<body>
<div id="d1"></div>
<input type="button" value="删除" onclick="DelEle();" />
<script>
function DelEle(){
document.getElementById('d1').innerText = '好的';
//定时器
var st = setInterval(function func() {
document.getElementById('d1').innerText = '已删除';
clearInterval(st); //如果放外面，函数执行时间短于1s，清除定时器先被执行
// 如果没有清除该定时器，那么：
//每1s后都会打印“已删除”，在2s后，还会循环打印“已删除”，不是我们想要的
setInterval(
function func() {
document.getElementById('d1').innerText = '';
}, 2000)
}, 500);
}
</script>
</body>
</html>
setTimeout示例：（模拟qq邮箱删除功能）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器设置与清除</title>
</head>
<body>
<div id="d1"></div>
<input type="button" value="删除" onclick="DelEle();" />
<script>
function DelEle(){
document.getElementById('d1').innerText = '已删除';
//定时器超时，仅执行一次
var st = setTimeout(function func() {
document.getElementById('d1').innerText = '';
}, 2000);
}
</script>
</body>
</html>
事件
对于事件需要注意的要点：
- this
- event
- 事件链以及跳出
this标签当前正在操作的标签，event封装了当前事件的内容。
实例：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset='utf-8' />
5 <title></title>
6
7 <style>
8 .gray{
9 color:gray;
10 }
11 .black{
12 color:black;
13 }
14 </style>
15 <script type="text/javascript">
16 function Enter(){
17 var id= document.getElementById("tip")
18 id.className = 'black';
19 if(id.value=='请输入关键字'||id.value.trim()==''){
20 id.value = ''
21 }
22 }
23 function Leave(){
24 var id= document.getElementById("tip")
25 var val = id.value;
26 if(val.length==0||id.value.trim()==''){
27 id.value = '请输入关键字'
28 id.className = 'gray';
29 }else{
30 id.className = 'black';
31 }
32 }
33 </script>
34 </head>
35 <body>
36 <input type='text' class='gray' id='tip' value='请输入关键字' onfocus='Enter();' onblur='Leave();'/>
37 </body>
38 </html>
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset='utf-8' >
5 <title>欢迎blue shit莅临指导 </title>
6 <script type='text/javascript'>
7 function Go(){
8 var content = document.title;
9 var firstChar = content.charAt(0)
10 var sub = content.substring(1,content.length)
11 document.title = sub + firstChar;
12 }
13 setInterval('Go()',1000);
14 </script>
15 </head>
16 <body>
17 </body>
18 </html>
本节笔记
Dom
1、找到标签
获取单个元素 document.getElementById('i1')
获取多个元素（列表）document.getElementsByTagName('div')
获取多个元素（列表）document.getElementsByClassName('c1')
a. 直接找：$('#id') $('.c1').siblings() jquery
document.getElementById 根据ID获取一个标签
document.getElementsByName 根据name属性获取标签集合
document.getElementsByClassName 根据class属性获取标签集合
document.getElementsByTagName 根据标签名获取标签集合
b. 间接找
tag = document.getElementById('i1')
parentElement // 父节点标签元素
children // 所有子标签
firstElementChild // 第一个子标签元素
lastElementChild // 最后一个子标签元素
nextElementtSibling // 下一个兄弟标签元素
previousElementSibling // 上一个兄弟标签元素
2、操作标签
a. innerText
获取标签中的文本内容
标签.innerText
对标签内部文本进行重新赋值
标签.innerText = ""
b. className
tag.className =》 直接整体做操作
tag.classList.add('样式名') 添加指定样式
tag.classList.remove('样式名') 删除指定样式
PS：
<div onclick='func();'>点我</div>
<script>
function func(){
}
</script>
c. checkbox
获取值
checkbox对象.checked # tag.checked
设置值
checkbox对象.checked = true
d. classList
事件：
<div onclick='函数(123)'></div>
<script>
。。。。
</script>
定时器
setInterval('函数()', 4000) # 4000ms = 4s
其他：
alert() # 弹窗
console.log() # 终端打印，典例：百度招聘
实例：
莅临指导
多选
模态对话框
左侧菜单
返回顶部
作业：
1、登录、注册，练习：position
2、后台管理页面
- 左侧菜单
- 右边表格，全选反向，模态框，返回顶部
3、商城页面
左侧菜单实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>左侧菜单功能实现</title>
<!--
思路：
//所有item的子菜单全部隐藏
//当前id展开子菜单
-->
<style>
.pg-body{
width: 300px;
height: 400px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.c1{
margin-top: 10px;
}
.item .menu{
background-color: #1c5a9c;
width: 80px;
color: #ffffff;
margin: 0 auto;
}
.item .hide{
display: none;
}
</style>
</head>
<body>
<div class="pg-body">
<div class="c1">
<div class="item">
<div id="i1" class="menu" onclick="ChangeMenu('i1');">所有课程</div>
<div class="content hide">
<div>Python</div>
<div>Linux</div>
<div>C++</div>
<div>Java</div>
</div>
</div>
<div class="item">
<div id="i2" class="menu" onclick="ChangeMenu('i2');">所有老师</div>
<div class="content hide">
<div>Alex</div>
<div>Uson</div>
<div>Cohui</div>
<div>Jian</div>
</div>
</div>
<div class="item">
<div id="i3" class="menu" onclick="ChangeMenu('i3');">所有校区</div>
<div class="content hide">
<div>上海校区</div>
<div>北京校区</div>
</div>
</div>
<div class="item">
<div id="i4" class="menu" onclick="ChangeMenu('i4');">所有学生</div>
<div class="content hide">
<div>uson</div>
<div>cohui</div>
</div>
</div>
</div>
</div>
<script>
function ChangeMenu(cid) {
// console.log(cid) // = print
//找到所有项目item的共同父亲
var p_class = document.getElementById(cid).parentElement.parentElement;
// console.log(p_class);
//获取c1所有的孩子item:列表
var list_item = p_class.children;
// console.log(list_item);
//HTMLCollection(4) [div.item, div.item, div.item, div.item]
//将所有的孩子content内容都设置成默认为：hide
// console.log(list_item.length) //4
for(var i=0; i < list_item.length; i++){
//获取item的第二个孩子content:list_item[i].children[1]
//将所有item的第二个孩子content隐藏起来，即隐藏子菜单
list_item[i].children[1].classList.add('hide');
// console.log(list_item[i]);
}
//获取当前id的下一个兄弟content移除hide属性，即展开子菜单
document.getElementById(cid).nextElementSibling.classList.remove('hide');
//或者
// current_menu.nextElementSibling.classList.remove('hide');
current_menu.nextElementSibling.className='content';
//className: 重新赋值
}
</script>
</body>
</html>
添加（模态对话框）、全选、取消、反选：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-body{
width: 500px;
height: 300px;
border: 1px solid red;
margin: 0 auto;
text-align: center;
}
.pg-body .body-tb{
display: inline-block;
}
/*添加-模态对话框样式*/
.hide{
display: none;
}
.c1{
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: black;
opacity: 0.3;
z-index: 9;
}
.c2{
width: 500px;
height: 200px;
background-color: #FEFEFE;
position: fixed;
top: 50%;
left: 50%;
margin-left: -250px;
margin-top: -100px;
z-index: 10;
}
</style>
</head>
<body>
<div class="pg-body">
<p>
<input type="button" value="添加" onclick="Addmodel();" />
<input type="button" value="全选" onclick="Chooseall();" />
<input type="button" value="取消" onclick="Cancleall();" />
<input type="button" value="反选" onclick="reverseall();" />
</p>
<!--<div style="width: 200px; height: 200px; margin: 0 auto; border: 1px dotted blueviolet">-->
<!--居中显示-->
<!--div块级标签，独占一行-->
<!--不想设置固定宽度，div默认撑不起来，根据内容，margin:0 auto无法生效，也就无法居中-->
<!--display:inline-block-->
<!--div具有多个属性：1）独占一行；2）行内标签，根据内容自撑起来：text-align生效-->
<div class="body-tb"> <!-- style="display: inline-block;" -->
<table border="1">
<thead>
<tr>
<th>选择</th>
<th>课程名</th>
<th>学习成绩</th>
<th>就业薪资</th>
</tr>
</thead>
<tbody id="c1">
<tr>
<td>
<input type="checkbox" />
</td>
<td>Python</td>
<td>99</td>
<td>18000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Linux</td>
<td>98</td>
<td>15000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>C</td>
<td>90</td>
<td>19000</td>
</tr>
<tr>
<td>
<input type="checkbox" />
</td>
<td>Java</td>
<td>98</td>
<td>19000</td>
</tr>
</tbody>
</table>
</div>
</div>
<!--遮罩层开始-->
<div id="i1" class="c1 hide"></div>
<!--遮罩层结束-->
<!--弹窗开始-->
<div id="i2" class="c2 hide">
<div>
课程名：<input type="text" name="host" />
</div>
<div>
学习成绩：<input type="text" name="grade" />
</div>
<div>
就业薪资：<input type="text" name="salary" />
</div>
<div id="i3" class="c3 hide">
<input type="button" value="取消" onclick="Delmodel();"/>
<input type="button" value="确定" />
</div>
</div>
<!--弹窗结束-->
<script>
// js弹窗特效
function Addmodel(){
//找到class列表，把hide标签（display:none）删除
document.getElementById('i1').classList.remove('hide');
document.getElementById('i2').classList.remove('hide');
document.getElementById('i3').classList.remove('hide');
}
function Delmodel(){
//找到class列表，把hide标签（display:none）添加
document.getElementById('i1').classList.add('hide');
document.getElementById('i2').classList.add('hide');
document.getElementById('i3').classList.add('hide');
}
function Chooseall() {
//获取tbody内容
var tbodys = document.getElementById('c1');
//获取tbody下面的孩子：tr列表
var list_tr = tbodys.children;
//循环列表
for(var i = 0; i < list_tr.length; i++){
//当前列表中的第i个元素tr, <tr></tr>
var current_tr = list_tr[i];
//获取tr下面的孩子：td列表
var list_td = current_tr.children;
//获取当前td列表中的第一个元素<td></td>
var current_td = list_td[0];
//获取当前td下的孩子：input标签列表
//以及：第一个input元素
//tag = <input type="checkbox" />
tag = current_td.children[0];
//添加属性：checked = 'checked' :ture
tag.checked = true;
}
}
function Cancleall() {
//获取tbody内容
var tbodys = document.getElementById('c1');
//获取tbody下面的孩子：tr列表
var list_tr = tbodys.children;
//循环列表
for(var i = 0; i < list_tr.length; i++){
//当前列表中的第i个元素tr, <tr></tr>
var current_tr = list_tr[i];
//获取tr下面的孩子：td列表
var list_td = current_tr.children;
//获取当前td列表中的第一个元素<td></td>
var current_td = list_td[0];
//获取当前td下的孩子：input标签列表
//以及：第一个input元素
//tag = <input type="checkbox" />
tag = current_td.children[0];
//添加属性：checked = 'checked' :ture
tag.checked = false;
}
}
function reverseall() {
//获取tbody内容
var tbodys = document.getElementById('c1');
//获取tbody下面的孩子：tr列表
var list_tr = tbodys.children;
//循环列表
for(var i = 0; i < list_tr.length; i++){
//当前列表中的第i个元素tr, <tr></tr>
var current_tr = list_tr[i];
//获取tr下面的孩子：td列表,并获取当前td列表中的第一个td元素,以及获取第一个input孩子
var tag = current_tr.children[0].children[0];
//判断：
// if(tag.checked == false){
// //添加属性：checked = 'checked' :ture
// tag.checked = true;
// }else{
// tag.checked = false;
// }
//或者判断句这样写：
if(tag.checked){ //true
tag.checked = false;
}else{
tag.checked = true;
}
}
}
</script>
</body>
</html>
行为、结构、样式相分离的示例代码：
1、DOM0
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onmouse系列事件2 - dom0</title>
<style>
.pg-body{
width: 400px;
height: 400px;
margin: 0 auto;
/*border: 1px solid red;*/
text-align: center;
}
.content{
display: inline-block;
/*margin: auto;*/
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div class="pg-body">
<div class="content">
<table border="1">
<thead>
<tr onmouseover="highLight(0);" onmouseout="lowLight(0);">
<th>报名课程</th>
<th>学员姓名</th>
<th>课程进度</th>
</tr>
</thead>
<tbody>
<tr onmouseover="highLight(1);" onmouseout="lowLight(1);">
<td>Python</td>
<td>Uson</td>
<td>第16周</td>
</tr>
<tr onmouseover="highLight(2);" onmouseout="lowLight(2);">
<td>Python</td>
<td>Cohui</td>
<td>第1周</td>
</tr>
<tr onmouseover="highLight(3);" onmouseout="lowLight(3);">
<td>Linux</td>
<td>Uson</td>
<td>已结业</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
function highLight(n) {
// this：这里，不可以使用this，this代指的是全局对象，即Windows
var tr_list = document.getElementsByTagName('tr');
// console.log(tr_list);
//鼠标滑过，改变背景色
tr_list[n].style.backgroundColor = 'red';
}
function lowLight(n) {
var tr_list = document.getElementsByTagName('tr');
//鼠标滑过，高亮显示
tr_list[n].style.backgroundColor = '';
}
</script>
</body>
</html>
2、DOM1
<!DOCTYPE html>
<html lang="en">
<!--目前为止，仅本代码才是：行为、样式、结构相分离-->
<!-- js、 css、 html -->
<head>
<meta charset="UTF-8">
<title>onmouse系列事件 - dom1</title>
<style>
.pg-body{
width: 400px;
height: 400px;
margin: 0 auto;
/*border: 1px solid red;*/
text-align: center;
}
.content{
display: inline-block;
/*margin: auto;*/
/*border: 1px solid red;*/
}
</style>
</head>
<body>
<div class="pg-body">
<div class="content">
<table border="1">
<thead>
<tr>
<th>报名课程</th>
<th>学员姓名</th>
<th>课程进度</th>
</tr>
</thead>
<tbody>
<tr>
<td>Python</td>
<td>Uson</td>
<td>第16周</td>
</tr>
<tr>
<td>Python</td>
<td>Cohui</td>
<td>第1周</td>
</tr>
<tr>
<td>Linux</td>
<td>Uson</td>
<td>已结业</td>
</tr>
</tbody>
</table>
</div>
</div>
<script>
var tr_list = document.getElementsByTagName('tr');
for(var i = 0; i < tr_list.length; i++){
//给每一个tr绑定一个onmouseover事件
tr_list[i].onmouseover = function () {
// tr_list[i].style.backgroundColor = 'red';
//Error: Uncaught TypeError: Cannot read property 'style' of undefined
// at HTMLTableRowElement.tr_list.<computed>.onmouseover
// 错误分析(问题在于作用域)：
// 因为代码自上而下执行，事件发生之前，局部变量和事件函数已经被声明，i早已循环到最大值；
// 当鼠标事件发生时，直接触发各自的onmouseover/onmouseout事件;
// 所以，用this即可，表示当前谁触发的，就指向谁。
this.style.backgroundColor = 'red';
//谁调用的这个函数，this就指向谁
};
//给每一个tr绑定一个onmouseout事件
tr_list[i].onmouseout = function (){
this.style.backgroundColor = '';
};
}
</script>
</body>
</html>
小结：
事件：onclick、onblur、onfocus、onmouseover、onmouseout。。。
绑定事件三种方式：
a、直接标签绑定 onclick = "xxoo();"
<input id='xo' type='button' onclick="xxoo();" />
反例：
function xxoo(){
// this：代指全局对象，即Windows
};
推荐：
<input type='button' onclick="xxoo(this);" />
function xxoo(ths){
// ths：代指当前标签，即不用再去获取标签了
};
b、先获取DOM对象，然后进行绑定
推荐
<input id='xo' type='button' />
document.getElementById('xo').onclick=function(){
// this: 代指当前触发事件的标签
};
c、DOM2：冒泡与捕捉
给一个标签同时绑定两个事件
<input id='xo' type='button' />
document.getElementById('xo').addEventListener('click', function (){console.log('uson')});
document.getElementById('xo').addEventListener('click', function (){console.log('cohui')});
另外：
mymain.addEventListener('click', function (){console.log('main')}, true); 默认是false
mycontent.addEventListener('click', function (){console.log('content')}, true);
ript>
冒泡false与捕捉true实例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件捕捉与冒泡 - DOM2</title>
<style>
#main{
width: 300px;
height: 300px;
background-color: #006dcc;
}
#content{
width: 200px;
height: 200px;
background-color: #ac2925;
}
</style>
</head>
<body>
<div id="main">
<div id="content"></div>
</div>
<script>
var mymain = document.getElementById('main');
var mycontent = document.getElementById('content');
//false(默认): 冒泡 从下往上：先content 后main
// mymain.addEventListener('click', function (){console.log('main')}, false);
// mycontent.addEventListener('click', function (){console.log('content')}, false);
//true: 捕捉 从上往下：先main 后content
mymain.addEventListener('click', function (){console.log('main')}, true);
mycontent.addEventListener('click', function (){console.log('content')}, true);
</script>
</body>
</html>
手册推荐：
作用域的词法分析：
(1)
<div style="width: 200px; height: 200px; background-color: blue;" onclick="s1(3);"></div>
<script>
function s1(age){
console.log(age); // 3
}
</script>
(2)
function t1(num){
console.log(num); //3
}
t1(3);
(3)
function t1(age){
console.log(age); //3
var age = 27;
console.log(age); //27
// function ages() {};
console.log(age); //27
}
t1(3);
(4)点击事件，同样适用于该词法分析
<div id="i1" style="width: 200px; height: 200px; background-color: red;" onclick="s1(id);"></div>
<script>
function s1(num){
console.log(num); //function num()
var num = 27;
console.log(num);//27
function num() {};
console.log(num); //27
}
</script>
(5)
function s1(num){
console.log(num); //function num(){}
var num = 27;
console.log(num);//27
function num() {}; //优先级实在是太高了
console.log(num); //27
}
s1(3);
(6)
function func() {
console.log(xxoo); // 程序报错
}
func();
(7)
function s1(){
console.log(num); // function num()
function num() {};
}
s1();
(8)
function func() {
console.log(xxoo); // undefined
var xxoo = 'Alex';
}
func();
/*
* 形式参数 - 局部变量 - 函数内声明表达式（优先级最高）
*
* *Active Object ======> AO,找到形式参数添加进去，赋值undefined,有实参就覆盖
* 形式参数：AO.num = undefined AO.num = 3
* 局部变量：分析局部变量时，会看第一步有没有值，有值，就不改变，break下一步；=(3)(4)(5)
如果第一步没有值，有局部变量 AO.num = undefined， break下一步；=(8)
只要没有局部变量 break下一步；=(6)(7)(2)(1)
* 函数声明表达式(既是变量名又是内部函数的函数名)：AO.num = function num(){}
* 作用域链：是不同的函数嵌套
*/
(9)
name = 'alex';
function func(){
var name = 'cohui';
function inner(){
console.log(name);
}
var name = 'USON'; // 覆盖了cohui
return inner;
}
var res = func();
res();
//结果：USON
(10)
name = 'alex';
function func(){
console.log(name); // undefined，不是function inner(){}
var name = 'cohui';
function inner(){
console.log(name);
}
var name = 'USON'; // 覆盖了cohui
return inner;
}
var res = func();
res();
//结果：undefined USON
(11)
name = 'alex';
function func(){
console.log(name); // 是function name(){}，不是undefined
var name = 'cohui';
function name(){
console.log(name);
}
}
(12)
name = 'alex';
function func(){
console.log(name); // undefined
var name = 'cohui';
}
func();
(13)
全局变量是在形参实参分析之前
name = 'alex';
function func(){
console.log(name); // alex
}
func();
后记
.tagName:是DOM的方法===>[0]