Web Apls第一天 DOM-获取元素、修改属性

1.Web API基本认知

作用和分类

作用使用js操作HTML和浏览器
分类：DOM（文档对象模型）、BOM（浏览器对象模型）

什么是Dom

DOM是浏览器提供的一套专门用来操作网页内容的功能
作用：开发页面特效和实现用户交互

Dom树

将HTML文档以树状结构表现出来

DOM对象（重点）

DOM对象：浏览器根据html标签生成的 JS对象
-所有的标签属性都可以在这个对象上面找到
-修改这个对象的属性会自动映射到标签身上
DOM的核心思想
-把网页内容当做对象来处理
document 对象
-是 DOM 里提供的一个对象
-所以它提供的属性和方法都是用来访问和操作网页内容的
– 例：document.write()
-网页所有内容都在document里面
#2. 获取DOM对象

根据CSS选择器来获取DOM元素（重点）

	<div>我是盒子</div>
    <div class="three">第三个</div>
    <script>
        // js获取对象
        let div = document.querySelector('div')
        let div1 = document.querySelector('.three')
        let li = document.querySelector('ul li:last-child')
        console.log(div);
        console.log(div1);
        console.log(li)
        //获取多个元素
        let lis = doucument.querySelectorAll('css选择器')
        
        
    </script>

//只有遍历的方式来得到里面每一个对象
//获取多个元素
let lis = doucument.querySelectorAll('css选择器')
for (let i = 0; i < lis.length; i++) {
            console.log(lis[i]);
}

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

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

doucument.write()方法

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

对象.innerText属性

2. 元素innerText 属性
    将文本内容添加/更新到任意标签位置
    文本中包含的标签不会被解析

对象.innerHTML属性

3. 元素.innerHTML 属性
    将文本内容添加/更新到任意标签位置
    文本中包含的标签会被解析

	<div>我是盒子</div>
    <script>
        //获取标签
        //修改标签内容
        // innerText不识别标签
        let box = document.querySelector('div')
        // box.innerText = '欢迎来到我的世界'
        // innerHTML可以识别标签
        box.innerHTML = '<strong>zjwnszbdjy</strong>'
    </script>

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

3.1设置/修改元素常用属性

 还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
 最常见的属性比如： href、title、src 等

<img src="./images/b02.jpg" alt="">
<script>
// 换图片，获取元素
let pic = document.querySelector('img')
//修改元素
pic.src = './images/b03.jpg'
pic.title = '这是一个图片'

小案例：每次刷新更换图片

//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)
       		pic.src = './image/${num}.webp'
//3.完成src 属性赋值

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

还可以通过 JS 设置/修改标签元素的样式属性。
 比如通过 轮播图小圆点自动更换颜色样式
 点击按钮可以滚动图片，这是移动的图片的位置 left 等等
学习路径：

通过 style 属性操作CSS

let box = document.querySelector('div')
box.style.backgroundColor = 'blue'
box.style.width = '400px'
box.style.marginTop = ' 100px'

注意：

1. 修改样式通过style属性引出
2. 如果属性有-连接符，需要转换为小驼峰命名法
3. 赋值的时候，需要的时候不要忘记加css单位
   需求：当我们刷新页面，页面中的背景图片随机显示不同的图片
   分析：
   ①： 随机函数
   ②： css页面背景图片 background-image
   ③： 标签选择body， 因为body是唯一的标签，可以直接写 document.body.style

document.body.style.backgroundImage = `图片链接`

操作类名(className) 操作CSS

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
注意：
①由于class是关键字, 所以使用className去代替
②className是使用新值换旧值, 如果需要添加一个类,需要保留之前的类名

let box = doucument.querySelector('div')
box.className = '类名'
//需要新加的类
box.className = '旧的类名 新的类名'

通过 classList 操作类控制CSS

为了解决className 容易覆盖以前的类名，我们可以通过classList方式追加和删除类名

// add是一个方法 添加 追加
box.classList.add('新类名')
// remove() 移除类
box.classList.remove('类名')
//切换类
box.classList.toggle('类名')

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

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

input.value = '小米13Pro'
input.type = 'password'

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

let btn = document.querySelector('.leiming')
checkbox.checked = false

4.定时器-间歇函数

 网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发
 例如：网页中的倒计时
 要实现这种需求，需要定时器函数
 定时器函数有两种，今天我先讲间歇函数

开启定时器

setInterval(函数， 间隔时间)

	    //匿名函数
        setInterval(function (){
            console.log('易烊千玺');
        }, 1000)

        // 正常调用
        function show() {
            document.write('易烊千玺')
        }

        setInterval(show, 1000)
        //关闭定时器
        clearInterval(show)

关闭定时器

clearInterval（变量名）
注意：

1. 函数名字不需要加括号
2. 定时器返回的是一个id数字

作用：可以根据时间自动重复执行某些代码
案例：倒计时效果

    <button class="btn" disabled>我已阅读协议(6)</button>
    <script>
        let btn = document.querySelector('button')
        // 一个变量计数
        let i = 6
        // 开启定时器
        let time = setInterval(show, 1000)
        function show () {
            i--
            btn.innerHTML = `我已阅读协议(${i})`
            if (i === 0) {
                clearInterval(time)
                btn.disabled = false
                btn.innerHTML = '我同意该协议'
            }
        }
    </script>

5.综合案例

对网页里面的焦点图，它们可以直接自动切换

  		//获取图片元素 和 h3
        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 ){
            i = -1
            }
            // i === 8 ? i = -1 : i //三元表达式（比if简单）
        }, 1000);