web前端JS（DOM）学习第三十一天

DOM

web API基本认知
获取DOM对象
设置/修改DOM元素内容
设置/修改DOM元素属性
定时器-间歇函数

学习目标：
1，能够获取DOM元素并修改元素属性
2，具备利用定时器间歇函数制作焦点图切换的能力

1，Web API 基本认识

作用和分类
什么是DOM
DOM树
DOM对象

1.1，作用和分类
作用：就是使用JS去操作html和浏览器
分类：DOM（文档对象模型），BOM（浏览器对象模型）

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

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

DOM作用：开发网页内容特效和实现用户交互。

小结：
1，Web API阶段我们学习那两部分？

• DOM

• BOM
  2，DOM是什么？有什么作用？

• DOM是文档对象模型

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

1.3，DOM树
DOM树是什么？

• 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树

描述网页内容关系的名词

• 作用：文档树直观的体现了标签与标签的关系

1.4,DOM对象（重要）
DOM对象：浏览器根据HTML标签生成的JS对象

• 所有的标签属性都可以在这个对象上面找到

• 修改这个对象的属性会自动映射到标签身上

DOM的核心思想

• 把网页内容当做对象来处理

document 对象

• 是DOM里提供的一个对象

• 所以它提供的属性和方法都是用来访问和操作网页内容的

列：document.write()
网页所有内容都在document里面

小结：

1，DOM树是什么？

• 将HTML文档以树状结构直观的表现出来，我们称之为文档树或DOM树
• 作用：文档树直观的体现了标签与标签之间的关系
  

2，DOM对象怎么创建的？

• 浏览器根据html标签生成的JS对象（DOM对象）

• DOM的核心就是把内容当对象来处理

3，document是什么？

• 是DOM里提供的一个对象

• 网页所有内容都在document里面

2，获取DOM元素

根据CSS选择器来获取DOM元素（重点）
其他获取DOM元素方法（了解）

1，根据CSS选择器来获取DOM元素（重点）
1.1，选择匹配的第一个元素

语法：

document.querySelector('css选择器')

参数：
包含一个或多个有效的css选择器字符串

返回值：
css选择器匹配的第一个元素，一个HTMLElement对象。

如果没有匹配到，则返回nul

多参看文档：https：//developer.mozilla.org/zh-CN、docs/web/API/Document/querySelector

1.2,选择器匹配的多个元素

语法：

document.querySelectorAll('css 选择器')

参数：包含一个或多个有效的css选择器 字符串

返回值：css选择器匹配的Nodelist对象集合

document.querySelectorAll('ul li')

思考：

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

• querySelector（）

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

• querySelectorAll（）

3，querySelector（）方法能直接操作修改吗？

• 可以

4，querySelectorAll（）方法能直接修改吗？如果不能可以怎么做到呢？

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

document.querySelectorAll('css 选择器')

得到的是一个伪数组

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

注意事项：哪怕只有一个元素，通过querySelectorSll（）获取过来的也是一个伪数组，里面只有一个元素而已

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

//根据id获取一个元素
document.getElemntById('nav')

//根据标签获取一个类元素  获取页面 所有div
document.getElementsByTagName('div')

//根据 类名获取元素  获取页面 所有类名为w的
document.getElemntsByClassName('w')

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

• querySelectorAll（）

• querySelector（）

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

• querySelector（）只能选择一个元素，可以直接操作

• querySelectorAll（）可以选择多个元素，得到的是伪数组，需要遍历得到的每一个元素

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

• 里面写CSS选择器

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

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

document.write（）方法

对象.innerText属性

对象.innerHTML属性

1，document.write（）

• 只能将文本内容追加到前面的位置

• 文本中包含的标签会被解析

2，元素innerText属性

• 将文本内容添加/更新到任意标签位置

• 文本中包含的标签不会被解析

//innerText 将文本内容添加/ 更新到任意标签位置
let info = document.getElementById('info')

//info.innerText = '你好~~~'
info.innerText = '<h4>你好~~~</h4>'

3,元素.innerHTML 属性

• 将文本内容添加/更新到任意标签位置

• 文本中包含的标签会被解析

//2，innerHTML 属性
box.innerHTML = '<h3>你好<br>我叫表白
</h3>'

小结：

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

