1. 根據ID獲取元素並且綁定事件
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 #d1{ 10 width: 200px; 11 height: 200px; 12 background-color: aqua; 13 margin: 100px auto; 14 } 15 </style> 16 </head> 17 18 <body> 19 <div id="d1"></div> 20 21 <script> 22 //根據id獲取元素 23 //括號里面寫的是 id名 24 var div01 = document.getElementById("d1") 25 26 //一個事件，分為事件源，事件類型，事件的處理程序 27 //把獲取到的div01 作為事件源，然后給他綁定一個事件，鼠標點擊事件 onclick 28 //最后添加一個事件處理程序，即當鼠標點擊div01后，div01的background-color變為紅色。 29 div01.onclick = function(){ 30 div01.style.backgroundColor = "red"; 31 } 32 </script> 33 </body> 34 35 </html>
點擊前：
點擊后：
2.根據標簽名獲取元素 1 <!DOCTYPE html>
2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <style> 8 li{ 9 list-style: none; 10 font-size: 28px;
11 } 12 </style> 13 </head> 14 <body> 15 <ul> 16 <li>aaa</li> 17 <li>bbb</li> 18 <li>ccc</li> 19 </ul> 20 21 <script> 22 //更據標簽名獲取元素，返回的是帶有指定標簽名的對象的集合。 23 //以偽數組的形式存儲，偽數組的特點，具有length屬性，可以通過索引訪問數組元素， 24 //不具有pop().push()等方法 25 var lis = document.getElementsByTagName("li") 26 27 //所以我們可以遍歷這個偽數組，給每個li元素，綁定一個點擊事件，鼠標點擊后顏色變成藍色 28 for(var i=0;i<lis.length;i++){ 29 lis[i].onclick = function(){ 30 //事件中的this 指向這個事件的對象，即 lis[i] 31 this.style.color = "blue"; 32 } 33 } 34 </script> 35 </body> 36 </html>
依次點擊后：
3. 通過類名獲取元素
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .b1 { 15 /* 將button轉換成塊級元素 */ 16 display: block; 17 width: 160px; 18 height: 30px; 19 margin: 100px auto; 20 } 21 22 .d1 { 23 display: block; 24 width: 300px; 25 height: 300px; 26 background-color: aquamarine; 27 font-size: 18px; 28 29 margin: 0 auto; 30 } 31 </style> 32 </head> 33 34 <body>， 35 <button class="b1">點擊</button> 36 <div class="d1">你如果點擊上方的按鈕我就會消失,再點擊一次我就會又出來</div> 37 38 <script> 39 // getElementsByClassName() 方法返回文檔中所有指定類名的元素集合,也是以偽數組的形式存儲！！ 40 //通過類名獲取 button 元素 和 div元素，獲取到的是一個偽數組 41 //btns[0] , divs[0]才是頁面中的那兩個元素 42 var btns = document.getElementsByClassName('b1'); 43 var divs = document.getElementsByClassName('d1'); 44 45 //給btns[0]綁定一個鼠標點擊事件 46 //用flag 作為一個標志，當flag == 0,說明divs[0]的display屬性為block,即div顯示 47 //當flag == 1,說明divs[0]的display屬性為none，即div隱藏 48 var flag = 0; 49 btns[0].onclick = function(){ 50 if(flag == 0){ 51 divs[0].style.display = "none"; 52 flag = 1; 53 }else{ 54 divs[0].style.display = "block"; 55 flag = 0; 56 } 57 } 58 </script> 59 </body> 60 61 </html>
4.
document.queryselector("指定選擇器") //返回指定選擇器的第一個對象，指定選擇器可以是標簽選擇器，類選擇器，或者是Id 選擇器。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .d1{ width: 200px; height: 200px; background-color: cadetblue; margin: 0 auto; } </style> </head> <body> <div class="d1"></div> <span id="s1">123</span> <a href="javascript:;">hahhahahahaha</a> <script> //通過 queryselector 返回指定選擇器的 第一個對象 //類選擇器,千萬別忘了前面那個點 var div01 = document.querySelector(".d1"); div01.onclick = function(){ div01.style.backgroundColor = "red"; } //id選擇器 var sp = document.querySelector("#s1"); sp.onclick = function(){ sp.style.color = "blue"; sp.style.fontSize = "35px"; } //標簽選擇器 var a = document.querySelector("a"); a.onclick = function(){ this.style.color = "red"; } </script> </body> </html>
document.selectorAll("指定選擇器"); //返回指定選擇器的所有對象
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <ul> <li>zhang</li> <li>lilili</li> <li>wangwang</li> </ul> <script> var lis = document.querySelectorAll("li"); for(var i =0; i<lis.length;i++){ //鼠標經過事件 lis[i].onmouseover = function(){ this.style.color = "blue"; } } </script> </body> </html>