javascript操做dom對象

時間  2019-11-19
標籤 javascript dom 對象 欄目 JavaScript 简体版
原文   原文鏈接

什麼叫DOM?javascript

DOM是文檔對象模型(Document Object Model，是基於瀏覽器編程（在本教程中，能夠說就是DHTML編程）的一套API接口，W3C出臺的推薦標準，每一個瀏覽器都有一些細微的差異，其中以Mozilla的瀏覽器最與標準接近。css

DOM屬於瀏覽器，而不是JavaScript語言規範裏的規定的核心內容。html

 

 

查找元素
java

一、直接查找node

 

方法名 描述
getElementById(id) (document) 獲取有指定唯一ID屬性值文檔中的元素
getElementsByTagName_r(name) 返回當前元素中有指定標記名的子元素的數組
document.getElementsByClassName 根據屬性獲取標籤集合
getAttribute(name) 返回元素的屬性值，屬性由name指定

 

1>document.getElementById('id')python

1
2
3
4
5
6
7
8
9
10
< body >
  < div id = "zhang" >
  不帥
  </ div >
  
  < script type = "text/javascript" >
  var i = document.getElementById('zhang'); //查找指定的id
  i.innerText = '很帥'; //innerText修改指定的字符串
  </ script >
</ body >

顯示效果，當咱們打開IE的時候不帥就會被修改成很帥web

2>getElementsByTagName_r(name)編程

1
2
3
4
5
6
7
8
9
10
< body >
  < div name = "zhang" >
  不帥
  </ div >
  
  < script type = "text/javascript" >
  var i = document.getElementByTagNmae('zhang'); //查找指定的name名
  i.innerText = '很帥'; //innerText修改指定的字符串
  </ script >
</ body >

其顯示效果同樣數組

3>document.getElementsByClassName瀏覽器

1
2
3
4
5
6
7
8
9
10
< body >
  < div class = "zhang" >
  不帥
  </ div >
  
  < script type = "text/javascript" >
  var i = document.getElementClassName('zhang'); //查找指定的class名
  i.innerText = '很帥'; //innerText修改指定的字符串
  </ script >
</ body >

二、間接查找

 

屬性名 描述
childNodes 返回當前元素全部子元素的數組
childNodes 返回當前元素的全部子元素
firstChild 返回當前元素的第一個下級子元素
lastChild 返回當前元素的最後一個子元素
nextSibling 返回緊跟在當前元素後面的元素
previousSibling 返回緊跟在當前元素前面的元素
parentElement 返回其父節點標籤元素
children 返回其全部子標籤
firstElementChild 返回第一個子標籤元素
lastElementChild 返回最後一個子標籤元素
nextElementtSibling 返回下一個兄弟標籤元素
previousElementSibling 返回上一個兄弟標籤元素

 

利用XML的強大功能和靈活性，將XML做爲瀏覽器和服務器之間的通訊介質。

操做元素

一、動態建立內容時所用的W3C DOM屬性和方法

 

屬性/方法 描述
document.createElement_x(tagName) 文檔對象上的createElement_x方法能夠建立由tagName指定的元素。若是以串div做爲方法參數，就會生成一個div元素
document.createTextNode(text) 文檔對象的createTextNode方法會建立一個包含靜態文本的節點
<element>.appendChild(childNode) appendChild方法將指定的節點增長到當前元素的子節點列表（做爲一個新的子節點）。
<element>.setAttribute(name, value) 這些方法分別得到和設置元素中name屬性的值
<element>.insertBefore(newNode, targetNode) 將節點newNode做爲當前元素的子節點插到targetNode元素前面
<element>.removeAttribute(name) 這個方法從元素中刪除屬性name
<element>.removeChild(childNode) 這個方法從元素中刪除子元素childNode
<element>.replaceChild(newNode, oldNode) 這個方法將節點oldNode替換爲節點newNode
<element>.hasChildnodes() 這個方法返回一個布爾值，指示元素是否有子元素

 

二、標籤內容

1
2
3
innerText  獲取標籤文本內容
innerHTML  獲取HTML內容
value   獲取值，即form提交表單的值

即實例以下：

1
2
3
4
5
6
7
8
< div class = "zhang" >1111</ div >
< div class = "yan" >2222</ div >
< input class = "lin" type = "text" value = "張巖林" >
< script >
  document.getElementsByClassName("zhang").innertext = 123; // 獲取類名爲zhang的標籤並把內容改成123
  document.getElementsByClassName("yan").innerHTML = 456; //獲取類名爲yan的標籤並把內容改成456
  document.getElementsByClassName("lin").value = "張巖林很帥"; //獲取類名爲lin的標籤並把內容改成張巖林很帥
</ script >

三、屬性

1
2
3
attributes     // 獲取全部標籤屬性
setAttribute(key,value)   // 設置標籤屬性
getAttribute(key)    // 獲取指定標籤屬性

經過自定義屬性能夠作一個全選，反選，取消選擇的案例，代碼以下：

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
<!DOCTYPE html>
<html lang= "en" >
<head>
  <meta charset= "UTF-8" >
  <title>Title</title>
</head>
<body>
<div>
  <input type= "button" value= "全選" onclick= "Checkall();" >
  <input type= "button" value= "取消" onclick= "Cancleall();" >
  <input type= "button" value= "反選" onclick= "recvall();" >
</div>
<div id = "i1" >
  <ul>
  <li><input type= "checkbox" value= "1" class= "c1" >籃球</li>
  <li><input type= "checkbox" value= "2" class= "c1" >足球</li>
  <li><input type= "checkbox" value= "3" class= "c1" >排球</li>
  </ul>
</div>
<script>
  function Checkall() {
  var b = document.getElementsByClassName( "c1" );
  for ( var i = 0 ;i < b.length;i++){
   var check = b[i];
   check.checked = true
  }
  }
  function Cancleall() {
  var b = document.getElementsByClassName( "c1" );
  for ( var i = 0 ;i < b.length;i++){
   var check = b[i];
   check.checked = false
  }
  }
  function recvall() {
  var b = document.getElementsByClassName( "c1" );
  for ( var i = 0 ;i < b.length;i++){
   var check = b[i];
   if (check.checked){
   check.checked = false
   } else {
   check.checked = true
   }
  }
  }
 
 
</script>
 
</body>
</html>
全選、反選、取消案例

注：onclick是屬於點擊事件，後面會提到

四、class操做

1
2
3
className   // 獲取全部類名
classList.remove(cls) // 刪除指定類
classList.add(cls)  // 添加類

當咱們鼠標放到所有商品的時候，下面就出現好多商品，其商品是屬於隱藏的，觸發事件之後他才顯示出來，其中間的操做就是定義了一個css隱藏屬性，鼠標放上去後，移除CSS隱藏屬性；鼠標移走又把隱藏屬性給添加上去。

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>
<head lang= "en" >
  <meta charset= "UTF-8" >
  <title>隱藏</title>
  <style>
  .hide{
   display: none;
  }
  </style>
</head>
<body>
 
<span onmouseover= "mouOver();" onmouseout= "mouOut();" >放這上面有東西出來，不放東西又消失</span>
<div class= "hide" id = "zhangyanlin" style= "font-size: 60px" >張巖林好帥</div>
<script>
  function mouOver() {
  document.getElementById( "zhangyanlin" ).classList.remove( "hide" );
  }
  function mouOut() {
  document.getElementById( "zhangyanlin" ).classList.add( "hide" );
  }
</script>
</body>
</html>
來個案例醒醒腦

五、標籤操做

dom建立標籤，添加到指定位置

 
 
1
2
3
4
5
6
7
8
9
10
11
// 方式一
var zhang = "<input type='text' />" ;
xxx.insertAdjacentHTML( "beforeEnd" ,zhang);
xxx.insertAdjacentElement( 'afterBegin' ,document.createElement( 'a' ))
  
//注意：第一個參數只能是'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
  
// 方式二
var tag = document.createElement( 'div' )
xxx.appendChild(tag)  //日後追加一個div元素
xxx.insertBefore(tag,xxx[1]) //插到指定位置，可根據索引

 

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
<!DOCTYPE html>
<html lang= "en" >
<head>
  <meta charset= "UTF-8" >
  <title>Title</title>
</head>
<body>
  <div>
  <div>
   <input type= "text" />
   <input type= "button" value= "添加" onclick= "AddElement(this);" />
  </div>
  <div style= "position: relative;" >
   <ul id= "commentList" >
   <li>alex</li>
   <li>eric</li>
   </ul>
  </div>
  </div>
  <script>
  function AddElement(ths) {
   // 獲取輸入的值
   var val = ths.previousElementSibling.value;
   ths.previousElementSibling.value = "" ;
   var commentList = document.getElementById( 'commentList' );
   //第一種形式，字符串方式
   //var str = "<li>" + val + "</li>";
   // 'beforeBegin'、 'afterBegin'、 'beforeEnd'、 'afterEnd'
   // beforeEnd內部最後
   // beforeBegin 外部上邊
   //afterBegin 內部貼身
   //afterEnd 外部貼牆
   //commentList.insertAdjacentHTML("beforeEnd",str);
   //第二種方式，元素的方式
   var tag = document.createElement( 'li' );
   tag.innerText = val;
   var temp = document.createElement( 'a' );
   temp.innerText = '百度' ;
   temp.href = "http://etiantian.org" ;
   tag.appendChild(temp);
   // commentList.appendChild(tag);
   commentList.insertBefore(tag,commentList.children[1]);
  }
  </script>
</body>
</html>
添加標籤操做案例

六、樣式操做

1
2
3
4
5
6
7
8
<body>
<div id = i1>張巖林很帥</div>
<script>
var obj = document.getElementById( 'i1' );
obj.style.fontSize = "32px" ;
obj.style.backgroundColor = "red" ;
</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
35
<!DOCTYPE html>
<html lang= "en" >
<head>
  <meta charset= "UTF-8" >
  <title>Title</title>
  <style>
  .bb{
   color: #9a9a9a;
  }
  .aa{
   color: black;
  }
  </style>
</head>
<body>
  <input class= "bb" value= "請輸入內容" onfocus= "inpAtu(this);" onblur= "onBtu(this);" >
  <script>
  function inpAtu(ths) {
   ths.className = "aa" ;
   var text = ths.value;
   if (text == "請輸入內容" ){
   ths.value = "" ;
   }
  }
  function onBtu(ths) {
   var text = ths.value;
   if (text == "請輸入內容" || text.trim().length == 0){
   ths.className = "bb" ;
   ths.value = "請輸入內容" ;
   }
  }
  </script>
</body>
</html>
input輸入框提示

七、位置操做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
總文檔高度
document.documentElement.offsetHeight
  
當前文檔佔屏幕高度
document.documentElement.clientHeight
  
自身高度
tag.offsetHeight
  
距離上級定位高度
tag.offsetTop
  
父定位標籤
tag.offsetParent
  
滾動高度
tag.scrollTop

網頁右下角有個返回頂部，一點就返回到上面了，其實就是計算這些高度；還有當你鼠標往下拉的時候，左邊菜單欄相對應的樣式都會變。

 
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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
<!DOCTYPE html>
<html>
<head lang= "en" >
  <meta charset= "UTF-8" >
  <title></title>
</head>
<style>
 
  body{
  margin: 0px;
  }
  img {
  border: 0;
  }
  ul{
  padding: 0;
  margin: 0;
  list-style: none;
  }
  h1{
  padding: 0;
  margin: 0;
  }
  .clearfix:after {
  content: "." ;
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
  }
 
  .wrap{
  width: 980px;
  margin: 0 auto;
  }
 
  .pg-header{
  padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#303a40;
  -webkit-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  -moz-box-shadow: 0 2px 5px rgba(0,0,0,.2);
  box-shadow: 0 2px 5px rgba(0,0,0,.2);
  }
  .pg-header .logo{
  float: left;
  padding:5px 10px 5px 0px;
  }
  .pg-header .logo img{
  vertical-align: middle;
  width: 110px;
  height: 40px;
 
  }
  .pg-header .nav{
  line-height: 50px;
  }
  .pg-header .nav ul li{
  float: left;
  }
  .pg-header .nav ul li a{
  display: block;
  color: #ccc;
  padding: 0 20px;
  text-decoration: none;
  font-size: 14px;
  }
  .pg-header .nav ul li a:hover{
  color: #fff;
  padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#425a66;
  }
  .pg-body{
 
  }
  .pg-body .catalog{
  position: absolute;
  top:60px;
  width: 200px;
  padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#fafafa;
  bottom: 0px;
  }
  .pg-body .catalog.fixed{
  position: fixed;
  top:10px;
  }
 
  .pg-body .catalog .catalog-item.active{
  color: #fff;
  padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#425a66;
  }
 
  .pg-body .content{
  position: absolute;
  top:60px;
  width: 700px;
  margin-left: 210px;
  padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#fafafa;
  overflow: auto;
  }
  .pg-body .content .section{
  height: 500px;
  border: 1px solid red;
  }
</style>
<body onscroll= "ScrollEvent();" >
<div class= "pg-header" >
  <div class= "wrap clearfix" >
  <div class= "logo" >
   <a href= "#" >
   <img src= "http://core.pc.lietou-static.com/revs/images/common/logo_7012c4a4.pn" >
   </a>
  </div>
  <div class= "nav" >
   <ul>
   <li>
    <a href= "#" >首頁</a>
   </li>
   <li>
    <a href= "#" >功能一</a>
   </li>
   <li>
    <a href= "#" >功能二</a>
   </li>
   </ul>
  </div>
 
  </div>
</div>
<div class= "pg-body" >
  <div class= "wrap" >
  <div class= "catalog" id= "catalog" >
   <div class= "catalog-item" auto-to= "function1" ><a>第1張</a></div>
   <div class= "catalog-item" auto-to= "function2" ><a>第2張</a></div>
   <div class= "catalog-item" auto-to= "function3" ><a>第3張</a></div>
  </div>
  <div class= "content" id= "content" >
   <div menu= "function1" class= "section" >
   <h1>第一章</h1>
   </div>
   <div menu= "function2" class= "section" >
   <h1>第二章</h1>
   </div>
   <div menu= "function3" class= "section" >
   <h1>第三章</h1>
   </div>
  </div>
  </div>
 
</div>
  <script>
  function ScrollEvent(){
   var bodyScrollTop = document.body.scrollTop;
   if (bodyScrollTop>50){
   document.getElementsByClassName( 'catalog' )[0].classList.add( 'fixed' );
   } else {
   document.getElementsByClassName( 'catalog' )[0].classList.remove( 'fixed' );
   }
 
   var content = document.getElementById( 'content' );
   var sections = content.children;
   for ( var i=0;i<sections.length;i++){
   var current_section = sections[i];
 
   // 當前標籤距離頂部絕對高度
   var scOffTop = current_section.offsetTop + 60;
 
   // 當前標籤距離頂部，相對高度
   var offTop = scOffTop - bodyScrollTop;
 
   // 當前標籤高度
   var height = current_section.scrollHeight;
 
   if (offTop<0 && -offTop < height){
    // 當前標籤添加active
    // 其餘移除 active
    var menus = document.getElementById( 'catalog' ).children;
    var current_menu = menus[i];
    current_menu.classList.add( 'active' );
    for ( var j=0;j<menus.length;j++){
    if (menus[j] == current_menu){
 
    } else {
     menus[j].classList.remove( 'active' );
    }
    }
    break ;
   }
 
   }
 
 
  }
  </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
44
<!DOCTYPE html>
<html lang= "en" >
<head>
  <meta charset= "UTF-8" >
  <title>Title</title>
  <style>
  .pg-top{
   position: fixed;
   padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#0095bb;
   height: 40px;
   width: 40px;
   bottom: 50px;
   right: 40px;
   color: whitesmoke;
  }
  .hide{
   display: none;
  }
  </style>
</head>
<body onscroll= "Func();" >
  <div style= "height: 3000px;" id = "i1" >
  <h1>張巖林</h1>
  </div>
  <div class= "pg-top hide" id = "i2" >
  <a href= "javascript:void(0);" onclick= "GoTop();" >返回頂部</a>
  </div>
<script>
  function Func() {
  var scrollTop = document.body.scrollTop;
  var i1 = document.getElementById( "i2" );
  if (scrollTop>20){
   i1.classList.remove( "hide" )
  } else {
   i1.classList.add( "hide" )
  }
  }
  function GoTop() {
  document.body.scrollTop = 0;
  }
</script>
</body>
</html>
返回頂部

八、其餘操做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
console.log   輸出框
alert   彈出框
confirm   確認框
  
// URL和刷新
location.href  獲取URL
location.href = "url" 重定向
location.reload()  從新加載
  
// 定時器
setInterval   屢次定時器
clearInterval  清除屢次定時器
setTimeout   單次定時器
clearTimeout  清除單次定時器

給說下定時器吧，定時器比較有用，好比當咱們刪除一個郵件的時候，會發現彈出一段對話，郵件已刪除，這個是單次定時器，屢次定時器在本身特定需求的時候，能夠用到

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 屢次定時器案例
<input type= "button" value= "Interval" onclick= "Interval();" >
<input type= "button" value= "StopInterval" onclick= "StopInterval();" >
  <script>
  function Interval() {
   s1 = setInterval( function () {
   console.log(123) //持續輸出123
   },500);
   s1 = setInterval( function () {
   console.log(123)
   },500);
  }
  function StopInterval() {
   clearInterval(s1); //清除一個屢次定時器
  }
  </script>

單次定時器

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div>
  <input type= "button" value= "刪除" onclick= "Delete();" >
  <input type= "button" value= "保留當前狀態" onclick= "UnDelete();" >
  <div id = "status" ></div>
  </div>
  <script>
  function Delete() {
   document.getElementById( "status" ).innerText = "已刪除" ;
   t1 = setTimeout(Clearstatus,1500);
  }
  function Clearstatus() {
   document.getElementById( "status" ).innerText = "" ;
  }
  function UnDelete() {
   clearTimeout(t1); //清除完定時器，他會一直顯示
  }
  </script>

事件

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</title>
</head>
<body>
 
  // 普通事件
  <button id = "btn1" onclick= "func();" >按鈕</button>
  <script>
  var btn = document.getElementById( "btn1" );
  function func() {
   alert( "普通時間處理" )
  }
  </script>
  
  
  
  
  
  // 0級處理事件
  <button id = "btn2" >0級處理按鈕</button>
  <script>
  var btn = document.getElementById( "btn2" );
  btn.onclick = function () {
   alert( "0級處理按鈕" )
  };
// btn.onclick = null; // 清除事件處理, 多個事件會被覆蓋掉，只剩下最後一個事件
  </script>
 
  
  
  
  // 2級處理事件
  <button id = "btn3" >2級處理按鈕</button>
  <script>
  var btn = document.getElementById( "btn3" ).addEventListener( "click" , function () {
   alert( "二級處理事件1" )
  });
  var btn1= document.getElementById( "btn3" ).addEventListener( "click" , function () {
   alert( "二級處理事件2" )
  });
  //不會被覆蓋
  </script>
 
  <button id = "btn4" >完整兼容按鈕</button>
  <script>
  var btn = document.getElementById( "btn4" );
  if (btn.addEventListener){
   btn.addEventListener( "click" ,demo);
  } else if (btn.attachEvent){
   btn.attachEvent( "onclick" ,demo);
  } else {
   btn.onclick = demo;
  }
  function demo() {
   alert( "整合兼容事件處理" )
  }
  </script>
</body>
</html>

事件列表：

 

屬性 此事件何時發生(何時被觸發)
onabort　　　　 圖象的加載被中斷
onblur　　　　 元素失去焦點
onchange　　　 區域的內容被修改
onclick 當用戶點擊某個對象時調用的事件句柄（比點擊input標籤時執行上面的代碼例子）
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
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
86
87
88
89
<!DOCTYPE html>
<html lang= "en" >
<head>
  <meta charset= "UTF-8" >
  <title>Title</title>
  <style>
  ul{
   list-style: none;
   padding: 0;
   margin: 0;
  }
  ul li{
   float: left;
   padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#038CAE;
   color: white;
   padding: 15px 20px;
  }
  .clearfix:after{
   display: block;
   content: '.' ;
   height: 0;
   visibility: hidden;
   clear: both;
  }
  .hide{
   display: none;
  }
  .tab-menu{
   border: 1px solid #dddddd;
  }
  .tab-menu .title{
   padding: 0px 0px 0px 5px; background-image: initial; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; border-left: 3px solid rgb(108, 226, 108); line-height: 20px; width: 640px; clear: both; border-radius: 0px !important; border-top: 0px !important; border-right: 0px !important; border-bottom: 0px !important; border-image: initial !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; box-sizing: content-box !important; font-family: Consolas, "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; min-height: auto !important; color: gray !important;">#dddddd;
 
  }
  .tab-menu .title .active{
  
   color: black;
   border-top: 2px solid red;
  }
  .tab-menu .content{
   border: 1px solid #dddddd;
   min-height: 150px;
  }
  </style>
</head>
<body>
  <div style= "width: 960px;margin: 0;padding: 0" >
  <div class= "tab-menu" >
   <div class= "title clearfix" >
   <ul>
    <li target = "h1" class= "active" onclick= "Show(this);" >價格趨勢</li>
    <li target = "h2" onclick= "Show(this);" >市場分佈</li>
    <li target = "h3" onclick= "Show(this);" >其餘</li>
   </ul>
   </div>
   <div id = "content" class= "content" >
   <div con = "h1" >content1</div>
   <div con = "h2" class= "hide" >content2</div>
   <div con = "h3" class= "hide" >content3</div>
   </div>
  </div>
  </div>
<script>
  function Show(ths) {
  var target = ths.getAttribute( 'target' );
  ths.className = 'active' ;
  var brother = ths.parentElement.children;
  for ( var i=0;i<brother.length;i++){
   if (ths == brother[i]){
 
   } else {
   brother[i].removeAttribute( "class" );
   }
  }
  var content = document.getElementById( "content" ).children;
  for ( var j=0;j<content.length;j++){
   var current_content = content[j];
   var con = current_content.getAttribute( "con" );
   if (con == target){
   current_content.classList.remove( "hide" );
   } else {
   current_content.className = "hide" ;
   }
  }
  }
</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 charset= "UTF-8" >
  <title>Title</title>
</head>
<body>
  <input type= "button" onclick= "Func();" value= "點我啊" />
  <div id= "i1" >
  <div class= "c1" >123</div>
  <div class= "c1" alex= "sb" >123</div>
  <div class= "c1" >123</div>
  <div class= "c1" alex= "sb" >123</div>
   <div class= "c1" alex= "sb" >123</div>
  <div class= "c1" >123</div>
  <div class= "c1" alex= "sb" >123</div>
  <div class= "c1" >123</div>
  <!--<input type= "text" >-->
  <!--<input type= "password" >-->
  <!---->
 
  </div>
  <script>
  function Func() {
    // i1
   // i1全部孩子,循環每個孩子，判斷若是alex=‘sb'
   var i1 = document.getElementById('i1 ');
   var divs = i1.children;
   for(var i=0;i<divs.length;i++){
   var current_div = divs[i];
   var result = current_div.getAttribute(' alex');
  //  console.log(result);
   if (result == "sb" ){
    current_div.innerText = "456" ;
   }
   }
  }
 
 
  </script>
</body>
</html>
經過自定義屬性改變元素值
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程