• document.write()方法

• 元素.innerText属性

• 元素.innerHTML属性

2，三者的区别是什么？

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

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

• 元素.innerHTML属性 能够解析标签

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

4，设置/修改DOM元素属性
设置/修改元素常用属性

设置/修改元素样式属性

设置/修改表单元素属性

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

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

语法：
对象.属性 = 值

//获取元素
let pic = document.querySelector('img')

//2，操作元素
pic.src = './images/b02.jpg'
pic.title = '这是一个图片'

2，设置/修改元素样式属性

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

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

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

学习路径：
1，通过style属性操作CSS
2，操作类名（className）操作CSS
3，通过 classList 操作类控制CSS

1，通过style属性操作CSS

语法：
对象.style.样式属性 = 值

列如：

//1，获取元素
let box =document.querySelector('.box')

//2，修改背景颜色
box.style.backgroundColor = 'red'
box.style.width = '300px'
box.style.marginTop = '50px'

注意：
1，修改样式通过style属性引出

2，如果属性有-连接符，需要转换为小驼峰命名

3，赋值的时候，需要的时候不要忘记加CSS单位

小结：
1，设置/修改元素样式属性通过style属性引出来？

2，如果需要修改一个div盒子的样式，比如padding-left，如何写？

• element.style.paddingLeft = ‘300px’

• 小驼峰命名法

3，因为我们是样式属性，一定别忘记，大部分数字后面都需要加单位。

2，操作类名（className）操作CSS

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

语法：
//active 是一个类名
元素.calssName = ‘active’

注意：
1，由于class是关键字，所有使用calssName去代替

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

 		// 1，获取元素 （css选择器）
        let box = document.querySelector('div')
        // 2，用className修改样式
        // box.className = 'active '//会直接覆盖以前的类名的
         //calssName 会覆盖以前的类名的，如果避免这种情况出现，要在赋值类同时加上标签的类名
        box.className = 'onw active

小结：
1，使用className有什么好处？

• 可以同时修改多个样式

2，使用calssName 有什么注意事项？

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

3，通过clasList操作类控制CSS
为了解决clasName容易覆盖以前的类名，我们可以通过classList方式追加和删除类名。

语法：

  	 //获取元素，CSS选择器
        // ID选择器
        // let box = document.querySelector('#div')
        let box = document.querySelector('div')

        // classList 修改样式，可以追加，可以删除，可以切换
        // add 追加类，不会覆盖以前的类名，add是方法
        box.classList.add('active')

        // remove删除类
        box.classList.remove('one')

        // toggle 是切换类，如果没有这个类就追加到对象，如果有这个类则是删除
        box.classList.toggle('active')

小结：
1，使用className 和calsslist的区别？

• 修改大量样式的更方便

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

• claslist是追加和删除不影响以前类名

3，设置/修改表单元素 属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框，正常的有属性有取值的，跟其他的标签属性没有任何区别

获取：DOM对象.属性名

设置：DOM对象.属性名= 新值

表单.value = ‘用户名’

表单.type = ‘password’

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

比如：disabled（不可以） ，checked（勾选） selected（下拉）

<script>
        // 1，获取元素
        let input = document.querySelector('input')
        // 2，取值或者设置  得到input 里面的值可以用 value
        input.type = 'password'
        input.value = '请输入~~'

        // 2,启动按钮
        let but = document.querySelector('button')
        // disabled 不可用 = fals 这样可以让按启用
        // but.disabled = false
        but.disabled = false

        // 3,勾选复选框
        let checkbox = document.querySelector('.agree')
        // true勾选复选框，flase是不勾选复选框
        checkbox.checked = true
    </script>

5，定时器-间歇函数
目标：能够说出定时器函数在开发中的使用场景

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发

列如：网页中的倒计时

要实现这种需求，需要定时器函数

定时器函数可以开启和关闭定时器
1，开启定时器

setInterval(函数，间隔时间)

作用：每隔一段时间调用这个函数

间隔时间单位是毫秒：1000毫秒 = 1秒

// 声明函数
        function fu() {
            console.log('我是小白');

        }
        // 声明定时器
         setInterval(fu, 1000)

2，关闭定时器

let 变量名= setInterval (函数，间隔时间)

clearInterval(变量名)

