DOM获取元素以及绑定事件

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>

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>