Web APIs-DOM-获取DOM元素、修改属性

喵喵酱仔__

已于 2023-04-12 11:40:44 修改

阅读量716

点赞数 2

分类专栏： js 文章标签：前端 javascript html

于 2023-04-12 11:34:45 首次发布

本文链接：https://blog.csdn.net/qq_38210427/article/details/130102486

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1什么是dom

 DOM（Document Object Model—— 文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API

 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能

 DOM作用



开发网页内容特效和实现用户交互

DOM 是什么？有什么作用？

 DOM 是文档对象模型

 操作网页内容，可以开发网页内容特效和实现用户交互

2获取DOM对象

1. 获取一个DOM元素我们使用谁？

 querySelector()

2. 获取多个DOM元素我们使用谁？

 querySelectorAll()

3. querySelector() 方法能直接操作修改吗？

 可以

4. querySelectorAll() 方法能直接修改吗？如果不能可以怎么做到修改？

 不可以，只能通过遍历的方式一次给里面的元素做修改

1. 获取页面中的标签我们最终常用那两种方式？

 querySelectorAll()

 querySelector()

2. 他们两者的区别是什么？

 querySelector() 只能选择一个元素，可以直接操作

 querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到

每一个元素

3. 他们两者小括号里面的参数有神马注意事项？

 里面写css选择器

 必须是字符串，也就是必须加引号

3设置/修改DOM元素内容

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

学习路径：

1. document.write() 方法

2. 对象.innerText 属性

3. 对象.innerHTML 属性

1. 设置/修改DOM元素内容有哪3钟方式？

 document.write() 方法

 元素.innerText 属性

 元素.innerHTML 属性

2. 三者的区别是什么？

 document.write() 方法只能追加到body中

 元素.innerText 属性只识别内容，不能解析标签

 元素.innerHTML 属性

能够解析标签

 如果还在纠结到底用谁，你可以选择innerHTML

3.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>
        div {
            display: inline-block;
            width: 150px;
            height: 30px;
            border: 1px solid pink;
            vertical-align: middle;
            text-align: center;
            line-height: 30px;
            /* margin: 300px; */
        }
    </style>
</head>

<body>
    抽中的选手： <div></div>
    <script>
        // 1. 获取元素
        let box = document.querySelector('div')
        // 2. 得到随机的名字
        // 随机数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 声明一个数组
        let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操', 'pink老师']

        // 生成1个随机数 作为数组的索引号
        let random = getRandom(0, arr.length - 1)
        // console.log(random)

        // 3. 写入标签内部
        box.innerHTML = arr[random]
        // 之后删除这个 人的名字
        // arr.splice(从哪里开始删， 删几个)
        arr.splice(random, 1)
        // console.log(arr)
    </script>
</body>

</html>

4设置/修改DOM元素属性

设置/修改元素常用属性

• 设置/修改元素样式属性

• 设置/修改 表单元素 属性

4.1 修改常用属性

设置/修改元素常用属性

 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换图片

 最常见的属性比如： href、title、src 等

 语法： 对象。属性= 值

案例：

<!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 {
            width: 500px;
            height: 300px;
        }
    </style>
</head>

<body>
    <img src="./images/1.webp" alt="">

    <script>
        // // 1. 获取图片元素
        // let pic = document.querySelector('img')
        // // 2. 随机得到图片序号
        // function getRandom(min, max) {
        //     return Math.floor(Math.random() * (max - min + 1)) + min
        // }
        // let num = getRandom(1, 6)
        // // 3. 完成src 属性赋值
        // pic.src = `./images/${num}.webp`

       let pic = document.querySelector('img')

       function getRandom(max ,min){
        return Math.floor(Math.random * (max - min + 1)) + min;
       }

    let random = getRandom( 1, 6);
    console.log(random)
    pic.src = `./images/${random}.webp`
    </script>
</body>

</html>

4.2 设置/修改元素样式属性

还可以通过 JS 设置/修改标签元素的样式属性。

 比如通过轮播图小圆点自动更换颜色样式

 点击按钮可以滚动图片，这是移动的图片的位置 left 等等