小结：

1，定时器函数有什么作用？

• 可以根据时间自动重复执行某些代码

2，定时器函数如何开启？

• setInterval(函数名，时间)

3，定时器函数如何关闭？

• let 变量名= setInterval (函数，间隔时间)
• clearInterval(变量名)

综合案例

<!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>

    <textarea name="" id="" cols="30" rows="10">
            用户协议

        欢迎您使用曲美家居为曲美客户提供的会员专享服务系统《曲美会员》。本协议是由用户（以下可称“用户”或“您”）与我司就所提供的产品及服务所订立的协议。为保障您的权益，请您在登录使用我司所提供的产品及服务之前，仔细阅读本协议（18周岁以下未成年人应当在其法定监护人陪同下阅读），包括免除或者限制我司的免责条款及对用户的权利限制条款。如果您进入我司或用户登录页面，确认已经阅读、同意本协议的条款并完成登录，或者通过其他任何方式获得和使用我司所提供的产品和服务，则视为您已经详细阅读了本协议的内容，同意遵守本协议的约定。您不应再以不了解本协议内容为由拒绝履行本协议。此外，我司有权在不另行通知的情况下，随时对本协议或相关协议进行修改，修改部分即时生效并适用。请您在使用产品和服务时进行关注并遵守，如您不同意修改，您可以随时停止使用；如果您继续使用，则视为您已经接受修改后的协议。
    </textarea>
    <br>

    <button class="btn" disabled>阅读用户协议确认(6)</button>

    <script>
        // 1，获取元素
        let btn = document.querySelector('.btn')
        // 声明一个变量存储定时器
        let i = 6
        // 2,开启定时器
        let timer = setInterval(function () {
            // 倒计时
            i--
            // 更换DOB对象属性值  赋值倒计时
            btn.innerHTML = `阅读用户协议确认(${i})`
            // 判断语句 判断i 倒计时到0就开启按钮  并关闭定时器
            if (i === 0) {
                // 关闭定时器
                clearInterval(timer)
                // 开启按钮
                btn.disabled = false;
                // 更换文字
                btn.innerHTML = '我同意该协议'
            }
        }, 1000)



    </script>
</body>

</html>

效果

DOM综合案例

<!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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .img_box {
            position: relative;
            width: 500px;
            height: 300px;
            background-color: antiquewhite;
            margin: 100px auto;
            border: 5px solid rgb(43, 21, 53);
            border-bottom: 0;
        }

        .pic {
            width: 100%;
            height: 100%;
        }

        .tip h3 {
            position: absolute;
            width: 100%;
            left: 0px;
            bottom: 0;
            height: 40px;
            background-color: rgba(52, 194, 8, 0.6);
            line-height: 40px;
            padding-left: 20px;
            color: #fff;
            font-weight: 400;

        }
    </style>
</head>

<body>
    <div class="img_box">
        <img src="./img/pic1.webp" alt="" class="pic">
        <div class="tip">
            <h3 class="text">艾斯，萨博，路飞</h3>
        </div>
    </div>

    <script>
        // 1,获取元素
        let pic = document.querySelector('.pic')
        let text = document.querySelector('.text')

        // 2，定义对象数组
        let arr = [
            { src: './img/pic1.webp', title: '艾斯，萨博，路飞' },
            { src: './img/pic2.webp', title: '我要成为海贼王，我要成为光月御田' },
            { src: './img/pic3.webp', title: '来吧，我要上了' },
            { src: './img/pic4.webp', title: '凯多，看招吧' },
            { src: './img/pic5.webp', title: '请给我一个面子，要不然我就....不客气啦' },
            { src: './img/pic6.webp', title: '四皇VS新时代' },
            { src: './img/pic7.webp', title: '御田大人~~~' },
            { src: './img/pic8.webp', title: '戏哈哈哈~~' },
            { src: './img/pic9.webp', title: '一起上吧' },
        ]
        // 定义变量
        let i = 0
        // 3，定时器
        setInterval(function () {
            i++
            //修改头的src属性
            pic.src = arr[i].src
            //修改文字内容
            text.innerHTML = arr[i].title

            // 无缝衔接
            if (i === arr.length - 1) {
                i = -1
            }

        }, 1000)

    </script>
</body>

</html>

效果