DOM工作原理
- 代码从硬盘 读取到 内存 （代码）
- 生成DOM树
修改了dom树，最终渲染的页面也会改变 - 渲染引擎开始渲染dom树 （页面）
获取页面元素
如何获取页面元素
通过选择器 语法 | 示例 | 描述 | 返回值 | | ------------------ | -------------------------------- | ------------------ | ---------- | | querySelector() | document.querySelector('选择器') | 根据选择器获取满足条件
第一个元素 | DOM对象 null | | querySelectorAll() | document.querySelectorAll('选择器') | 根据选择器获取满足条件所有元素 | 伪数组
- 1.获取单个元素
document.querySelector('选择器')
- 2.获取多个元素
document.querySelectorAll('选择器')
- 3.两者区别
querySelector() : 得到dom对象, 可以直接使用dom语法修改
querySelectorAll() : 得到数组, 不可以直接使用dom语法。 需要通过下标先取出里面的dom对象
元素内容操作
一定要先获取元素，才可以对元素进行其他操作
获取文本
元素.innerText
获取文本（包含子元素文本）
获取文本 + 标签
元素.innerHTML
两者区别
- innerText : 无法解析文本中的标签
- innerHTML : 可以解析文本中的标签
元素属性操作
| 语法 | 作用 |
|---|---|
| 元素.id | 获取id |
| 元素.className | 获取类名 |
| 元素.href | 获取链接（常用于a标签） |
| 元素.src | 获取路径(常用于img标签) |
- 1.先获取元素
- 2.获取属性
元素.属性名
- 3.设置属性
元素.属性名 = 值
元素样式属性操作
| 语法（普通元素） | 示例 | 描述 |
|---|---|---|
| 元素.style.样式名 | box.style.backgroundColor | 操作单个样式(行内权重) |
| 元素.className | box.className | 操作元素类名(类权重),会覆盖原有类名 |
| 元素.classList.add('类名') | box.classList.add('one') | 新增类名 |
| 元素.classList.remove('类名') | box.classList.remove('one') | 移除类名 |
| 元素.classList.toggle('类名') | box.classList.toggle('one') | 切换类名(有则移除，无则新增) |
| 元素.classList.contains('类名') | box.classList.contains('one') | 判断类名（true:有 false:没有） |
通过style操作样式
- 1 先获取元素
- 2 设置元素css样式： 元素.style.样式名 = 样式值
注意点： 如果css属性有- 的需要转成小驼峰命名
(原因：js命名规范与css命名规范不一样)
小驼峰： (1)去掉- (2)-后面首字母大写
通过className操作样式
- 1.先获取元素
- 2.className语法: 元素.className = '类名' (会覆盖原本的类名)
类名需要通过className来访问，而不是class，因为class是js中的关键字
通过classList操作样式
- 1 先获取元素
- 2 语法:
追加类： 元素.classList.add('类名')
移除类： 元素.classList.remove('类名')
切换类： 元素.classList.toggle('类名')
切换意思： 如果有,则移除。 没有则追加。
表单元素常用属性
| 语法 | 作用 |
|---|---|
| 元素.value | 获取文本 |
| 元素.disabled | 获取禁用状态 （布尔类型） |
| 元素.checked | 获取选中状态（用于radio/checkbox） |
| 元素.selected | 获取选中状态(用于option) |
事件介绍及注册事件
1.事件：js处理用户交互的一种机制
- 交互：什么元素在什么时刻做什么事
2.事件的三要素：组成事件的三要素
- 事件源：什么元素（div p）
- 事件类型：什么时刻（鼠标点击onclick 鼠标移入：onmouseover）
- 事件处理函数：做什么事（一段代码：函数）
3.注册事件:本质是给元素属性赋值
- 事件源.事件类型 = 事件处理函数
- box.onclick = function(){}
4.事件工作原理
- a.事件在注册的时候，不会执行（函数在声明的时候不会执行）
- b.一旦元素注册事件之后，当用户触发了这个事件的时候，浏览器会自动捕捉到这个事件，然后帮我们调用元素对象的事件处理函数
