JavaScript 笔记七：DOM、BOM、AST抽象语法树

都是本人理解，笔记大致概念，不详细也并非完全正确，所以仅供参考。

DOM与BOM

JavaScript 规范来说分为是三部分

• ECMAScript：JS执行标准
• DOM：文档对象模型
• BOM：窗口对象模型

当浏览器加载文档时，会以HTML节点生成DOM树，而JS的DOM对象即DOM树的调用API，通过DOM对象可以对文档节点进行增删改等的作，所以 DOM 是为了操作文档出现的接口。

而 BOM 其实就是为了控制浏览器的行为而出现的接口，可以进行窗口的开启、关闭，location 的前进后退，alert 弹窗等浏览器行为。

所以，综上所述：
DOM 是为了操作文档出现的 API，document 是其的一个对象。
BOM 是为了操作浏览器出现的 API，window 是其的一个对象。

AST抽象语法树

贴百度百科解释：抽象语法树（abstract syntax tree或者缩写为AST），或者语法树（syntax tree），是源代码的抽象语法结构的树状表现形式，这里特指编程语言的源代码。和抽象语法树相对的是具体语法树（concrete syntaxtree），通常称作分析树（parse tree）。一般的，在源代码的翻译和编译过程中，语法分析器创建出分析树。一旦AST被创建出来，在后续的处理过程中，比如语义分析阶段，会添加一些信息。

大致解释下，就是说源码是可以解析成一种语法树，类似于DOM树的结构，举个例子随便写下：

function abc(a){
  var b = 2;
  var c = a + b;
  return c;
}

如果通过抽象语法树的解析转换，那么就类似如下的结构（我是瞎写的，只是便于理解，实际中的对象结构和这里不一样）：

{
  type: 'function',
  name: 'abc',
  params: ['a'],
  body: {
    // 内容
    content: `
      var b = 2;
      var c = a + b;
      return c;
    `,
    // 每一行
    line: [
      {
        content: 'var b = 2;',
        // 其他属性 ...
      },
      {
        content: 'var c = a + b;',
        // 其他属性 ...
      },
      // 其他行
    ]
  }
}

解析之后为类似结构，这就是AST抽象语法树。

都知道 DOM 对象可以修改 DOM 树，修改节点的内容与样式等，所以AST抽象语法书也可以对源码进行修改、拼接，所以AST抽象语法书也可以说是操作源码的API。

这里仅简单说描述说明，详细参考此文。