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 兄弟节点查找 下一个兄弟节点 nextElementSibling 属性 上一个兄弟节点 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(事件类型
 
  
 
  
 
  
 
  
 
  
 
  
 ，事件处理函数












，获取捕获或者冒泡阶段) 匿名函数无法被解绑