DOM（操作）

发布时间：2023-05-23 文章分类：WEB开发, 电脑百科 投稿人：李佳 字号： 默认 | 大 | 超大 打印

DOM

1

作用和分类

DOM

DOM树

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

DOM对象（*）

获取DOM对象

1.根据CSS选择器来获取DOM元素（重点）
  1. 选择匹配的第一个元素
2.其他获取 DOM 元素方法（了解）
// 根据 id 获取一个元素
document.getElementById('nav')
// 根据标签获取一类元素 获取页面 所有 div
document.getElementsByTagName('div')
// 根据类名获取元素 获取页面 所有类名为 a 
document.getElementsByClassName('a')

设置 / 修改 DOM 元素内容

1.document.write()
2.元素innerText属性
3.元素innerHTML属性

设置 / 修改 DOM 元素属性

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

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"
3.通过classList操作css

语法：

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

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

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

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

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

定时器 - 间歇函数

1.开启定时器

setInterval(函数， 间隔时间)

2.关闭定时器

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

事件

事件监听

语法：

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

事件监听三要素：

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

高阶函数

环境对象

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

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

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

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

编程思想

排他思想

使用：

  1. 干掉所有人

    使用for循环

  2. 复活自己

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

2

节点操作

DOM节点

  1. 节点类型：

  1. 查找结点

    节点关系：
    • 父节点查找

      • parentNode 属性

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

        子元素.parenNode
    • 子节点查找

      • childNodes

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

      • children

        • 仅获得所有元素节点

        • 返回的还是一个伪数组

          父元素.children
    • 兄弟节点查找
      1. 下一个兄弟节点
        • nextElementSibling 属性
      2. 上一个兄弟节点
        • previousElementSibling 属性

  2. 增加节点

    1.创建节点

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

    • 创建元素节点方法：

      document.createElement（'标签名'）
    2.追加节点

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

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

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

      父元素.insertBefore(要插入的元素, 在哪个元素前面)
    3.克隆节点
    • 若为true,则代表克隆时会包含 后代节点一起克隆
    • 若为false,则代表克隆时不包含后代节点
    • 默认为false

  3. 删除节点

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

    • 语法：

      父元素.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)]

2.重绘和回流

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

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

3

事件对象

获取事件对象
元素.addEventListener('click',function(e){
})
事件对象常用属性

事件流

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

标签 , ,