09、JavaScript-DOM获取元素及修改属性

1、Web Api基本认识【作用】：使用JavaScript去操作html和浏览器【分类】：DOM ：文档对象模型BOM ：浏览器对象模型JavaScript结构图：【什么是DOM】： DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API【DOM树】：将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM

执手天涯@

1062人浏览 · 2022-01-13 15:01:51

执手天涯@ · 2022-01-13 15:01:51 发布

1、Web Api基本认识

【作用】： 使用JavaScript去操作html和浏览器

【分类】：

DOM ：文档对象模型
BOM ：浏览器对象模型

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

【DOM树】： 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
在这里插入图片描述
DOM对象： 浏览器根据html标签生成的 JS对象。

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

2、获取DOM对象

根据CSS选择器来获取DOM元素

语法：

document，querySelector('CSS选择器')

参数：

包含一个或多个有效的CSS选择器字符串

返回值：

CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。

选择匹配的多个元素

语法：

document，querySelectorAll('CSS选择器')

参数：

包含一个或多个有效的CSS选择器字符串

返回值：

CSS选择器匹配的NodeList 对象集合

例如：

document，querySelectorAll('ul li');

注意事项：

document.querySelectorAll得到的是一个伪数组
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。

其他获取DOM元素方法

 // 3、根据id获取元素
    document.getElementById('nav')

    // 4、根据标签名获取
    document.getElementsByTagName('div')

    // 5、根据类名获取
    document.getElementsByClassName('.nav')

小例子：

<!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>
    <ul class="nav">
        <li>我的首页</li>
        <li>产品介绍</li>
        <li>联系方式</li>
    </ul>
</body>
<script>
    // 1、获取元素
    let lis = document.querySelectorAll('.nav li')
    // 2、遍历得到每一个元素
    for (let i = 0; i < lis.length; i++) {
        console.log(lis[i]);
    }
</script>

</html>

3、设置和修改DOM元素内容

document.write() 方法

只能将文本内容追加到前面的位置
文本中包含的标签会被解析

对象.innerText 属性

将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析

对象.innerHTML 属性

将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析

4、设置和修改DOM元素属性

设置/修改元素常用属性

语法

对象.属性 = 值

例如：

<body>
    <img src="./images/1.webp" alt="">
</body>
<script>
    // 1、获取元素
    let pic = document.querySelector('img');
    // 2、修改元素的属性
    pic.src = './images/2.webp'
    pic.title = '我最帅'
    pic.alt = '这是一张帅图！'
</script>

设置/修改元素样式属性

1、通过 style 属性操作CSS：

语法：

对象.style.样式属性 = 值

举例：

<script>
    // 1、获取元素
    let box = document.querySelector('div');
    // 2、通过style修改样式属性 所有的样式会写在行内
    box.style.backgroundColor = 'skyblue';
    box.style.width = '400px';
    box.style.marginTop = '100px'
</script>

注意事项：

修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位

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

语法：

元素.className = 'active'

注意：

由于class是关键字, 所以使用className去代替
className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

3. 通过 classList 操作类控制CSS

语法：

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换类
元素.classList.toggle('类名')

设置/修改表单元素属性

获取: DOM对象.属性名
设置: DOM对象.属性名 = 新值

5、定时器-间歇函数

开启定时器

语法：

setInterval(函数,间隔时间)

作用：

每隔一段时间调用这个函数
间隔时间单位是毫秒

关闭定时器

语法：

let 变量名 = setInterval(函数, 间隔时间);
    clearInterval(变量名)

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>
</body>
<script>
    // 1、获取元素
    let pic = document.querySelector('.pic');
    let text = document.querySelector('.text');
    // 2、准备模拟数据
    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/b07.jpg',
            title: '动力火车来到西安'
        },
        {
            imgSrc: 'images/b08.jpg',
            title: '钢铁侠3，英雄镇东风'
        },
        {
            imgSrc: 'images/b09.jpg',
            title: '我用整颗心来等你'
        },
    ]
    // 3、创建一个变量，来存储数据的索引
    let i = 0;
    // 4、创建一个定时器
    let timer = setInterval(function () {
        i++
        // 修改图片的src
        pic.src = data[i].imgSrc;
        // 修改图片的描述信息
        text.innerText = data[i].title;
        // 设置无缝衔接
        if (i === data.length - 1) {
            i = -1;
        }
    }, 1000)
</script>

</html>