webAPI第一天-Dom获取&属性操作

学习目标

1. 掌握DOM属性操作，完成元素内容设置
2. 元素属性设置，控制元素样式

Web API 基本认知

变量声明
 变量声明有三个 var let 和 const
 我们应该用那个呢？
 首先var 先排除，老派写法，问题很多，可以淘汰掉…
 let or const ?
 建议： const 优先，尽量使用const，原因是：
 const 语义化更好
 很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢？
 实际开发中也是，比如react框架，基本const
 如果你还在纠结，那么我建议：
 有了变量先给const，如果发现它后面是要被修改的，再改为let

作用和分类

 作用: 就是使用 JS 去操作 html 和浏览器
 分类：DOM (文档对象模型)、BOM（浏览器对象模型）

什么是DOM
 DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
 DOM作用
 开发网页内容特效和实现用户交互

总结

1. Web API阶段我们学习那两部分？
 DOM
 BOM
2. DOM 是什么？有什么作用？
 DOM 是文档对象模型
 操作网页内容，可以开发网页内容特效和实现用户交互

DOM树

 DOM树是什么
 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
 描述网页内容关系的名词
 作用：文档树直观的体现了标签与标签之间的关系

DOM对象（重要）

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

获取DOM元素

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

获取DOM对象

目标：能查找/获取DOM对象
提问：我们想要操作某个标签首先做什么？
 肯定首先选中这个标签，跟 CSS选择器类似，选中标签才能操作
 查找元素DOM元素就是利用 JS 选择页面中标签元素
学习路径：
1. 根据CSS选择器来获取DOM元素 (重点)
2. 其他获取DOM元素方法（了解）

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

1. 选择匹配的第一个元素

语法：

document.queryselector('css选择器')

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

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

2. 选择匹配的多个元素

语法：

参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 对象集合

        const all_li = document.querySelectorAll('ul li')

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

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

总结

1. 获取页面中的标签我们最终常用那两种方式？
 querySelectorAll()
 querySelector()
2. 他们两者的区别是什么？
 querySelector() 只能选择一个元素， 可以直接操作
 querySelectorAll() 可以选择多个元素，得到的是伪数组，需要遍历得到
每一个元素
3. 他们两者小括号里面的参数有神马注意事项？
 里面写css选择器
 必须是字符串，也就是必须加引号

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

操作元素内容

目标：能够修改元素的文本更换内容
 DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
 就是操作对象使用的点语法。
 如果想要修改标签元素的里面的内容，则可以使用如下几种方式：
 学习路径：
1. 对象.innerText 属性
2. 对象.innerHTML 属性

1. 元素innerText 属性

 将文本内容添加/更新到任意标签位置
 显示纯文本，不解析标签

元素.innerHTML 属性

 将文本内容添加/更新到任意标签位置
 会解析标签，多标签建议使用模板字符

操作元素属性

操作元素常用属性

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

对象.属性 = 值

操作元素样式属性

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

1. 通过 style 属性操作CSS

语法：

对象.style.样式属性 = 值

对象.style.样式属性 = 值
//如果属性有连接符通过小驼峰命名法
例如：border-radius；在js中需要修改为borderRadius

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

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

操作类名(className) 操作CSS
 如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于css类名的形式。
 语法：

//获取元素
const box = document.querySelector('div')
将元素重新修改新的属性
        box.className = 'box'
元素.className = 类名

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

3. 通过 classList 操作类控制CSS

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

 语法:

//追加一个类名
元素.classList.add('类名')
//删除类名
元素.classList.remove('类名')
//切换类名，toggle(),有就删除，没有就加上。例如在页面切换白天黑夜
元素.classList.toggle('类名')
//判断类名，判断类名是否包含，有就返回true，没有就是false
元素.classList.contains('判断类名')

操作 表单元素 属性

表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框

正常的有属性有取值的 跟其他的标签属性没有任何区别
 获取: DOM对象.属性名
 设置: DOM对象.属性名 = 新值

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

自定义属性

标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected
 自定义属性：
 在html5中推出来了专门的data-自定义属性
 在标签上一律以data-开头
 在DOM对象上一律以dataset对象方式获取

定时器-间歇函数

定时器函数介绍

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

定时器函数基本使用

目标：能够使用定时器函数重复执行代码
定时器函数可以开启和关闭定时器

1. 开启定时器

语法：

setInterval(函数,时间)
//时间为毫秒

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

2. 关闭定时器

语法：

let n = setInterval(fn,1000)
            clearInterval(n)

一般不会刚创建就停止，而是满足一定条件再停止

总结

1. 定时器函数有什么作用？
可以根据时间自动重复执行某些代码
2. 定时器函数如何开启？
 setInterval(函数名, 时间)
3. 定时器函数如何关闭？

let n = setInterval(fn,1000)
            clearInterval(n)