JavaScript的第七天-优快云博客

本文链接：https://blog.youkuaiyun.com/Jourkern/article/details/143225156

.get 获取 element节点 by从谁那里得到 id/classname/tagname 目标位置

二、事件

1. 事件是有三部分组成，我们将其称为事件三要素：

2、执行事件的步骤

三、操作元素

1、操作元素的流程：先获取，后改变

2、改变元素的方法：这两个属性是可读写的可以获取元素里面的内容

（1）innerText：不识别html标签，非W3C标准，去除空格和换行

（2）innerHTML：识别html标签，执行W3C标准

3、修改元素属性：元素名 . 属性值

4、修改元素的样式

关闭淘宝二维码案例

一、获取元素的方法

1、获取元素和打印元素

document.getElementById	通过id名来获取元素
document.getElementsByTagName	通过标签名来获取元素，获取过来元素对象的集合，以伪数组的形式存储的
document.getElementsByClassName	根据类名获得某些元素集合
document.querySelector	选择一个元素，如果是标签名则选择该标签名的第一个元素
document.querySelectorAll	获取所有命名相同的元素
document.body	获取body 元素
document.documentElement	获取html 元素
console.dir	打印我们返回的元素对象,更好的查看里面的属性和方法

2、h5新增几种方法的运用

        // 1. getElementsByClassName 根据类名获得某些元素集合
        var divs = document.getElementsByClassName("box")
        console.log(divs);


        //   2. querySelector   选择第一个元素  class 要加点
        var a = document.querySelector("div")
        console.log(a);


        // 3.querySelectorAll  获取所有class名为.box的元素
        var divs = document.querySelectorAll("ul>li")
        console.log(divs);

3、一些要点解析和代码运用

.get 获取 element节点 by从谁那里得到 id/classname/tagname 目标位置

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #box {
            width: 200px;
            height: 200px;
            background-color: #0f0;
            color: #fff;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <div id="box"></div>

    <ul id="ul">
        <li>11</li>
        <li>22</li>
        <li>33</li>
        <li>44</li>
    </ul>
    <ol>
        <li>55</li>
        <li>66</li>
        <li>77</li>
    </ol>
    <script>
        var box = document.getElementById("box")
        //获取元素并赋值给变量进行操作
        box.onclick = function () {
            this.innerHTML = "a"
            console.dir(box);
        }



        var lis = document.getElementsByTagName("li")
        //获取元素对象集合，并以伪数组的形式存在
        // 如果页面中只有一个li 返回的还是伪数组的形式
        // 如果页面中没有这个元素 返回的是空的伪数组的形式

        console.log(lis[3]);
        var div = document.getElementsByTagName("div")
         for (var i = 0; i < lis.length; i++) {
             lis[i].onclick = function () {
                 console.log(this);
                 this.innerHTML = "liusz"
             }
         }

    </script>
</body>

</html>

二、事件

1. 事件是有三部分组成，我们将其称为事件三要素：

事件源，事件类型，事件处理程序

        var btn = document.querySelector("#btn")
        btn.onclick = function () {
            alert("你好")
        }


        // 事件源（事件被触发的对象，按钮）
        // 事件类型（点击）
        //事件处理程序（执行操作）

2、执行事件的步骤

    // 执行事件步骤
    // 点击div 控制台输出 我被选中了
    // 1. 获取事件源
    // 2.绑定事件 注册事件
    // 3.添加事件处理程序 

    var div = document.querySelector("div")
    div.onclick = function () {
      console.log("我被选中了");
    }

三、操作元素

1、操作元素的流程：先获取，后改变

使用获取元素的方法先取得元素，然后再对元素进行更改

        var btn = document.querySelector("#btn")
        //获取按钮元素    
        var box = document.querySelector("#box")
        //获取盒模型元素
        btn.onclick = function () {
        //将点击操作绑定在按钮元素上，并对其执行一个函数操作
            box.innerHTML = "a"
        //使用innerHTML来进行写入操作
        }

2、改变元素的方法：这两个属性是可读写的可以获取元素里面的内容

（1）innerText：不识别html标签，非W3C标准，去除空格和换行

（2）innerHTML：识别html标签，执行W3C标准

        var box = document.querySelector("#box")
        var btn = document.querySelector("#btn")
        var strong = "<strong>你好</strong>"
        btn.onclick = function () {
            console.log(box.innerHTML);
            // box.innerText = strong
            box.innerHTML = strong
        }

3、修改元素属性：元素名 . 属性值

对需要修改的元素名进行提取，赋值给变量，使用元素名.属性名的搭配来调用，使用字符串或数字修改内容来达到修改元素属性值的目的。

        var btn = document.querySelector("#btn")
        var img = document.querySelector("img")
        btn.onclick = function () {
            // console.log(img.src);
            img.src = "./dog.ico"
            btn.width = 300
        }

4、修改元素的样式

在修改元素的样式时需要在前面添加 style 来进行调用，在函数内使用this时指向的是使用函数的变量

        var div = document.querySelector("div")
        var btn = document.querySelector("#btn")
        var flag = true
        btn.onclick = function () {
            if (flag) {
                div.style.width = "300px"
                div.style.height = "300px"
                div.style.backgroundColor = "#f00"
                // flag = !flag
                flag = false
            } else {
                div.style.width = "200px"
                div.style.height = "200px"
                div.style.backgroundColor = "#0f0"
                flag = true
            }
        }

关闭淘宝二维码案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box {
            position: relative;
            width: 74px;
            height: 88px;
            border: 1px solid #ccc;
            margin: 100px auto;
            font-size: 12px;
            text-align: center;
            color: #f40;
            /* display: block; */
        }

        .box img {
            width: 60px;
            margin-top: 5px;
        }

        .close-btn {
            position: absolute;
            top: -1px;
            left: -16px;
            width: 14px;
            height: 14px;
            border: 1px solid #ccc;
            line-height: 14px;
            font-family: Arial, Helvetica, sans-serif;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        淘宝二维码
        <img src="images/tao.png" alt="">
        <i class="close-btn">×</i>
    </div>
    <script>
        // 1. 获取元素 
        // 2.注册事件 程序处理

        var i = document.querySelector("i")
        var box = document.querySelector("#box")
        i.onclick = function () {
            box.style.display = "none"
        }
    </script>
</body>

</html>