DOM

1

作用和分类

作用：使用 JS 去操作 html 和浏览器
分类：DOM(文档对象模型)、BOM(浏览

器对象模型)

DOM

是用来呈现以及与任意HTML 或 XML文档交互的API
简单说：DOM 是浏览器提供的一套专门用来操作网页内容的功能
DOM的作用：
- 开发页面内容和实现用户交互

DOM树

将HTML 文档以树状结构直观的表现出来，被称之文档树或 DOM 树
描述网页内容关系的名词
作用：文档树直观地体现了标签与标签之间的关系

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ov39Ps9k-1668846708684)(C:\Users\s2490\Desktop\知识总结\JavaScript\assets\1665471669949.png)]

DOM对象（*）

DOM对象：浏览器根据html标签生成的 JS 对象
- 浏览器根据html标签生成的 JS 对象
- 所有标签属性都可以在这个对象上面找到
- 修改这个对象的属性会自动映射到标签身上
DOM的核心思想
把网页内容当作对象来处理
document 对象
- 是 DOM 里提供的对象
- 所以它提供的属性和方法都是用来访问和操作页面内容的
  - 例：document.write()
- 网页所用内容都在document里面

获取DOM对象

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

选择匹配的第一个元素

语法：

document.querySelector('css选择器 ')

参数：包含一个或多个有效的css选择器字符串
返回值：css选择器匹配的第一个元素，一个HTMLElement对象。如果没有匹配到，则返回null。

2.选择匹配的多个元素

语法：

document.querySelectorAll('css选择器 ')

参数：包含一个或多个有效的css选择器字符串
返回值：CSS 选择器匹配的 NodeList 对象集合
得到的是一个伪数组：
- 有长度有索引号的数组
- 但是没有 pop() push() 登数组方法

2.其他获取 DOM 元素方法（了解）

// 根据 id 获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素 获取页面 所有 div
document.getElementsByTagName('div')
// 根据类名获取元素 获取页面 所有类名为 a 
document.getElementsByClassName('a')

设置 / 修改 DOM 元素内容

1.document.write()

只能将文本内容追加到</body>前面的位置
文本包含的标签会解析标签

2.元素innerText属性

将文本内容添加 / 更新到任意标签位置
文本中包含的标签不会被解析

3.元素innerHTML属性

将文本内容添加 / 更新到任意变迁位置
文本中包含的标签会被解析

设置 / 修改 DOM 元素属性

1.设置 / 修改元素常见属性

还可以通过 js 设置 / 修改标签元素的样式属性
常见的属性：href、title、src …

语法：

let img = document.querySelector('img')
img.src = './images/1.png'

2.设置 / 修改元素样式属性

1.通过 style 属性操作css

语法:

//对象.style.样式属性 = 值
let div = document.querySelector("div")
div.style.backgroundColor = "pink"

2.操作类名修改css属性

语法：

// active 是一个 css 类名
let div = document.querySelector("div")
div.className = "active"

注意：
- class 是关键字，所以使用className代替
- className使用新值换旧值，如果添加一个类，需要保存之前的类名

3.通过classList操作css

语法：

// active 是一个 css 类名
let div = document.querySelector("div")
// 追加一个类
div.classList.add('active')
// 删除一个类
div.classList.remove('active')
// 切换一个类
div.classList.toggle('active')

3.设置 / 修改表单元素属性

获取：DO M 对象.属性名
设置：DOM对象.属性名 = 新值

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

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示如果为true代表添加了该属性如果是false代表移除了该属性

比如：disabled(不可选中)、 checked、 selected()

定时器 - 间歇函数

1.开启定时器

setInterval(函数， 间隔时间)

作用：每隔一段时间调用这个函数
间隔时间单位是毫秒

2.关闭定时器

let time = setInterval(函数， 间隔时间)
clearInterval(time)

事件

事件监听

语法：

元素.addEventListener('事件'，要执行的函数 )

事件监听三要素：

事件源：哪个 DOM 元素被事件触发了，要获取 DOM 元素
事件：什么触发的，比如：click mouseover
事件调用的函数：要做什么事情

事件类型

事件类型
鼠标事件	click(点击)	mouseenter（鼠标经过）	mouseleave（鼠标离开）
焦点事件	focus（获得焦点）	blur（失去焦点）
键盘事件	Keydown（键盘按下触发）	Keyup（键盘抬起触发）
文本事件	input（用户输入事件）

