web APIs总结（1）

1. 根据CSS选择器来获取DOM元素 (重点）

• 获取一个DOM元素我们使用谁？能直接操作修改吗？
• querySelector() 可以
• 返回值：CSS选择器匹配的第一个元素,一个 HTMLElement对象。如果没有匹配到，则返null

---

• 获取多个DOM元素我们使用谁？能直接修改吗？ 如果不能可以怎么做到修改？
• querySelectorAll() 不可以， 得到的是伪数组，需要for遍历得到每一个元素
• 返回值：CSS选择器匹配的NodeList 对象集合
• （注：小括号里面的参数里面都要写css选择器，必须是字符串，也就是必须加引号）

2. 操作元素内容

元素.innerText 属性：将文本内容添加/更新到任意标签位置。显示纯文本，不解析标签
元素.innerHTML 属性：将文本内容添加/更新到任意标签位置.会解析标签，多标签建议使用模板字符

3. 通过 style 属性操作CSS

语法：对象.style.样式属性 = ‘值’
（注：1. 修改样式通过style属性引出。2. 如果属性有-连接符，需要转换为小驼峰命名法。3. 赋值的时候，需要的时候不要忘记加css单位）

如果需要修改一个div盒子的样式，比如 padding-left, 如何写？
element.style.paddingLeft = ‘300px’ 小驼峰命名

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

可以同时修改多个样式，但是直接使用 className 赋值会覆盖以前的类名
语法：

//active是一个CSS类名
元素.className = 'active'

5. 通过 classList 操作类控制CSS

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

//追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类（有该类名就删除，没有就加上）（重要）
元素.classList.toggle('类名')

6. 操作表单元素属性

• （点击眼睛，可以看到密码，本质是把表单类型转换为文本框）

表单.value = '用户名'
表单.type = 'password'

• 如果为true 代表添加了该属性 如果是false 代表移除了该属性。
  比如： disabled、checked、selected

表单.checked = true//选中按钮
表单.disabled = true//禁用按钮

7. 定时器-间歇函数

每隔一段时间需要自动执行一段代码，不需要我们手动去触发（例如：网页中的倒计时）
开启定时器：
setInterval(函数, 间隔时间)

function repeat() {
	console.log('一秒执行一次')
}, 1000)
//每隔一秒时间调用repeat函数
setInterval(repeat, 1000)

作用：每隔一段时间调用这个函数。间隔时间单位是毫秒（注：函数名字不需要加括号。定时器返回的是一个id数字）
关闭定时器：
let 变量名 = setInterval(函数名, 间隔时间)；clearInterval(变量名)

let timer = setInterval(function(){
	console.log('一秒执行一次')
},1000)
clearInterval(timer)

8. 事件监听

语法：
元素对象.addEventListener('事件类型',要执行的函数)

<button>点击</button>
<script>
	const btn = document.querySelector('button')
    btn.addEventListener('click', function () {
      alert('你早呀~')
    })
</script>

事件监听三要素：
事件源：那个dom元素被事件触发了，要获取dom元素
事件类型：用什么方式触发，比如鼠标单击 click、鼠标经过 mouseover 等
事件调用的函数：要做什么事
（注：事件类型要加引号。函数是点击之后再去执行，每次点击都会执行一次）

9. 事件类型

• 鼠标事件（鼠标触发）：click 鼠标点击。mouseenter 鼠标经过。mouseleave 鼠标离开
• 焦点事件（表单获取光标）：focus 获得焦点。blur 失去焦点
• 键盘事件（键盘触发）：Keydown 键盘按下触发。Keyup 键盘抬起触发
• 文本事件（表单输入触发）：input 用户输入事件

10. 说说this吧，this指向谁

• 非严格模式下，普通函数中，this指向的是window
• 若是事件监听函数，this指向的是调用者
• 箭头函数是没有this的
• 若想改变this的指向方向，可用apply、call
• 【谁调用， this 就是谁】 是判断 this 指向的粗略规则

11. 回调函数

• 将函数 A 作为参数传递给函数 B 时，我们称函数 A 为回调函数
• 使用场景：setInterval里的函数和事件监听里的函数，写完之后不会立马执行。
  定时器每隔一段时间便回头调用这个函数，事件监听每点击一次，也回头调用该函数。
• 使用匿名函数做为回调函数比较常见
  

12. 事件冒泡

• 捕获阶段（加true）是 从父到子。**冒泡阶段（重要）**是从子到父
• 当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件(如：都是click点击事件）
• 事件冒泡是默认存在的

13. 阻止冒泡如何做？

因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

事件对象.stopPropagation()

14. 阻止元素默认行为如何做？

我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转

e.preventDefault()

15. 解绑事件

**（注意：匿名函数无法被解绑）**所以要给函数命名

function fn() {
alert('点击了')
}
btn.addEventListener('click', fn)
// L2 事件监听移除解绑
btn.removeEventListener('click', fn)

16. 鼠标经过事件

• mouseover 和 mouseout 会有冒泡效果
• mouseenter 和 mouseleave 没有冒泡效果（推荐）

17.事件委托的好处

• 原理：给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件
• 实现：事件对象.target.tagName 可以获得真正触发事件的元素
  （注：e.target是我们点击的对象）

18. 自定义属性

定义的id值为字符串型

<div data-id="0"></div>
<script>
const div = document.querySelector('div')
console.log(div.dataset.id) // 0 
</script>