Js篇-面试题15-通过什么方法可以实现-检测页面 DOM 变化

最新推荐文章于 2023-03-27 14:28:18 发布
原创 最新推荐文章于 2023-03-27 14:28:18 发布 · 613 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#java #编程语言 #js #面试 #python

本文探讨了如何在JavaScript中检测页面DOM变化，主要讲解了MutationObserver接口的使用，包括它的异步处理、批量记录变动、观察特定类型变动等特性，并给出了使用示例，强调其在高性能响应DOM更改中的重要性。

虽互不曾谋面,但希望能和您成为笔尖下的朋友

以读书,技术,生活为主,偶尔撒点鸡汤

不作,不敷衍,意在真诚吐露,用心分享

点击左上方,可关注本刊

标星公众号（ID：itclanCoder）

如果不知道如何操作

点击这里,标星不迷路

通过什么方法可以实现-检测页面 DOM 变化

在MVVM框架中,一是监听数据的变化,数据驱动视图

  • 通过Object.defineProperties()来监听数据的变化,或使用proxy来代理和反射

  • 通过某个API来监听DOM的变化(利用MutationObserver)来监听DOM的变化

注意 

当通过JS操作了DOM之后,我们需要通知到DOM来更新视图,在vue2.0中是用的Object.defineProperies()来劫持对象,而vue3.0中是使用proxy,维持了一个异步的队列,并不是修改了DOM就会立即更新到视图上面 

Mutaion

