apis-day1dom获取元素修改属性

一束光亮

已于 2022-11-17 21:43:05 修改

阅读量109

点赞数

分类专栏：前端第二阶段js基础、web apis实用案例等文章标签： javascript 前端 html

于 2022-11-14 22:48:11 首次发布

本文链接：https://blog.csdn.net/m0_52766105/article/details/127833114

版权

前端第二阶段js基础、web apis实用案例等专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、dom获取元素、修改属性

目标：能获取DOM元素并修改元素属性，具备利用定时器制作焦点图切换的能力

1、webApi的基本认知

1.1作用

使用JS去操作html和浏览器

1.2分类

DOM	BOM
操作html和css	操作浏览器

1.3DOM树

HTML DOM 定义了访问和操作HTML文档的标准方法

DOM以树结构表达HTML文档
在这里插入图片描述

DOM对象（重要）

定义：浏览器根据html标签生成的JS对象

所有的标签属性都可以在这个对象上面找到
修改这个对象的属性会自动映射到标签身上

2、获取DOM对象的方式

2.1document.querySelector

获取的是满足条件的第一个一定只有一个
可以直接操作

2.2document.querySelectorAll

获取的是满足条件的所有DOM对象返回的是一个集合
无法直接操作,必须通过下标才能操作

2.3其他了解

document.getElementById()

document.getElementsByTagName()

这两个可以直接用万能的2.1，2.2代替，所以用来了解就好

3、设置/修改元素内容

DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象，就是操作对象使用的点语法
innerText，可对内容进行修改，不解析标签（就是打印出来文本的时候，不识别标签，标签会被当成文本一起打印出来）
innerHTML，解析（识别）标签
使用: 不明确数据的安全性的情况下, 使用innerText
要区分模板字符串的区别

不是引号，是Tab键上面的那个键

案例：随机点名

<!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>
        div{
            display: inline-block;
            width: 150px;
            height: 30px;
            border: 1px solid pink;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    抽中选手：<div></div>
    <script>
        // 1.获取元素
        let box = document.querySelector('div')
        // 得到随机名字
       function getRandom(min,max){
        return Math.floor(Math.random()*(max-min+1))+min
       }
    //    声明数组
       let arr = ['赵云','黄忠','关羽','张飞','马超','刘备','曹操','pink老师']
    //    生成一个随机数，作为数组的索引号
    let random = getRandom(0,arr.length-1)
    // 写入标签内部
    box.innerHTML = arr[random]
    // 之后删除这个人名字
    // arr.splice(从哪里开始删，删几个)
    arr.splice(random,1)

    </script>
</body>
</html>

4、设置/修改元素属性

4.1设置/修改常用属性

常见的属性： href、title、src 等

//对象.属性 = 值
img.src=data[i].imgSr]]

<!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>焦点图切换</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="02images/b01.jpg" alt="第1张图的描述信息">
        <div class="tip">
            <h3 class="text">挑战云歌单，欢迎你来</h3>
        </div>
    </div>

    <script>
        // 数据
        let data = [
            {
                imgSrc: '02images/b01.jpg',
                title: '挑战云歌单，欢迎你来'
            },
            {
                imgSrc: '02images/b02.jpg',
                title: '田园日记，上演上京记'
            },
            {
                imgSrc: '02images/b03.jpg',
                title: '甜蜜攻势再次回归'
            },
            {
                imgSrc: '02images/b04.jpg',
                title: '我为歌狂，生为歌王'
            },
            {
                imgSrc: '02images/b05.jpg',
                title: '年度校园主题活动'
            },
            {
                imgSrc: '02images/b06.jpg',
                title: 'pink老师新歌发布，5月10号正式推出'
            },
            {
                imgSrc: '02images/b07.jpg',
                title: '动力火车来到西安'
            },
            {
                imgSrc: '02images/b08.jpg',
                title: '钢铁侠3，英雄镇东风'
            },
            {
                imgSrc: '02images/b09.jpg',
                title: '我用整颗心来等你'
            },
        ]
        let img = document.querySelector('.pic')
        let text = document.querySelector('.text')
        let i = 0
        setInterval(function(){
            i++
            img.src=data[i].imgSrc
            text.innerHTML=data[i].title
            // 无缝衔接
            if(i===data.length-1){
                i=-1
            }
        },1000)

    </script>
