WEBSTORM前端 —— 第5章：Web APIs —— 第1节：Dom获取属性操作
目录
零、前言——变量声明
一、Web API 基本认知
1.1 作用和分类
1.2 什么是DOM
1.3 DOM树
1.4 DOM对象（重要）
二、获取DOM元素
2.1 根据CSS选择器来获取DOM元素 (重点)
1. 选择匹配的第一个元素
2. 选择匹配的多个元素
3.根据CSS选择器来获取DOM元素
4.练习
2.2 其他获取DOM元素方法（了解）
三、操作元素内容
3.1. 元素innerText 属性
3.2. 元素.innerHTML 属性
3.3.案例——年会抽奖案例
四、操作元素属性
4.1 操作元素常用属性
4.2 操作元素样式属性
1.通过 style 属性操作CSS
2. 操作类名(className) 操作CSS
3. 通过 classList 操作类控制CSS
4.3 操作表单元素 属性
4.4 自定义属性
五、定时器-间歇函数
5.1. 开启定时器
5.2. 关闭定时器
5.3案例——阅读注册协议
六、综合案例
零、前言——变量声明
<!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><script>// let obj = {name: 'andy'}// let obj = new Object()// let obj = {}// let num = 10// num.age = 20// console.log(num)// let obj.name = 'andy'let arr = ['red', 'green']// 1.删除 数组.splice(起始位置, 删除个数)// arr.splice(1, 1)// console.log(arr) // splice 修改原来数组// 2. 添加 数组.splice(起始位置, 删除个数, 添加的元素)// 把 pink 放到 red 和 green中间 // 起始位置 要放到的索引号位置// arr.splice(1, 0, 'pink')arr.splice(1, 0, 'pink', 'hotpink')console.log(arr)</script>
</body></html>一、Web API 基本认知
1.1 作用和分类
- 作用: 就是使用 JS 去操作 html 和浏览器
- 分类：DOM (文档对象模型)、BOM（浏览器对象模型）
1.2 什么是DOM
- DOM（Document Object Model——文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API
- 白话文：DOM是浏览器提供的一套专门用来 操作网页内容 的功能
- DOM作用 ：开发网页内容特效和实现用户交互
1.3 DOM树
DOM树是什么
- 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
- 描述网页内容关系的名词
- 作用：文档树直观的体现了标签与标签之间的关系
1.4 DOM对象（重要）
①DOM对象：浏览器根据html标签生成的 JS对象
- 所有的标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
②DOM的核心思想
- 把网页内容当做对象来处理
③document 对象
- 是 DOM 里提供的一个对象
- 所以它提供的属性和方法都是用来访问和操作网页内容的
- 例：document.write()
- 网页所有内容都在document里面
<!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><div>123</div><script>const div = document.querySelector('div')// 打印对象console.dir(div) // dom 对象</script>
</body></html>二、获取DOM元素
2.1 根据CSS选择器来获取DOM元素 (重点)
1. 选择匹配的第一个元素
语法：
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的 第一个元素 ,一个 HTMLElement对象。 如果没有匹配到，则返回null。
多参看文档：https://developer.mozilla.org/zh-CN/docs/Web/API/Document/querySelector
2. 选择匹配的多个元素
语法：
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的 NodeList 对象集合
例如：
3.根据CSS选择器来获取DOM元素
得到的是一个 伪数组 ：
- 有长度有索引号的数组
- 但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
注意事项： 哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个 伪数组 ，里面只有一个元素而已
4.练习
请控制台依次输出 3个 li 的 DOM对象
<!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><style>.box {width: 2