其他分享
首页 > 其他分享> > DOM获取元素、修改元素

DOM获取元素、修改元素

作者：互联网

DOM获取元素、修改元素

1.DOM

①什么是DOM？作用？

DOM是文档对象模型
作用：操作网页内容，可以开发网页内容特效和实现用户交互。

②DOM对象

对象

2.获取DOM元素

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

1
2
3

思考

  1. 获取一个DOM元素我们使用谁？
    querySelector()
  2. 获取多个DOM元素我们使用谁？
    querySelectorAll()
  3. querySelector() 方法能直接操作修改吗？
    可以
  4. querySelectorAll() 方法能直接修改吗？ 如果不能可以怎么做到修改？
    不可以， 只能通过遍历的方式一次给里面的元素做修改

②其他获取DOM元素方法（了解）

在这里插入图片描述
注意点
在这里插入图片描述

3.设置/修改DOM元素内容

①.document.write()

在这里插入图片描述

②.元素innerText 属性

在这里插入图片描述

③.元素.innerHTML 属性

在这里插入图片描述
三者区别

1.document.write() 方法 :只能追加到body中
2.元素.innerText 属性 :只识别内容，不能解析标签
3.元素.innerHTML 属性: 能够解析标签
如果还在纠结到底用谁，你可以选择innerHTML

案例：随机抽取的名字显示到指定的标签内部

在这里插入图片描述
源代码

<!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>
        div {
            display: inline-block;
            height: 30px;
            width: 150px;
            vertical-align: middle;
            border: 1px solid pink;
            line-height: 30px;
            text-align: center;
        }
    </style>
</head>
<body>
    点到的同学为：<div></div>

    <script>
        let div = document.querySelector('div')

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

        let arr = ['赵云', '马超', '黄忠', '刘备', '张飞', '关羽', '曹操']

        let random = getRandom(0, arr.length - 1)

        div.innerHTML = arr[random]

        arr.splice(random, 1)
    </script>
</body>
</html>

4.设置/修改DOM元素属性

①.设置/修改元素常用属性

在这里插入图片描述

②.设置/修改元素样式属性

在这里插入图片描述

1）通过 style 属性操作CSS

在这里插入图片描述

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

在这里插入图片描述
注意点

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

3）通过 classList 操作类控制CSS

在这里插入图片描述

③.设置/修改 表单元素 属性

在这里插入图片描述
在这里插入图片描述

5.定时器-间歇函数

在这里插入图片描述
在这里插入图片描述

案例：倒计时效果

需求：按钮6秒之后才可以使用
在这里插入图片描述
源代码

<!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>
</head>
<body>
    <button class="btn" disabled>我已经阅读用户协议(6)</button>
    <script>
        let btn = document.querySelector('.btn')

        let i = 6
        let timer = setInterval(function() {
            i--
            btn.innerHTML= `我已经阅读用户协议(${i})`
            if (i === 0){
                clearInterval(timer)
                btn.disabled = false
                btn.innerHTML = `我已同意该协议`
            }
        }, 1000)
    </script>
</body>
</html>

案例：网页轮播图效果

在这里插入图片描述
源代码

<!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>QQ音乐轮播图</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 pic = document.querySelector('.pic')
        let text = document.querySelector('.text')

        let i = 0

        setInterval(function() {
            i++
            pic.src = data[i].imgSrc
            text.innerHTML = data[i].title

            if (i === data.length - 1){
                i = -1
            }
        }, 1000)
    </script>
</body>
</html>

DOM第一阶段over

你生活的起点并不是那么重要，重要的是最后你能到达哪里

    此页面的语言为葡萄牙语   翻译为中文（简体）        

TRANSLATE with x English
Arabic Hebrew Polish
Bulgarian Hindi Portuguese
Catalan Hmong Daw Romanian
Chinese Simplified Hungarian Russian
Chinese Traditional Indonesian Slovak
Czech Italian Slovenian
Danish Japanese Spanish
Dutch Klingon Swedish
English Korean Thai
Estonian Latvian Turkish
Finnish Lithuanian Ukrainian
French Malay Urdu
German Maltese Vietnamese
Greek Norwegian Welsh
Haitian Creole Persian  
TRANSLATE with COPY THE URL BELOW Back EMBED THE SNIPPET BELOW IN YOUR SITE Enable collaborative features and customize widget: Bing Webmaster Portal Back

标签：DOM,title,元素,jpg,获取,let,imgSrc
来源： https://www.cnblogs.com/czj1213/p/16321739.html