一、Web API 基本认知
1.1 作用和分类
作用: 就是使用 JS 去操作 html 和浏览器
分类：DOM (文档对象模型)、BOM（浏览器对象模型）
1.2 什么是DOM
1.3 DOM树
1.4 DOM对象（重要）
二、获取DOM对象
2.1 根据CSS选择器来获取DOM元素 (重点)
① 选择匹配的第一个元素
语法：
document.querySelector('css选择器')
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的第一个元素,一个 HTMLElement对象。
如果没有匹配到，则返回null。
② 选择匹配的多个元素
语法：
document.querySelectorAll('css选择器')
参数:
包含一个或多个有效的CSS选择器 字符串
返回值：
CSS选择器匹配的NodeList 对象集合
如果没有匹配到，则返回null。
得到的是一个伪数组：
有长度有索引号的数组
但是没有 pop() push() 等数组方法
想要得到里面的每一个对象，则需要遍历（for）的方式获得。
注意事项
哪怕只有一个元素，通过querySelectAll() 获取过来的也是一个伪数组，里面只有一个元素而已
2.2 其他获取DOM元素方法（了解）
// 根据id获取一个元素
document.getElementById('id')
// 根据标签名字获取一类元素（一个伪数组）
document.getElementsByTagName('div')
// 根据类名获取元素（一个伪数组） 获取所有类名为btn的元素
document.getElementsByClassName('btn')
三、设置/修改DOM元素内容
3.1 document.write()
只能将文本内容追加到 </body> 前面的位置
文本中包含的标签会被解析
3.2 元素innerText 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签不会被解析
3.3 元素.innerHTML 属性
将文本内容添加/更新到任意标签位置
文本中包含的标签会被解析
四、设置/修改DOM元素属性
4.1 设置/修改元素常用属性
还可以通过 JS 设置/修改标签元素属性，比如通过 src更换 图片
最常见的属性比如： href、title、src 等
语法：
对象.属性 = 值
4.2 设置/修改元素样式属性
还可以通过 JS 设置/修改标签元素的样式属性。
比如通过 轮播图小圆点自动更换颜色样式
点击按钮可以滚动图片，这是移动的图片的位置 left 等等
① 通过 style 属性操作CSS
语法：
对象.style.样式属性 = 值
注意：
修改样式通过style属性引出
如果属性有-连接符，需要转换为小驼峰命名法
赋值的时候，需要的时候不要忘记加css单位
② 操作类名(className) 操作CSS
③ 通过 classList 操作类控制CSS
4.3 设置/修改 表单元素 属性
五、定时器-间歇函数
5.1 开启定时器
5.2 关闭定时器
let timer = setInterval(函数, 间隔时间)
clearInterval(timer)六、事件
6.1 事件监听
6.2 事件监听版本
let btn = document.querySelector('button')
// 新版本写法
btn.addEventListener('click',function() {
alert('我被点击了')
})
// 老版本写法
btn.onclick = function() {
alert('我被点击了')
}6.3 事件类型
鼠标事件：
鼠标触发
click 鼠标点击
mouseenter 鼠标经过
mouseleave 鼠标离开
焦点事件：
表单获得光标
focus 获得焦点
blur 失去焦点
键盘事件：
键盘触发
Keydown 键盘按下触发
Keyup 键盘抬起触发
文本事件
表单输入触发
input 用户输入事件
七、高阶函数
7.1 函数表达式
函数表达式和普通函数并无本质上的区别：
let fun = function() {
console.log('我是函数表达式')
}
fun()7.2 回调函数
如果将函数 A 做为参数传递给函数 B 时，我们称函数 A 为回调函数
简单理解： 当一个函数当做参数来传递给另外一个函数的时候，这个函数就是回调函数
使用匿名函数做为回调函数比较常见
常见的使用场景：
function fn() {
console.log('我是回调函数')
}
// fn 传递给了setInterval，fn就是回调函数
setInterval(fn, 1000)
box.addEventListener('click',function() {
console.log('我也是回调函数')
})八、环境变量
function fun() {
console.log(this) // window
}
fun()九、编程思想-排他思想
<body>
<button class="pink">第1个按钮</button>
<button>第2个按钮</button>
<button>第3个按钮</button>
<button>第4个按钮</button>
<button>第5个按钮</button>
<script>
let btns = document.querySelectorAll('button')
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener('click', function() {
/*
1. 干掉所有人
使用for循环
2. 复活他自己
通过this或者下标找到自己或者对应的元素
*/
// for (let j = 0; j < btns.length; j ++) {
// btns[j].classList.remove('pink')
// }
// this.classList.add('pink')
document.querySelector('.pink').classList.remove('pink')
this.classList.add('pink')
})
}
</script>
</body>十、节点操作
10.1 DOM节点
10.2 查找节点
节点关系：父节点、子节点、兄弟节点
① 父节点查找：
parentNode 属性
返回最近一级的父节点 找不到返回为null
语法
子元素.parentNoede
② 子节点查找：
childNodes
获得所有子节点、包括文本节点（空格、换行）、注释节点等
children （重点）
仅获得所有元素节点
返回的还是一个伪数组
语法
父元素.children
③ 兄弟关系查找
下一个兄弟节点
nextElementSibling 属性
上一个兄弟节点
previousElementSibling 属性
10.3 增加节点
① 创建节点
即创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点
创建元素节点方法：
document.createElement('标签名')
② 追加节点
要想在界面看到，还得插入到某个父元素中
插入到父元素的最后一个子元素:
父元素.appendChild(要插入的元素)
插入到父元素中某个子元素的前面：
父元素.insertBefore(要插入的元素,在那个元素前面插入)
③ 克隆节点
特殊情况下，我们新增节点，按照如下操作：
复制一个原有的节点
把复制的节点放入到指定的元素内部
克隆节点
元素.cloneNode(布尔值)
cloneNode会克隆出一个跟原标签一样的元素，括号内传入布尔值
若为true，则代表克隆时会包含后代节点一起克隆
若为false，则代表克隆时不包含后代节点
默认为false
④ 删除节点
若一个节点在页面中已不需要时，可以删除它
在 JavaScript 原生DOM操作中，要删除元素必须通过父元素删除
语法
父元素.removeChild(要删除的元素)
注意：
如不存在父子关系则删除不成功
删除节点和隐藏节点（display:none） 有区别的： 隐藏节点还是存在的，但是删除，则从html中删除节点
357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
