• js4day(获取DOM元素内容，修改元素样式，修改表单元素属性，轮播图案例)

    文章目录

    DOM简介

    DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
    在这里插入图片描述

    获取DOM对象

    1. 根据CSS选择器来获取DOM元素 (重点)

    选择匹配的第一个元素

    • 语法：
    document.querySelector('css选择器')

    • 1
    • 参数:
      包含一个或多个有效的CSS选择器字符串
    • 返回值：
      CSS选择器匹配的第一个元素,一个 HTMLElement对象。
      如果没有匹配到，则返回null。

    参看文档：

    选择匹配的多个元素

    • 语法：
    document.querySelectorALL('css选择器')

    • 1
    • 参数:
      包含一个或多个有效的CSS选择器字符串
    • 返回值：
      CSS选择器匹配的元素NodeList集合。
      得到的是一个伪数组：
      有长度有索引号的数组
      但是没有 pop() push() 等数组方法
      想要得到里面的每一个对象，则需要遍历（for）的方式获得。
      哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
      如果没有匹配到，则返回null。

    设置/修改DOM元素内容

    如果想要修改标签元素的里面的内容，则可以使用如下几种方式：

    1. document.write() 方法
      只能将文本内容追加到 </body> 前面的位置
      文本中包含的标签会被解析
    document.write('<strong>有点意思~</strong>')

    • 1
    1. 对象.innerText 属性
      将文本内容添加/更新到任意标签位置
      文本中包含的标签不会被解析
    box.innerText = '有点意思~'

    • 1
    1. 对象.innerHTML 属性
      将文本内容添加/更新到任意标签位置
      文本中包含的标签会被解析
    box.innerHTML = '<strong>有点意思~</strong>'

    • 1

    设置/修改元素常用样式属性

    语法：
    对象.属性=值

            // 1.获取元素 图片
        let pic = document.querySelector('img')
        //操作元素
        pic.src = `./images/1.webp`
        pic.title = '我是图片'

    • 1
    • 2
    • 3
    • 4
    • 5

    设置/修改元素样式属性

    1.通过 style 属性操作CSS

    注意：style属性只能获取和设置行内样式，在类样式定义的样式通过style获取不到。
    在这里插入图片描述

          let box = document.querySelector('div')
      box.style.background = 'skyblue'
      box.style.width = '400px'
      box.style.marginTop = '100px'

    • 1
    • 2
    • 3
    • 4

    标签选择body时， 因为body是唯一的标签，可以直接写 document.body.style

    	document.body.style.backgroundImage = `url(./images/desktop_${num}.jpg)`

    • 1

    2. 操作类名(className) 操作CSS

    如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。

          let box = document.querySelector('div')
      box.className = 'active'  

    • 1
    • 2

    缺陷： 如果div中原来有类会覆盖原有的类（因为相当于给div的class重新赋值）。

    3. 通过 classList 操作类控制CSS

    为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

        box.classList.add('active')				// 追加一个类
    box.classList.remove('active')			// 删除一个类
    // 切换类，元素中有active就删除，没有active就追加
    box.classList.toggle('active')

    • 1
    • 2
    • 3
    • 4

    **总结：**使用 className 和classList的区别？
    className可以同时修改多个样式， 但是直接使用 className 赋值会覆盖以前的类名
    classList修改较少样式的时候方便， classList 是追加和删除不影响以前类名

    设置/修改表单元素属性

    在这里插入图片描述

        <input type="text" value="请输入">
    <button disabled>按钮</button>
    <input type="checkbox" name="" class="agree">
    <script>
        // 1.获取元素
        let input = document.querySelector('input')

        // 2.取值或者设置值  得到input里面的值可以用value
        // console.log(input.value)
        input.value = '小米手机'
        input.type = 'password'
        let btn = document.querySelector('button')
        // btn.disabled = false  //相当于删掉这个属性了
        let checkbox = document.querySelector('.agree')
        checkbox.checked = 'checked'
    </script>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    定时器-间歇函数

    在这里插入图片描述

    1. 开启定时器

    在这里插入图片描述

       let time = setInterval(function () {document.write("我是个倒计时<br>")}, 1000)

    • 1

    注意：

    1. 函数名字不需要加括号
    2. 定时器有返回值，返回的是一个数字

    2. 关闭定时器

    在这里插入图片描述

      clearInterval(time)  //可以写进setInterval的函数内

    • 1

    注册协议倒计时案例

    在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <textarea name="" id="" cols="30" rows="10">
        逮虾户注册协议
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(6)</button>
    <script>
        let btn = document.querySelector('.btn')
        let i = 6;
        function countDown() {
            i--;
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0) {
                clearInterval(timer) //清除定时器
                btn.disabled = false  //开启按钮
                btn.innerHTML = `我同意该协议`  //更换文字
            }
        }
        let timer = setInterval(countDown, 1000)
    </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

    在这里插入图片描述

    简单轮播图案例

    每隔1秒更新图片
    在这里插入图片描述

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .img-box {
            width: 700px;
            height: 320px;
            margin: 50px auto 0;
            background: #000;
            position: relative;
        }

        .img-box .tip {
            width: 700px;
            height: 53px;
            line-height: 53px;
            position: absolute;
            bottom: 0px;
            background-color: rgba(0, 0, 0, 0.8);
            z-index: 10;
        }

        .img-box .tip h3 {
            width: 82%;
            margin: 0;
            margin-right: 20px;
            padding-left: 20px;
            color: #98E404;
            font-size: 28px;
            float: left;
            font-weight: 500;
            font-family: "Microsoft Yahei", Tahoma, Geneva;
        }

        .img-box .tip a {
            width: 30px;
            height: 29px;
            display: block;
            float: left;
            margin-top: 12px;
            margin-right: 3px;
        }

        .img-box ul {
            position: absolute;
            bottom: 0;
            right: 30px;
            list-style: none;
            z-index: 99;
        }
    </style>
