DOM工作原理
1. 代码从硬盘 读取到 内存 （代码）
2. 生成DOM树
修改了dom树，最终渲染的页面也会改变
3. 渲染引擎开始渲染dom树 （页面）
1. 查询元素:
获取单个元素: document.querySelector('选择器')
获取多个元素: document.querySelectorAll('选择器')
**两者的区别:**
querySelector: 得到DOM对象可以直接使用DOM语法进行修改属性
querySelectorAll: 无法直接修改需要通过下标进行修改属性
2.元素的属性操作:
2.1内容属性
元素.innerText 获取元素的文本
元素.innerHtml 获取元素的标签+文本
区别:
元素.innerText 无法解析文本中的标签
元素.innerHtml 可以解析文本中的标签
2.2 html属性:元素.属性名=属性值
a.href
img.src
2.3 样式属性
(1) 单个样式:元素.style.属性名=属性值
(2)多个样式:
className: 元素.class.Name='类名'
(3)classList语法:
新增类名:元素.classList.add('类名')
移除类名： 元素.classList.remove('类名')
切换类名： 元素.classList.toggle('类名')
3.表单元素的特殊属性
3.1 表单内容: 元素.value 获取文本
3.2 表单布尔属性
元素.disabled 获取禁用状态 （布尔类型）
元素.checked 获取选中状态（用于radio/checkbox）
元素.selected 获取选中状态(用于option)
4.事件
1.交互功能 : 什么元素 在什么时刻 做什么事情
2.事件三要素
事件源 : 什么元素
事件类型 : 什么时刻
事件处理函数 : 做什么事
3.注册事件 ： 给元素添加交互
事件源.事件类型 = 事件处理函数
4.事件原理及注意点
(1)事件处理函数在注册的时候不会执行. (函数在声明的时候不会执行)
(2)事件处理函数只有两种情况可以执行
第一种： 用户主动触发交互， 浏览器会捕捉交互，底层会自动帮我们调用对象的方法
第二种： 手动调用对象事件处理函数
