脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → JS监听元素dom

JS监听元素dom变化方案详解

 更新时间：2023年09月10日 15:20:25   作者：前端小小白zyw  
这篇文章主要给大家介绍了关于JS监听元素dom变化的相关资料,监听DOM大小的变化,在前端开发中,算是一个比较常见的需求,比如我们要制作可伸缩的图表的时候,可能需要根据DOM大小的变化,进行动态的更新图表,需要的朋友可以参考下

前言

我们在开发中，会遇到一些需求，需要监听元素变化，比如元素属性变化，元素大小变化，今天，我们就来聊聊俩种常用实现监听的方案，其他的自行研究

一、ResizeObserver

ResizeObserver 是来监听元素的大小位置发生变化，也可以说是回流(重排)时的变化

<div style="width: 100vw; height: 100vh; background-color: deepskyblue" id="bg">

然后，我们创建监听器，进行监听

// 观察元素变化
let el = document.getElementById('bg')
// 创建监听器
let ob = new ResizeObserver(entries => {
  for (let entry of entries) {
    // 监听到的元素
    console.log(entry)
  }
})
// 监听尺寸变化
ob.observe(el)

随之，拖动浏览器窗口，控制台会打印，我们可以看到打印的日志，包含元素的大小信息

在使用完毕时，可以进行监听结束

ob.unobserve(el)

二、MutationObserver

MutationObserver 是用来监听DOM树的修改，MutationObserver可以监听的属性(配置)

属性名详情默认值
attributes设为 true 以观察受监视元素的属性值变更false
attributeFilter要监视的特定属性名称的数组。如果未包含此属性，则对所有属性的更改都会触发变动通知无
characterData设为 true 以监视指定目标节点或子节点树中节点所包含的字符数据的变化无
childList设为 true 以监视目标节点（如果 subtree 为 true，则包含子孙节点）添加或删除新的子节点false
subtree其他值也会作用于此子树下的所有节点，而不仅仅只作用于目标节点false

实现过程：

// 创建监听器
let ob = new MutationObserver(entries => {
  console.log(entries)
})
// 监听元素变化
ob.observe(el, { attributes: true, subtree: true })
// 修改背景颜色
el.style.backgroundColor = 'red'

我们可以看到控制台，打印日志，触发更新：

取消监听：

ob.disconnect()

总结 

到此这篇关于JS监听元素dom变化的文章就介绍到这了,更多相关JS监听元素dom内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • javascript函数库-集合框架

    javascript函数库-集合框架

    javascript函数库-集合框架...
    2007-04-04
  • JS创建或填充任意长度数组的小技巧汇总

    JS创建或填充任意长度数组的小技巧汇总

    在JavaScript 中,我们往往会遇到需要使用某些默认值来填充数组的情况,那么都有哪些方式可以完成这样的任务呢?这篇文章主要给大家介绍了关于JS创建或填充任意长度数组的小技巧,需要的朋友可以参考下
    2021-10-10
  • JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法

    JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法

    这篇文章主要介绍了JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法,涉及javascript针对时间与日期操作的相关技巧,需要的朋友可以参考下
    2016-08-08
  • 一文解析JS如何准确获取对象自身的属性

    一文解析JS如何准确获取对象自身的属性

    在 JavaScript 开发中,我们经常需要遍历对象的属性,本文将深入讲解如何准确获取对象非原型链上的属性（即“自身属性”）,并结合你提供的代码,给出最佳实践,有需要的可以了解下
    2025-09-09
  • JavaScript图片打印方案实例详解

    JavaScript图片打印方案实例详解

    有时候我们希望文件上传的时候预览图片,下面这篇文章主要给大家介绍了关于JavaScript图片打印方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-03-03
  • JavaScript数据类型转换的注意事项

    JavaScript数据类型转换的注意事项

    JavaScript是一种无类型语言，但同时JavaScript提供了一种灵活的自动类型转换的处理方式。基本规则是，如果某个类型的值用于需要其他类型的值的环境中，JavaScript就自动将这个值转换成所需要的类型。
    2016-07-07
  • js完整倒计时代码分享

    js完整倒计时代码分享

    这篇文章主要为大家详细介绍了js完整倒计时代码,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-09-09
  • javascript格式化指定日期对象的方法

    javascript格式化指定日期对象的方法

    这篇文章主要介绍了javascript格式化指定日期对象的方法,涉及javascript针对日期对象操作的相关技巧,非常具有实用价值,需要的朋友可以参考下
    2015-04-04
  • 高性能js数组去重(12种方法，史上最全)

    高性能js数组去重(12种方法，史上最全)

    数组去重，一般都是在面试的时候才会碰到，一般是要求手写数组去重方法的代码。如果是被提问到，数组去重的方法有哪些？你能答出其中的10种，面试官很有可能对你刮目相看
    2019-12-12
  • 详解JS中你不知道的各种循环测速

    详解JS中你不知道的各种循环测速

    在前端JS中，有着多种数组循环的方式：for循环；while和do-while 循环；forEach、map、reduce、filter循环；for-of循环；for-in 循环；那么哪种循环的执行速度最快呢，我们今天来看一看。
    2021-05-05

最新评论