JavaScript-DOM对象DOM对象浏览器根据html标签生成的JS对象所有标签属性都可以在这个对象上找到修

DOM对象

浏览器根据html标签生成的JS对象

所有标签属性都可以在这个对象上找到

修改这个对象的属性会自动映射到标签上

在HTML中叫标签，在JS DOM中叫DOM对象

最大的对象 document

获取DOM对象

根据CSS选择器获取

选择匹配的第一个元素

query查询

document.querySelector('css选择器')

如果是自己命名的盒子千万别忘了加 . # 等选择器专有符号

联想截图_20231127110044.png

参数包含一个或多个有效的CSS选择器字符串

返回值 CSS选择器匹配的第一个元素，一个HTMLElement对象

如果没有匹配到则返回null

可以直接修改样式：

对象名.样式.属性=' '

选择所有元素

document.querySelectorALL('css选择器')

返回值 CSS选择器匹配的NodeList对象集合

不能直接修改样式，只能通过遍历的方式一次给里面的元素做修改

得到的是 伪数组 ：有长度有索引号，但没有增删等数组操作方法

用for遍历取元素


for(let i=0;i<数组.length;i++){
console.log(数组[i])
}

其他方式获取

获取HTML元素

document.documentElement

操作元素内容

DOM对象都是根据标签生成的，所以操作标签本质上就是操作DOM对象

对象.innerText属性

将文本内容添加/更新到任意标签位置

显示纯文本，不解析标签

对象.innerHTML属性

将文本内容添加/更新到任意标签位置

会解析标签，多标签建议使用模板字符

操作元素属性

对象.属性=值

通过style属性操作css

对象.style.样式属性=值

出现带 - 的属性用小驼峰命名法 background-color改成backgroundColor

不要忘了单位

通过类名修改样式

标签元素.className='css类名'

后面有多个类名用空格隔开

claaaName是使用新值换旧值，如果需要添加一个类，需要保留之前的类名

通过classList修改样式

追加一个类

元素.classList.add('类名')

删除一个类

元素.classList.remove('类名')

切换类（有就删掉没有就追加）

元素.classList.toggle('类名')

操作表单元素属性

获取： DOM对象.属性名

button是个双标签，获取用button.innerHTML

设置： DOM对象.属性名=新值

表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示

比如：disabled、checked、selected

button.disabled 默认false，不禁用

button.disabled=true 禁用按钮

如果true代表添加了该属性，false代表移除了该属性（默认）

自定义属性

以 data- 开头

在DOM对象上一律以dataset对象方式获取

定时器-间歇函数

网页中经常会需要一种功能：每隔一段时间需要自动执行一段代码，不需要我们手动去触发

1.开启定时器

setInterval（函数名，间隔时间ms）

函数名后不要写（）否则就是调用函数，加了（）就要用' '括起来

不会立刻开始运行，会先等间隔时间过了再开始

每个定时器都是独一无二的，返回的是一个id数字

2.关闭定时器

clearInterval（定时器名）

事件监听

又称“绑定事件”“注册事件”

事件是在编程时系统内发生的动作或者事情

比如用户在网页单击一个按钮

事件监听让程序检测是否有事件发生，一旦有事件触发，就立即调用一个函数做出响应

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

不会立即执行，什么时候触发事件什么时候执行

三要素：

事件源 被事件触发的DOM元素，要获取DOM元素

事件类型 用什么方式触发，比如鼠标单击click

事件调用的函数 要做什么事

事件监听版本

DOM L0

事件源.on事件=function（）{ }

同一个对象，后面注册的事件会覆盖前面注册(同一个事件)

都是冒泡阶段执行

DOM L2

事件源.addEventListener（事件，事件处理函数）

后面注册的事件不会覆盖前面注册的事件（同一个事件）

区别

on方式会被覆盖，addEventListener方式可绑定多次，拥有事件更多特性

事件类型

鼠标事件

鼠标触发

click鼠标点击 mouseenter鼠标经过 mouseleave鼠标离开

mouseover和mouseout会有冒泡效果

mouseenter和mouseleave没有冒泡效果