</head>

<body>
    <div class="img-box">
        <img class="pic" src="./images/b01.jpg" alt="第1张图的描述信息">
        <div class="tip">
            <h3 class="text">挑战云歌单，欢迎你来</h3>
        </div>
    </div>
    <script>
        let data = [
            {
                imgSrc: 'images/b01.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
                imgSrc: 'images/b02.jpg',
                title: '田园日记，上演上京记'
            },
            {
                imgSrc: 'images/b03.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
                imgSrc: 'images/b04.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
                imgSrc: 'images/b05.jpg',
                title: '年度校园主题活动'
            },
            {
                imgSrc: 'images/b06.jpg',
                title: 'pink老师新歌发布，5月10号正式推出'
            },
            {
                imgSrc: 'images/b07.jpg',
                title: '动力火车来到西安'
            },
            {
                imgSrc: 'images/b08.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
                imgSrc: 'images/b09.jpg',
                title: '我用整颗心来等你'
            },
        ]
        let i = 0           //不能在函数中for循环访问（脱离了定时器，会在1秒内结束函数），要设置全局变量根据定时器改变i的值
        function lunbo() {
            i++;
            // 获取数据
            let dat = data[i];
            let img = dat.imgSrc
            let title = dat.title
            // 获取标签
            let pic = document.querySelector('.pic')
            let text = document.querySelector('.text')
            pic.src = img
            text.innerHTML = title
            // 更改标签属性值
            if (i === data.length - 1) {
                i = -1;    //如果i=0，则第一张图片会跳过轮播（因为头部的i++）
            }
        }
        setInterval(lunbo, 1000)
    </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
    • 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
  • 相关阅读:
    手机系统要不要更新？来看看这个答案
    使用 Vert.X Future/Promise 编写异步代码
    通信原理_1 信号与系统基础
    在vue3框架中使用vant的input组件安卓端闪退的问题
    微信小程序源码-高校学生事务管理系统的计算机毕业设计(附源码+演示录像+LW)
    极限导论总结
    MySQL查询优化介绍
    禾匠二开系列之兑换码禁用以后启用功能
    【机器学习】解决过拟合、ReLU激活函数
    场景应用：如何设计一个分布式系统？
  • 原文地址：https://blog.csdn.net/qq_44976531/article/details/125422670