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元素（重点）

1. 选择匹配的第一个元素

• 语法：

  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
• 事件调用的函数 ：要做什么事情

事件类型

高阶函数

• 函数表达式

  • 函数也是[数据]
  • 把函数赋值给变量

• 回调函数

  • 把函数当作里一个函数的参数传递，就是回调函数
  • 回调函数本身还是函数
  • 使用匿名函数做为回调函数比较常见

环境对象

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

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

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

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

编程思想

排他思想

使用：

1. 干掉所有人

   使用for循环

2. 复活自己

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

2

节点操作

DOM节点

1. 节点类型：

• 元素节点：

  • 所有标签 比如 body、div
  • html 是根节点

• 属性节点

  • 所有的属性 比如 herf

• 文本节点

  • 所有的文本

  • 其他

2. 查找结点

   节点关系：

   • 父节点查找

     • parentNode 属性

     • 返回最近一级的父节点 找不到返回为 null

       子元素.parenNode
       

   • 子节点查找

     • childNodes

       获得所有子节点、包括文本节点（空格、 换行）、注释节点等

     • children

       • 仅获得所有元素节点

       • 返回的还是一个伪数组

         父元素.children
         

   • 兄弟节点查找

     1. 下一个兄弟节点
        • nextElementSibling 属性
     2. 上一个兄弟节点
        • previousElementSibling 属性

3. 增加节点

   1.创建节点

   • 创造出一个新的网页元素

   • 创建元素节点方法：

     document.createElement（'标签名'）
     

   2.追加节点

   • ​ 插入到父元素的最后一个子元素：

     父元素.appendChild(要插入的元素)
     

   • ​ 插入到父元素的某个子元素的前面：

     父元素.insertBefore(要插入的元素, 在哪个元素前面)
     

   3.克隆节点

   • 若为true,则代表克隆时会包含 后代节点一起克隆
   • 若为false,则代表克隆时不包含后代节点
   • 默认为false

4. 删除节点

   • 删除元素通过父元素删除

   • 语法：

     父元素.removeChild(要删除的元素)
     

   • 注：

     • 不存在父子关系则删除不成功
     • 删除节点和隐藏节点（display：none）有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点

时间对象

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

1.实例化

• 获得当前时间

let date = new Date() 

• 获得指定时间

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

2.时间对象方法

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(事件类型，事件处理函数，获取捕获或者冒泡阶段)
      • 匿名函数无法被解绑