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>