学习路径：

1. 通过 style 属性操作CSS

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

3. 通过 classList 操作类控制CSS

4.2.1 style

案例：

<!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>
        body {
            background-image: url(./images/desktop_1.jpg);
        }
    </style>
</head>

<body>

    <script>
        // 随机的函数
        function getRandom(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min
        }
        // 随机的值 1~10  
        let num = getRandom(1, 10)
        // 修改背景图片
        document.body.style.backgroundImage = `url(./images/desktop_${num}.jpg)`
    </script>
</body>

</html>

4.2.2操作类名(className) 操作CSS

1. 使用 className 有什么好处？

 可以同时修改多个样式

2. 使用 className 有什么注意事项？

 直接使用 className 赋值会覆盖以前的类名

4.2.3通过 classList 操作类控制CSS

使用 className 和classList的区别？

 修改大量样式的更方便

 修改不多样式的时候方便

 classList 是追加和删除不影响以前类名

4.3设置/修改表单元素属性

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

表移除了该属性

比如： disabled、checked、selected

5 定时器

1. 开启定时器

2. 关闭定时器

案例

<!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>
    <textarea name="" id="" cols="30" rows="10">
        用户注册协议
        欢迎注册成为京东用户！在您注册过程中，您需要完成我们的注册流程并通过点击同意的形式在线签署以下协议，请您务必仔细阅读、充分理解协议中的条款内容后再点击同意（尤其是以粗体或下划线标识的条款，因为这些条款可能会明确您应履行的义务或对您的权利有所限制）。
        【请您注意】如果您不同意以下协议全部或任何条款约定，请您停止注册。您停止注册后将仅可以浏览我们的商品信息但无法享受我们的产品或服务。如您按照注册流程提示填写信息，阅读并点击同意上述协议且完成全部注册流程后，即表示您已充分阅读、理解并接受协议的全部内容，并表明您同意我们可以依据协议内容来处理您的个人信息，并同意我们将您的订单信息共享给为完成此订单所必须的第三方合作方（详情查看
    </textarea>
    <br>
    <button class="btn" disabled>我已经阅读用户协议(6)</button>
    <script>
        // 1. 获取元素 button 
        let btn = document.querySelector('.btn')
        // 2. 计算逻辑
        // 2.1 我们需要一个变量 用来计数  
        let i = 6
        // 2.2 开启定时器 间歇函数  timer 定时器的序号id
        let timer = setInterval(function () {
            i--
            btn.innerHTML = `我已经阅读用户协议(${i})`
            if (i === 0) {
                // 不走了，清除定时器 
                clearInterval(timer)
                // 开启按钮
                btn.disabled = false
                // 更换文字
                btn.innerHTML = '我同意该协议啦'
            }
        }, 1000)
    </script>
</body>

</html>

6 综合案例

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>QQ音乐10屏轮播图</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: '我用整颗心来等你'
            },
        ]

        // 1. 获取元素  图片  和  h3
        let pic = document.querySelector('.pic')
        let text = document.querySelector('.text')
        // i 记录图片的张数
        let i = 0
        // 2.开启定时器
        setInterval(function () {
            i++
            // 修改图片的src属性
            // console.log(data[i].imgSrc)
            pic.src = data[i].imgSrc
            // 修改文字内容
            text.innerHTML = data[i].title

            // 无缝衔接
            if (i === data.length - 1) {
                i = -1
            }
            // i === 8 ? i = -1 : i
        }, 1000)
    </script>
</body>

</html>

喵喵酱仔__

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
Web APIs-DOM-获取DOM元素、修改属性

1什么是dom文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API白话文：DOM是浏览器提供的一套专门用来的功能DOM作用开发网页内容特效和实现用户交互DOM 是什么？有什么作用？DOM 是文档对象模型操作网页内容，可以开发网页内容特效和实现用户交互2获取DOM对象1. 获取一个DOM元素我们使用谁？2. 获取多个DOM元素我们使用谁？3. querySelector() 方法能直接操作修改吗？可以。
复制链接

扫一扫