最低0.47元/天 解锁文章
itclanCoder
关注
2024前端面试系列——Vue面试题_描述下 vue 从初始化页面--修改数据--刷新页面 ui 的过程
2401_84419493的博客
04-28 1119
但是在 Vue 中，由于模板中使用的数据都必须挂在 this 上进行一次中转，所以我们 import 一个组件完了之后，还需要在 components 中再声明下，这样显然是很奇怪但又不得不这样的做法。这里不推荐直接用 nuxt.js 服务端渲染方案，因为这样一来增加了学习成本，二来服务端的维护成本也会上升，有时在本机测试没问题，在服务端跑就有问题，为了省心，还是最大限度的使用静态页面较好。这是因为 Vue 和 React 设计理念上的区别，Vue 使用的是可变数据，而 React 更强调数据的不可变。
前端面试题总结-JS
最新发布
mengameng97的博客
01-03 1698
记录了一些JS常见的问答型面试题，还有一些总结，希望可以帮助到大家。
js判断页面内容有没有改变
赠人玫瑰,手留余香.
08-14 3266
var ArrOldValue=new Array(); window.onload=function(){ var arr = document.form1.elements; for(var i=0;iarr.length;i++){ if(arr[i].type =
js进阶（BOM-网页坐标，窗口偏移实现案例）
qq_53926719的博客
04-07 444
BOM BOM概述 bom即为浏览器对象模型，提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是windows，windows是最大的，所以BOM包含DOM 常见事件 窗口加载事件 等页面加载完再执行的事件，包含页面dom元素，即整个dom树加载完毕。所以不存在命名调用的顺序。 DOMConteneLoaded是DOM元素加载完毕，不包含图片，flash等就可以执行，速度更快 调整窗口大小事件 窗口大小发生像素变化，就会触发该事件，即有些页面放大缩小就会改变样式。 一般用来完成响应式布局。wind
香草js侦测元素是否离开视窗viewport
weixin_30897079的博客
09-27 837
很多时候，我们需要检查一个元素是否已经部分不在或者全部不在视窗区域，当这种现象发生时做相应的处理。 比如在CMS编辑内容时，其工具菜单很有可能因为内容区域过长导致滑出视窗区域，而工具栏又是经常要使用的，这就非常不便。 那么如何检查这种情况呢？我们来看看getBoundingClientRect()函数吧。 element.getBoundingClientRect()调用将返回...
图解js点击事件的点击位置&浏览器位置&屏幕位置&可视区位置
djweijfhweoi的博客
12-31 1469
page是相对于整个html文档的位置，也就是说如果页面发生了上下滚动pageY=clientY+页面被卷曲的头部，如果页面发生了左右滚动pageX=clientX+页面左侧被卷曲的部分。screen是相对于电脑屏幕的位置，在浏览器全屏打开的时候screenX和clientX的数值是一样的，screenY=clientY+浏览器url输入框高度+浏览器标签栏高度。x,y的值始终和client一样，可以说x,y是client的别称。offset是点击位置相对于其父元素的位置。
JS模拟自动点击的简单实例
12-11
代码如下:<html xmlns=”http://www.w3.org/1999/xhtml”><head><meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /><title>javascript模拟鼠标自动点击链接</title>[removed]var mytime = 1000; function myclick(){[removed].reload(); }function autoclick(){setTimeout(“myclick()”,my
web前端工程师-高频面试题
10-24
5. 水平垂直居中：可以使用flexbox、grid、定位等方法实现。 6. 三角形：利用边框塌陷和背景透明来创建。 7. 自适应布局：通常使用百分比、flexbox或grid实现。 8. 6px字体：通过`transform: scale(0.5)`缩小字体...
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---JavaScript篇
m0_54853146的博客
03-07 693
★★ 介绍一下JS的内置类型有哪些？ ★★★★ 介绍一下 typeof 区分类型的原理 ★★★ 介绍一下类型转换 ★★★★ 说说你对 JavaScript 的作用域的理解。什么是作用域链？ ★★ 解释下 let 和 const 的块级作用域 ★★★★ 说说你对执行上下文的理解 ★★★ 对闭包的看法，为什么要用闭包？说一下闭包的原理以及应用场景？闭包的 this 指向问题？ ★★★ 简述闭包的问题以及优化 ★★★ 如何确定 this 指向？改变 this 指向的方式有哪些？ ★★★ 介绍箭头函数的 this
JS 监听元素dom变化
一只路过的小码农
03-24 5215
我们在开发中，会遇到一些需求，需要监听元素变化，比如元素属性变化，元素大小变化，今天，我们就来聊聊俩种常用实现监听的方案，其他的自行研究。
JS检测页面中哪个HTML标签触发点击事件的方法
11-23
本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法。分享给大家供大家参考，具体如下： 在html标签中，为了页面显示的美观，会在标签中相互嵌套，在做“效果”的时候就难免不了的添加各种事件，例如： dddd 当用户点击的时候，想确定是链接产生的事件还是span标签onclick标签产生的事件，这个有时候是很有必要的，至少我认为在调试的时候有作用，因此我写了一个简单的demo，用于各位看官学习 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional
js判断当前页面是否活动页面
Admans的专栏
03-27 954
2、使用requestAnimationFrame，如果当前不是活动页面，则requestAnimationFrame不会回调。setInterval会一直走。原文：https://blog.youkuaiyun.com/lqyygyss/article/details/90488912。在开发中，希望当前页面如果不是活动页面，即用户切换了tab页，或者用户把浏览器缩小隐藏了。这个时候，我们希望页面暂停，比如游戏暂停，视频停止播放等。版权声明：本文为作者原创文章，转载请附上博文链接！
如何监听DOM大小的变化
mapbar_front的博客
10-20 1万+
##1，引言 监听DOM大小的变化，在前端开发中，算是一个比较常见的需求，比如我们要制作可伸缩的图表的时候，可能需要根据DOM大小的变化，进行动态的更新图表。 ##2，实现方式 一般而言，我们可能会考虑到的方式就是在窗口发生变化的时候，获取对应dom的样式。 window.onresize = function() { const width = getStyle(dom, 'width'); ...
js实现监听dom元素的属性变化
热门推荐
D_bel的博客
07-24 2万+
通过MutationObserver来实现： MutationObserver可以用来监视 DOM 变动。DOM 的任何变动，比如节点的增减、属性的变动、文本内容的变动，这个 API 都可以得到通知，也就是说DOM 发生变动就会触发回调函数，是异步触发，DOM 的变动并不会马上触发，而是要等到当前所有 DOM 操作都结束才触发。这样设计是为了应付 DOM 变动频繁的特点。举例来说，如果文档中连...
【前端】监听页面切换--浏览器页面间切换，路由切换，导航守卫页面刷新或关闭
灵活的小胖子
07-31 3361
前提，PC端应用 一，监听浏览器页面间切换 场景：浏览器某一个页面A，PC端页面B，页面AB间切换 方案： 1.使用vue-visibility-change 安装： npm i vue-visibility-change -S 2.导入main.js import visibility from 'vue-visibility-change'; Vue.use(visibility); 3.使用 i，全局使用： main.js visibility.change((evt,
JavaScript 检测 DOM 变化（监听 dom 高度变化）
qq_41974199的博客
03-05 5679
JavaScript 检测 DOM 变化 需要JavaScript MutationObserver 来检测dom变化。 API：MutationObserver MutationObserver 包含三种方法： disconnect()：防止MutationObserver实例继续接收通知，直到再次调用其 observe() 方法，并且不会再次调用观察者对象中包含的某些函数为止。 observe()：将MutationObserver配置为在DOM更改与给定选项匹配时开始通过其替换功能接收通知。 tak
js更新dom后的强制刷新问题
wind__snow的专栏
06-12 1万+
用js更新dom是web系统中经常出现的场景，但是有时候可能会遇到这样的情况，在更新dom之后还执行了一段运行时间可能比较长的js代码，这时你会发现，你更新的dom不会立刻在页面显现出来，而要等所有js都执行完之后才能出现。考虑以下的代码 Test Refresh function runLongOperation(){ var d =
jquery 检测浏览器窗口大小变化
成长中de大神
06-25 1万+
//浏览器窗口大小变化时 $(window).resize(function() { var window_width = $(window).width();//获取浏览器窗口宽度 if(window_width&gt;1200){ window_width = 1200; } var height = window_width*(800/1280...
70道Vue面试题详解：涵盖核心原理与高级应用
首先，从标题“Vue面试题70道”可以看出，这份资料的核心目标是帮助开发者应对实际求职过程中的技术考核。而“[项目源码]”这一后缀则表明，除了理论问答之外，文档很可能附带了可运行的实际代码示例，使得学习者...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值