高阶函数

函数表达式
- 函数也是[数据]
- 把函数赋值给变量
回调函数
- 把函数当作里一个函数的参数传递，就是回调函数
- 回调函数本身还是函数
- 使用匿名函数做为回调函数比较常见

环境对象

能够分析判断函数运行在不同环境中 this 所指代的对象

环境对象指的是函数内部特殊的变量this , 它代表着当前函数运行时所处的环境

作用：弄清楚 this 的指向，可以让我们代码更简洁

函数的调用方式不同， this 指代的对象也不同

编程思想

排他思想

使用：

干掉所有人

使用for循环
复活自己

通过 this 或者下表找到自己或者对应的元素

2

节点操作

DOM节点

节点类型：

元素节点：
- 所有标签比如 body、div
- html 是根节点
属性节点
- 所有的属性比如 herf
文本节点
- 所有的文本
- 其他

查找结点

节点关系：
- 父节点查找
  - parentNode 属性
  - 返回最近一级的父节点找不到返回为 null
```
子元素.parenNode
```
- 子节点查找
  - childNodes
    
    获得所有子节点、包括文本节点（空格、换行）、注释节点等
  - children
    - 仅获得所有元素节点
    - 返回的还是一个伪数组
```
父元素.children
```
- 兄弟节点查找
  1. 下一个兄弟节点
    - nextElementSibling 属性
  2. 上一个兄弟节点
    - previousElementSibling 属性
增加节点

1.创建节点
- 创造出一个新的网页元素
- 创建元素节点方法：
```
document.createElement（'标签名'）
```
2.追加节点
- 插入到父元素的最后一个子元素：
```
父元素.appendChild(要插入的元素)
```
- 插入到父元素的某个子元素的前面：
```
父元素.insertBefore(要插入的元素, 在哪个元素前面)
```
3.克隆节点
- 若为true,则代表克隆时会包含后代节点一起克隆
- 若为false,则代表克隆时不包含后代节点
- 默认为false
删除节点
- 删除元素通过父元素删除
- 语法：
```
父元素.removeChild(要删除的元素)
```
- 注：
  - 不存在父子关系则删除不成功
  - 删除节点和隐藏节点（display：none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象

时间对象：用来表示时间的对象
作用：可以得到当前系统时间

1.实例化

获得当前时间

let date = new Date()

获得指定时间

let date = new Date('2020-10-31')

2.时间对象方法

方法	作用	说明
getFullYear()	获得年份	获取四位年份
getMonth()	获得月份	取值为0~11
getDate()	获取月份中的每一天	不同月份取值也不相同
getDay()	获取星期	取值为0~6
getHours()	获取小时	取值为0~23
getMinutes()	获取分钟	取值为0~59
getSeconds()	获取秒	取值为0~59

3.时间戳

1.通过时间戳得到是毫秒，需要转换为秒在计算
2.转换公式：

d=parselnt(总秒数/60/60/24)；//计算天数
h=parselnt(总秒数/60/60%24); //计算小时
m=parselnt(总秒数/60%60)；//计算分
s=parselnt(总秒数%60)；//计算当前秒数

重绘和回流

1.浏览器进行界面渲染

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nhdoeFG8-1668846708685)(C:\Users\s2490\Desktop\知识总结\JavaScript\assets\1665635173326.png)]

解析（Parser)HTML,生成DOM树(DOM Tree)
同时解析(Parser)CSS,生成样式规则(Style Rules)
根据DOM树和样式规则，生成渲染树(Render Tree)
进行布局Layout(回流 / 重排)：根据生成的渲染树，得到节点的几何信息（位置，大小)
进行绘制Painting(重绘)：根据计算和获取的信息进行整个页面的绘制
Display:展示在页面上

2.重绘和回流

回流（重排）

当Render Tree中部分或者全部元素的尺寸、结构、布局等发生改变时，浏览器就会重新渲染部分或全部文档的过程称为回流。
重绘

由于节点（元素）的样式的改变并不影响它在文档流中的位置和文档布局时（比如：color、background-color、outline等)，称为重绘。

重绘不一定引起回流，而回流一定引起重绘。

导致回流（重排）的操作：
- 页面的首次刷新
- 浏览器的窗口大小发生改变
  元素的大小或位置发生改变