焦点事件

表单获得光标

focus获得焦点 blur失去焦点

键盘事件

键盘触发

Keydown键盘按下触发 Keyup 键盘抬起触发

文本事件

表单输入触发

input用户输入事件

input.value拿到用户输入的内容

input.length拿到用户输入内容的长度

页面加载事件

load

对象是window

可以监听整个页面资源加载，加载完毕再去执行函数

DOWContentLoaded

HTML文档中的DOM元素加载和解析完成后，触发事件执行函数，不需要等样式表、图像等加载完毕

对象是document

元素滚动事件

滚动条滚动时触发的事件

scroll

获取被卷去的大小，获取元素内容往左往上滚出去看不到的距离

scrollLeft / scrollTop 读写属性

scrollTo（x,y） 把内容滚动到指定坐标

页面尺寸事件

resize 在窗口尺寸发生变化是触发的事件

获取宽高

clientWidth/clientHeight 获取元素的可见部分宽高（不包含边框、margin、滚动条等）

事件对象

也是个对象，这个对象里有事件触发时的相关信息

例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息

可以判断用户按下了哪个键，鼠标点击了哪个元素从而做出相应的操作

获取

在事件绑定的回调函数的第一个参数就是事件对象

一般命名为event、ev、e

元素.addEventListener('事件类型',function(e){ })

属性

type 获取当前的事件类型

clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置

offsetX/offsetY 获取光标相对于当前DOM元素左上角的位置

key 用户按下的键盘的值

环境对象

函数内部特殊的变量 this ，它代表着当前函数运行时所处的环境

指向的是函数的调用者（谁调用该函数，this就是谁）

回调函数

如果将函数A作为参数传递给函数B时，我们称函数A为回调函数

事件流

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

事件捕获

从DOM的根元素开始，从外到内

document —html— head—body

DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)

true代表捕获机制触发

false代表冒泡阶段触发默认是false

L0事件监听只有冒泡阶段，没有捕获

事件冒泡

当一个元素触发事件后，会依次向上调用所有父级元素的同名事件

body—head—html—document

阻止冒泡

冒泡是默认存在的，容易导致事件影响到父级元素

若想把事件限制在当前元素内，要阻止事件冒泡

事件对象.stopPropagation()

可以阻止事件流动传播

解绑事件

on事件，直接使用 null 覆盖就可以实现事件解绑

addEventListener事件

removeEventListener(事件类型，事件处理函数，[获取捕获或冒泡阶段]) 加了[ ]说明可省略

匿名函数无法被解绑

事件委托

利用事件流（事件冒泡）的特征解决一些开发需求的知识技巧

减少注册次数

给 父元素 注册事件，当我们触发子元素时，会冒泡到父元素上，从而触发父元素事件

事件对象.target.tagName 可以获得真正触发事件的元素

阻止默认行为

默认行为比如链接跳转，表单域跳转

事件对象.preventDefault（）

元素尺寸与位置

页面滚动到某个元素，可以执行某个事件

通过JS的方式获取元素在页面中的位置、自身可视宽高、包含元素自身设置的可视宽高、padding、border

offsetWidth/offsetHeight

offsetLeft/offsetTop 是只读属性

获取元素距离自己定位父级元素的左、上距离

element.getBoundingClientRect 方法返回元素的大小及其相对于可视窗口的位置

一个解决问题的思想

联想截图_20231201155246.png

日期对象

实例化 new

创建一个时间对象获得当前时间

const date=new Date()

时间戳

是指1970年01月01日00时00分00秒起至现在的毫秒数

算法将来的时间戳-现在的时间戳=剩余时间毫秒数

剩余时间毫秒数转换为剩余时间的年月日时分秒就是 倒计时 时间

获取


const div = document.querySelector('div')
    function getMyDate() {
      const date = new Date()
      let h = date.getHours()
      let m = date.getMinutes()
      let s = date.getSeconds()
      // 补0
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      return `今天是:${date.getFullYear()}年${date.getMonth() + 1}月
      ${date.getDate()}号 ${h}:${m}:${s}`
    }
    div.innerHTML = getMyDate()