【轻聊前端】强大的DOM（下）

document.addEventListener('DOMContentLoaded',function(){
    console.log('DOMContentLoaded');
});

window.addEventListener('load', (event) => {
  console.log('page is fully loaded');
});

window.onload = (event) => {
  console.log('page is fully loaded');
};

'box'>
  此区域滚动

'idea' id="myName">

自定义属性在某种程度上增强了HTML结构的能力。

事件绑定

事件是个大话题，后面会作为单独一篇文来讲，但事件和DOM是关联的，这里提一下。

事件是用户和网页交互的桥梁，需要一个“接口”进行连通，即绑定事件。

如果要给一个按钮绑定点击事件，可以这样：

type='button' value='click me!' onclick="console.log('clicked!')"/>

可以这样：

type='button' value='click me!' id="myBtn"/>
let btn = document.querySelector("#myBtn")
    btn.onclick = function(){
      console.log('clicked')
    }

还可以这样：

btn.addEventListener('click',()=>{
          console.log('clicked')
        },false)

当然，这个方法在IE中略有差别：

btn.attachEvent('onclick',()=>{
          console.log('clicked')
        })

通常情况下，为了处理兼容和复用，可以封装一个addHandler()方法，将所有代码都在这个方法中处理即可。当然了，现代框架会最大程度的帮开发者节省这些额外成本，很少需要自己再写兼容代码了。

事件就聊这些，点到为止，下面介绍DOM中的最后一员大将。

节点观测——MutationObserver

MutationObserver是什么？概念上，它很接近事件，可以理解为当DOM发生变动会触发Mutation Observer事件。

但是，它与事件有一个本质不同：事件是同步触发，也就是说DOM发生变动立刻会触发相应的事件；Mutation Observer是异步触发，DOM发生变动后并不会马上触发，而是等到当前所有DOM操作都结束后才触发。这样设计是为了应付DOM变动频繁的情况。

使用MutationObserver可以观察整个文档、DOM树的一部分，或某个元素。还可以观察元素属性、子节点、文本。

MutationObserver的实例要通过调用MutationObserver构造函数并传入一个回调函数来创建。

新创建的MutationObserver实例不会关联DOM的任何部分。要与DOM关联起来，需要使用observe()方法。这个方法接收两个必需的参数：要观察的DOM节点，以及一个MutationObserverInit对象。

MutationObserverInit对象用于控制观察哪些方面的变化，是一个键/值对形式配置选项的字典。

每个回调都会收到一个MutationRecord实例的数组。MutationRecord实例包含的信息包括发生了什么变化，以及DOM的哪一部分受到了影响。因为回调执行之前可能同时发生多个满足观察条件的事件，所以每次执行回调都会传入一个包含按顺序入队的MutationRecord实例的数组。

默认情况下，只要被观察的元素不被垃圾回收，MutationObserver的回调就会响应DOM变化事件，从而被执行。要提前终止执行回调，可以调用disconnect()方法。

代码示例如下：

// 获取目标节点
const targetNode = document.getElementById('ele');

// 配置（需要观察什么变动）
const config = { attributes: true, childList: true, subtree: true };

// 变动时执行的回调
const callback = function(mutationsList, observer) {
    for(let mutation of mutationsList) {
        if (mutation.type === 'childList') {
            //...
        }
        else if (mutation.type === 'attributes') {
           //...
        }
    }
};

// 创建一个观察器实例并传入回调函数
const observer = new MutationObserver(callback);

// 以上述配置开始观察目标节点
observer.observe(targetNode, config);

// 停止观察
observer.disconnect();

需要说明的是，可以通过多次调用observe()方法来复用一个MutationObserver对象观察多个不同的目标节点。这种情况下，MutationRecord的target属性可以标识发生变化事件的目标节点。

说了这么多，它能用来干什么呢？举个大家熟悉的例子：Vue中的nextTick。

大家知道，Vue中从数据变化到更新DOM需要过程，想要在DOM更新后执行某个动作，常用到nextTick 方法，而 MutationObserver 就可以实现这样的效果，所以MutationObserver是拿来实现nextTick的方法之一，为什么说之一，上面说过，框架会替开发者做很多工作，比如某功能的最优方案，次优方案，兼容方案等，考虑到MutationObserver的兼容性，会使用其他替代方案来适配不支持的情况，这里不是重点，不再赘述。

总结

本文是DOM篇的下半部分，聊到除DOM节点关系和操作之外的能力，并没有介绍完全，但大体的轮廓已经显现，重要的是，理解DOM是什么，它和哪些东西有关联，我们想要一个效果，想做一个功能的时候，它能为我们提供什么。

它可以是文档，是视口，是容器，是元素，是内容，是接口，是关系，是信息，是工具...是什么完全由我们的需求而定。不论我们使用原生编程，框架编程，还是UI组件库编程，这一点都不会发生改变。

DOM包含很多细节，是值得不断挖掘的宝藏，这两篇文算是开了个头，鉴于水平有限，也可能某些表达不精准，欢迎交流和指正。下篇见！~

系列文章：

【轻聊-前端】编程是什么？

【轻聊前端】小角色，大用途——变量

【轻聊前端】为什么说一切皆对象？

【轻聊前端】那些“无理取值”的运算

【轻聊前端】JavaScript中的数字游戏

【轻聊前端】“字符串”江湖

【轻聊前端】有“对象”之前

【轻聊前端】有“对象”之后

【轻聊前端】高级数据结构的基石——数组

【轻聊前端】JavaScript世界的一等公民——函数

【轻聊前端】强大的DOM（上）

现今各种框架、工具‘横行’，到处在讲原理和源码，更有跨端技术需要我们去探索，但如果基本功不好，学什么都是事倍功半，效果很不好，花费时间的同时打击自信心。此篇文章，为我所计划的【轻聊前端】系列第（十二）篇，旨在系统地、逻辑性地把原生JavaScript知识分享给大家，帮助各位较为轻松地理清知识体系，更好地理解和记忆，我尽力而为，望不负期待。

请你喝杯🍵 记得三连哦～

1.阅读完记得给🌲 酱点个赞哦，有👍 有动力

2.关注公众号前端那些趣事，陪你聊聊前端的趣事

3.文章收录在Github frontendThings 感谢Star✨