文档对象模型DOM

DOM通过将文档结构以对象的形式存储在内存中，使得网页和变成语言链接起来

DOM节点

在HTML DOM中，所有事物都是节点

就比如整个文档是一个文档节点、每个HTML元素是元素节点、HTML元素内的文本是文本节点等等....连注释都是注释节点

DOM节点树

DOM将HTML文档视作树状结构，这种结构就是节点树

节点父、子和同胞

节点树中的节点彼此都有层级关系，常用父、子和同胞来描述，顶端节点被称为根（root）

ES6

1.块级声明 let/const

定义变量用var、Let和const

但是var是函数作用域，在函数内声明的，整个函数都能用，如果不是在函数里，那么就是全局的

Let和const是块级作用域，顾名思义，只在{ }内声明，出了大括号就不饿能用了

2.模板字符串

这是ES6新增的一种写字符串的方式

以前只能用单引号或双引号，现在多加了一个反引号

之前都是这么写，很繁琐，逻辑也一般

const name = '小明';
const msg = '你好，' + name + '，欢迎登录！';

现在可以通过反引号这么写

const name = '小明';
const msg = `你好，${name}，欢迎登录！`;

$( )里也不一定是变量，也可以是表达式、函数等

const user = {name: 'Tom'};
function upper(str) {
  return str.toUpperCase();
}

const msg = `Hello, ${upper(user.name)}!`;

3.赋值解构

数组解构

const arr = [10, 20, 30];
const [a, b, c] = arr;
console.log(a); // 10

对象解构

const user = { name: 'Tom', age: 20 };
const { name, age } = user;

解构配函数参数

function printUser({name, age}) {
  console.log(name, age);
}

printUser({name: 'Tom', age: 20});

4.展开运算符和剩余参数

展开数组

const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4];

展开对象

const obj1 = {a: 1, b: 2};
const obj2 = {...obj1, b: 3, c: 4}; // 后面会覆盖前面

剩余参数

function sum(...nums) {
  return nums.reduce((total, n) => total + n, 0);
}

sum(1, 2, 3); // 6

5.箭头函数

语法更短，但是没有自己的this，this来自外层

基本写法：

const add = (a, b) => a + b;
const log = msg => console.log(msg);
const fn = () => {
  console.log('多行就要大括号');
};