MutationObserver 使用摘要(监听 DOM 变化)
最编程
2024-05-01 14:35:38
...
let box = document.querySelector('#box'),
config = { attributes: true };
let observer = new MutationObserver(mutations => {
console.log(mutations);
// => 返回一个监听到的MutationRecord对象
// MutationRecord对象是每修改一个就会在数组里面追加一个
});
observer.observe(box, config); // 监听的box元素和config配置项
box.setAttribute('name','张三'); // 修改属性
box.style.background = 'black'; // 修改样式
推荐阅读
-
MutationObserver 使用摘要(监听 DOM 变化)
-
在React和Vue中,我们是如何玩转router的? - 使用HTML5 History API,React Router利用pushState和replaceState方法在不刷新页面的情况下管理导航历史。它像这样工作: 1. 当URL发生变化时,React Router悄悄地“监听”浏览器地址栏的改动,主要通过popstate事件来察觉url更改。 2. 随着URL的变化,Router会对照预先设定好的JavaScript路由配置对象,依据一套规则找出与当前URL匹配的路径。 3. 一旦找到合适的路线,React Router就会如魔法般地渲染相应的组件到网页上,从而实现了页面内容的实时更新。让我们来看一个React Router实际运用的例子。