- 改变字体的大小
- 内容的变化（如：input框的输入，图片的大小)
- 激活css伪类（如：：hover)
- 脚本操作DOM(添加或者删除可见的DOM元素)

简单理解影响到布局，就是回流（重排）

3

事件对象

获取事件对象

事件对象有事件触发时的相关信息
在事件绑定的回调函数的第一个参数就是事件对象
一般命名为 event、ev、e

元素.addEventListener('click',function(e){
})

事件对象常用属性

type
- 获取当前的事件类型
clientX / clientY
- 获取光标相对于浏览器可见窗口左上角的位置
offsetX / offsetY
- 获取光标相当于当前 DOM 元素左上角的位置
key
- 用户按下的键盘键的值
- 现在不提倡使用keyCode

事件流

事件流指的是事件完整执行过程中的流动路径

1.捕获阶段
- 从父到子
冒泡阶段
从子到父
事件冒泡概念：
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡
2.事件捕获概念：
- 从DOM的根元素开始去执行对应的事件（从外到里）
- 事件捕获需要写对应代码才能看到效果
- 代码：
```
DoM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
```
- addEventListener第三个参数传入true代表是捕获阶段触发（很少使用）
- 若传入false代表冒泡阶段触发，默认就是false
- 若是用L0事件监听，则只有冒泡阶段，没有捕获
3.阻止事件流动
- 因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
- 若想把事件就限制在当前元素内，就需要阻止事件流动
- 阻止事件流动需要拿到事件对象
- 语法：
```
事件对象.stopPropagation()
```
- 1.阻止默认行为，比如链接点击不跳转，表单域的跳转
- 语法：
```
e.preventDefault()
```
- 2.两种注册事件的区别：
  - 传统on注册(L0)
    - 同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
    - 直接使用ul覆盖偶就可以实现事件的解绑
    - 都是冒泡阶段执行的
  - 事件监听注册(L2)
    - 语法：addEventListener(事件类型，事件处理函数，是否使用捕获)
    - 后面注册的事件不会覆盖前面注册的事件（同一个事件）
    - 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
    - 必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)
      的存在，所以容易导致事件影响到父级元素
- 若想把事件就限制在当前元素内，就需要阻止事件流动
- 阻止事件流动需要拿到事件对象
- 语法：
```
事件对象.stopPropagation()
```
- 1.阻止默认行为，比如链接点击不跳转，表单域的跳转
- 语法：
```
e.preventDefault()
```
- 2.两种注册事件的区别：
  - 传统on注册(L0)
    - 同一个对象，后面注册的事件会覆盖前面注册（同一个事件）
    - 直接使用ul覆盖偶就可以实现事件的解绑
    - 都是冒泡阶段执行的
  - 事件监听注册(L2)
    - 语法：addEventListener(事件类型，事件处理函数，是否使用捕获)
    - 后面注册的事件不会覆盖前面注册的事件（同一个事件）
    - 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
    - 必须使用removeEventListener(事件类型，事件处理函数，获取捕获或者冒泡阶段)
    - 匿名函数无法被解绑

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

DOM（操作）

DOM

1

作用和分类

DOM

DOM树

DOM对象（*）

获取DOM对象

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

2.其他获取 DOM 元素方法（了解）

设置 / 修改 DOM 元素内容

1.document.write()

2.元素innerText属性

3.元素innerHTML属性

设置 / 修改 DOM 元素属性

1.设置 / 修改元素常见属性

2.设置 / 修改元素样式属性

1.通过 style 属性操作css

2.操作类名修改css属性

3.通过classList操作css

3.设置 / 修改表单元素属性

定时器 - 间歇函数

事件

事件监听

事件类型

高阶函数

函数表达式

回调函数

环境对象

编程思想

排他思想

2

节点操作

节点类型：

元素节点：

属性节点

文本节点

查找结点

节点关系：

父节点查找

子节点查找

兄弟节点查找

增加节点

1.创建节点

2.追加节点

3.克隆节点

删除节点

时间对象

1.实例化

2.时间对象方法

3.时间戳

重绘和回流

1.浏览器进行界面渲染

2.重绘和回流

重绘不一定引起回流， 而回流一定引起重绘。

3

事件对象

获取事件对象

事件对象常用属性

事件流

相关文章

评论(0)

提示：请文明发言 取消回复

排行榜展示

最近更新

重绘不一定引起回流，而回流一定引起重绘。

提示：请文明发言取消回复