</body>

</html>

5、设置修改元素样式属性

5.1style操作css

每一个DOM对象都有一个style属性,style属性的值是一个对象，里面存储了所有行内样式对应的键值对。
如果样式的名字带了-，比如background-color,到了style对象中，变成了驼峰命名法，backgroundColor（因为-在js中-会被解析成减号）
style属性只能获取和设置行内样式，在类样式中定义的样式通过style获取不到。

在这里插入图片描述

5.2操作类名(className)

由于class是关键字, 所以使用className去代替

className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

//如果需要保留之前的类名
元素.className = 'active 新增类名'

5.3classList

添加：add(class1, class2, …)

删除：remove(class1, class2, …)

切换：toggle(class)

切换：原来有，就删除，原来没有就加上class

对比总结:

对比className和style、classList的区别

文章写的比较清楚

https://blog.csdn.net/qq_54334713/article/details/124437425

在操作类名时，需要通过className属性添加，删除和替换类名。因为className是一个字符串，所以即使只修改字符串一部分，也必须每次都设置整个字符串的值。
classList就相对较而言更加方便了。

6、设置/修改表单属性

https://blog.csdn.net/qq_52031408/article/details/124324095

解释：表单属性中添加就有效果,移除就没有效果,一律使用布尔值表示如果为true 代表添加了该属性如果是false 代表移除了该属性

常见表单属性：

value、disabled、checked、selected

案例：

<!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>
</head>
 
<body>
    <button>按钮</button>
    <input type="text" value="输入内容">
    <script>
        // 1. 获取元素
        var btn = document.querySelector('button');
        var input = document.querySelector('input');
        // 2. 注册事件 处理程序
        btn.onclick = function() {
            // input.innerHTML = '点击了';  这个是 普通盒子 比如 div 标签里面的内容
            // 表单里面的值 文字内容是通过 value 来修改的
            input.value = '被点击了';
            // 如果想要某个表单被禁用 不能再点击 disabled  我们想要这个按钮 button禁用
            // btn.disabled = true;
            this.disabled = true;
            // this 指向的是事件函数的调用者 btn
        }
    </script>
</body>
 
</html>

7、定时器-间歇函数

黑马官方间歇函数知识：https://blog.csdn.net/itcast_cn/article/details/125414529

1. 开启定时器

setInterval(函数，间隔时间)

作用：每隔一段时间调用这个函数
间隔时间单位是毫秒：1000是毫秒与秒的进率单位

 //     // 4.实现名字快速略过：间歇器
        let timer = 0
        let random = arr[0]
        //    4.给开始按钮注册事件
        start.addEventListener('click', function () {
            timer = setInterval(function () {
                //注意： 随机数字  小驼峰命名
                random = getRandom(0, arr.length - 1)
                box.innerHTML = arr[random]
                // 删除数组里的元素

            }, 100)

每隔0.1（100/1000)秒调用这个函数

2. 关闭定时器

clearInterval(timer)

3.定时器作用

可以根据时间自动重复执行某些代码，一般不会刚创建就停止，而是满足一定条件再停止

注意：定时器也是需要等待, 所以后面的代码先执行

每一次调用定时器,都会产生一个新的定时器

       //注意： 随机数字  小驼峰命名
            random = getRandom(0, arr.length - 1)
            box.innerHTML = arr[random]
            // 删除数组里的元素

        }, 100)


> 每隔0.1（100/1000)秒调用这个函数

 **2. 关闭定时器** 

```js
clearInterval(timer)