mutationobrver 是一个可以监听 dom 结构变化的接口。
当 dom 对象树发生任何变动时，mutationobrver 会得到通知。
mutationobrver 是一个构造器，接受一个 callback 参数，用来处理节点变化的回调函数，返回两个参数：
mutations：节点变化记录列表（quence<mutationrecord>）
obrver：构造 mutationobrver 对象。
mutationobrver 对象有三个方法，分别如下：
obrve：设置观察目标，接受两个参数，target：观察目标，options：通过对象成员来设置观察选项
disconnect：阻止观察者观察任何改变
takerecords：清空记录队列并返回里面的内容
//选择一个需要观察的节点var targetnode = document.getelementbyid('root') // 设置obrver的配置选项var config = { attributes: true, childlist: true, subtree: true } // 当节点发生变化时的需要执行的函数var callb老人与海好词好句摘抄ack = function (mutationslist, obrver) { for (var mutation of mutationslist) { if (mutation.type == 'childlist') { console.log('a child node has been added or removed.') } el if (mutation.type == 'attributes') { console.log('the ' + mutation.attributename + ' attribute was modified.') } }} // 创建一个obrver示例与回调函数相关联var obrver = new mutationobrver(callback) //使用配置文件对目标节点进行观测obrver.obrve(targetnode, config) // 停止观测obrver.disconnect()obrve 方法中 options 参数有已下几个选项：
childlist：设置 true，表示观察目标子节点的变化，比如添加或者删除目标子节点，不包括修改子节点以及子节点后代的变化
attributes：设置 true，表示观察目标属性的改变
characterdata：设置 true，表示观察目标数据的改变
subtree：设置为 true，目标以及目标的后代改变都会观察
attributeoldvalue：如果属性为 true 或者省略，则相当于设置为 true，表示需要记录改变前的目标属性值，设置了 attributeoldvalue 可以省略 attributes 设置
characterdataoldvalue：如果 characterdata 为 true 或省略，则相当于设置为 true,表示需要记录改变之前的目标数据，设置了 characterdataoldvalue 可以省略 characterdata 设置
attributefilter：如果不是所有的属性改变都需要被观察，并且 attributes 设置为 true 或者被忽略，那么设置一个需要观察的属性本地名称（不需要命名空间）的列表
mutationobrver 有以下特点：
它等待所有脚本任务完成后才会运行，即采用异步方式它把 dom 变动记录封装成一个数组进行处理，而不是一条条地个别处理 dom 变动。它即可以观察发生在 dom 节点的所有变动，也可以观察某一类变动当 dom 发生变动会触发 mutationobrver 事件。但是，它与事件有一个本质不同：事件是同步触发，也就是说 dom 发生变动立刻会触发相应的事件；mutationobrver 则是异步触发，dom 发生变动以后，并不会马上触发，而是要等到当前所有 dom 操作都结束后才触发。
举例来说，如果在文档中连续插入 1000 个段落（p 元素），会连续触发 1000 个插入事件，执行每个事件的回调函数，这很可能造成浏览器的卡顿；而 mutationobrver 完全不同，只在 1000 个段落都插入结束后才会触发，而且只触发一次，这样较少了 dom 的频繁变动，大大有利于性能。
网页开发时，常常需要了解某个元素是否进入了”视口”（viewport），即用户能不能看到它。
传统的实现方法是，监听到 scroll 事件后，调用目标元素的 getboundingclientrect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。这种方法的缺点是，由于 scroll 事件密集发生，计算量很大，容易造成性能问题。
目前有一个新的 interctionobrver api，可以自动”观察”元素是否可见，chrome 51+ 已经支持。由于可见（visible）的本质是，目标元素与视口产生一个交叉区，所以这个 api 叫做”交叉观察器”。
interctionobrver 是浏览器原生提供的构造函数，接受两个参数：callback 是可见性变化时的回调函数，option 是配置对象（该参数可选）。
var io = new interctionobrver(callback, option)// 开始观察io.obrve(document.getelementbyid('example')) // 停止观察io.unobrve(element) // 关闭观察器io.disconnect()如果要观察多个节点，就要多次调用这个方法。
io.obrve(elementa)io.obrve(elementb)
目标元素的可见性变化时，就会调用观察器的回调函数 callback。callback 一般会触发两次。一次是目标元素刚刚进入视口（开始可见），另一次是完全离开视口（开始不可见）。
var io = new interctionobrver((entries) => { console.log(entries)})callback 函数的参数（entries）是一个数组，每个成员都是一个 interctionobrverentry 对象。举例来说，如果同时有两个被观察的对象的可见性发生变化，entries 数组就会有两个成员。
time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 dom 节点对象
isintercting: 目标是否可见
rootbounds：根元素的矩形区域的信息，getboundingclientrect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回 null
boundingclientrect：目标元素的矩形区域的信息
interctionrect：目标元素与视口（或根元素）的交叉区域的信息
interctionratio：目标元素的可见比例，即 interctionrect 占 boundingclientrect 的比例，完全可见时为 1，完全不可见时小于等于 0
<html lang="en"> <head> <meta chart="utf-8" /> <title>document</title> <style> #div1 { position: sticky; top: 0; height: 50px; line-heig鸡蛋上画画ht: 50px; text-align: center; background: black; color: #ffffff; font-size: 18px; } </style> </head> <body> <div id="div1">首页</div> <div style="height: 1000px;"></div> <div id="div2" style="height: 100px; background: red;"></div> <script> var div2 = document.getelementbyid('div2') let obrver = new interctionobrver( function (entries) { entries.foreach(function (element, index) { console.log(element) if (element.isintercting) { div1.innertext = '我出来了' } el { d揶揄iv1.innertext = '首页' } }) }, { root: null, threshold: [0, 1] } ) obrver.obrve(div2) </script> </body></html>相比于 getboundingclientrect，它的优点是不会引起重绘回流。
图片懒加载的原理主要是判断当前图片是否到了可视区域这一核心逻辑实现的。这样可以节省带宽，提高网页性能。传统的突破懒加载是通过监听 scroll 事件实现的，但是 scroll 事件会在很短的时间内触发很多次，严重影响页面性能。为提高页面性能，我们可以使用 interctionobrver 来实现图片懒加载。
const imgs = document.querylectorall('img[data-src]')const config = { rootmargin: '0px', threshold: 0}let obrver = new interctionobrver((entries, lf) => { entries.foreach((entry) => { if (entry.isintercting) { let img = entry.target let src = img.datat.src if (src) { img.src = src img.removeattribute('data-src') } // 解除观察 lf.unobrve(entry.target) } })}, config)imgs.foreach((image) => { obrver.obrve(image)})无限滚动（infinite scroll）的实现也很简单。
var interctionobrver = new interctionobrver(function (entries) { // 如果不可见，就返回 if (entries[0].interctionratio <= 0) return loaditems(10) console.log('loaded new items')}) // 开始观察interctionobrver.obrve(document.querylector('.scrollerfooter'))dom2 style 在document.defaultview上增加了 getcomputedstyle()方法，该方法返回一个cssstyledeclaration
对象（与 style 属性的类型一样），包含元素的计算样式。
document.defaultview.getcomputedstyle(element[,pudo-element])// orwindow.getcomputedstyle(element[,pudo-element])
这个方法接收两个参数：要取得计算样式的元素和伪元素字符串（如”:after”）。如果不需要查询伪元素，则第二个参数可以传 null。
<!doctype html><html> <head> <style type="text/css"> #mydiv { background-color: blue; width: 100px; height: 200px; } </style> </head> <body> <div id="mydiv" style="background-color: red; border: 1px solid black"></div> </body> <script> function getstylebyattr(obj, name) { return window.getcomputedstyle ? 无锡社保查询window.getcomputedstyle(obj, null)[name] : obj.currentstyle[name] } let node = document.getelementbyid('mydiv') console.log(getstylebyattr(node, 'backgroundcolor')) console.log(getstylebyattr(node, 'width')) console.log(getstylebyattr(node, 'height')) console.log(getstylebyattr(node, 'border')) </script></html>getcomputedstyle 和 element.style 的相同点就是二者返回的都是 cssstyledeclaration 对象。而不同点就是：
element.style 读取的只是元素的内联样式，即写在元素的 style 属性上的样式；而 getcomputedstyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。
element.style 既支持读也支持写，我们通过 element.style 即可改写元素的样式。而 getcomputedstyle 仅支持读并不支持写入。我们可以通过使用 getcomputedstyle 读取样式，通过 element.style 修改样式
getboundingclientrect() 方法返回元素的大小及其相对于视口的位置。
let domrect = object.getboundingclientrect()
它的返回值是一个 domrect 对象，这个对象是由该元素的 getclientrects() 方法返回的一组矩形的集合，就是该元素的 css 边框大小。
返回的结果是包含完整元素的最小矩形，并且拥有 left, top, right, bottom, x, y, width, 和 height 这几个以像素为单位的只读属性用于描述整个边框。除了 width 和 height 以外的属性是相对于视图窗口的左上角来计算的。
以笑死人 打一成语前的写法是通过 offtparent 找到元素到定位父级元素，直至递归到顶级元素 body 或 html。
// 获取dom元素相对于网页左上角定位的距离function offt(el) { var top = 0 var left = 0 do { top += el.offttop left += el.offtleft } while ((el = el.offtparent)) // 存在兼容性问题，需要兼容 return { top: top, left: left }} var odiv = document.getelementsbyclassname('markdown-body')offt(a[0]) // {top: 271, left: 136}现在根据 getboundingclientrect 这个 api，可以写成这样：
var positionx = this.getboundingclientrect().left + document.documentelement.scrollleftvar positiony = this.getboundingclientrect().top + document.documentelement.scrolltop
function ilview(el) { var top = el.getboundingclientrect().top // 元素顶端到可见区域顶端的距离 var bottom = el.getboundingclientrect().bottom // 元素底部端到可见区域顶端的距离 var = document.documentelement.clientheight // 浏览器可见区域高度。 if (top < && bottom > 0) { return true } el if (top >= || bottom <= 0) { // 不可见 } return fal}以上就是javascrip高级前端开发常用的几个api示例详解的详细内容，更多关于高级前端api示例的资料请关注www.887551.com其它相关文章！
本文发布于:2023-04-03 23:05:36，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/ac83d6572cde6d7c92ddf6799fb9490f.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：javascrip高级前端开发常用的几个API示例详解.doc
本文 PDF 下载地址：javascrip高级前端开发常用的几个API示例详解.pdf
| 留言与评论（共有 0 条评论） |
