webApi - DOM - 《前端知识库》

文档对象模型使用js操作html，把html中的标签、属性、文本映射到js中变为DOM对象通过操作DOM，来操作页面元素

quresySelector
- 在整个文档中根据css选择器查找元素
- 页面中有多个符合条件的元素，这个方法只返回第一个
- 语法
  - let 变量名 = document.quresySelector('css选择器')
quresySelectorAll
- 获取页面中复合条件的全部元素
- 获取到的数据会变成一个伪数组
- 语法
  - let 变量名 = document.quresySelectorAll('css选择器')
- 伪数组
  - 本质上还是对象，不能使用处理数组的方法如pop、push等
其他方法
- 根据id获取元素
  - getElenmentById('id值，不要加#')
- 根据标签名获取元素
  - getElenmentByTagName('标签名')
- 根据类名获取元素
  - getElenmentByClassName('类名，不要加.')
- 根据元素的name属性获取元素，仅适用于表单元素
  - getElenmentByName('name值')

获取
- let 变量名 = 节点.属性名
修改
- 节点.属性名 = ‘修改的值’
特殊属性：checked、disabled、selected
- 直接就是一个属性没有值
- 获取：会得到一个布尔值
- 修改：节点.属性名 = 布尔值（不需要要加’’）

设置元素样式
- 语法：元素.style.样式名=’值’
- 带有中横线的样式，去掉中横线，把中横线后面的字母变为大写字母（小驼峰写法）如：.style.backgroundColor / .style.fontSize
获取元素样式
- 语法：let 变量名 = window.getComputedStyle(元素).样式名称
  元素类名
设置元素类名
- 设置的类名后，会把元素原有的类名全部覆盖
- 语法元素.className = '类名'
获取元素类名
- 语法：元素.className
- 获取类名（获得到一个伪数组）
操作元素类名
- 元素.classList
- 添加类名：（添加后，不会把原来的类名覆盖）
  - 元素.classList.add(‘类名’)
- 移除类名：
  - 元素.classList.remove(‘类名’)
- 切换类名：（如果有则移除，如果没有则添加）
  - 元素.classList.toggle(‘类名’)

三要素
- 事件源：那个dom元素被事件触发了
- 事件名：什么方式触发，鼠标点击click、鼠标移入mouseenter
- 事件调用的函数：要执行的代码
语法
- 元素.addEventListener('事件名'，函数)
  事件处理this变量
在js的环境中不需要定义
- 1.全局作用域中，this表示window对象
- 2.事件处理函数中，this表示事件源（给那个元素添加的事件，this就表示谁）
  常用事件
click 点击
mouseenter 鼠标进入
mouseleave 鼠标离开
focus 获取焦点
blur 失去焦点
input 输入事件

DOM