JavaScript HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。

---

HTML DOM (文档对象模型)

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

HTML DOM 模型被构造为对象的树：

HTML DOM 树

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

• JavaScript 能够改变页面中的所有 HTML 元素
• JavaScript 能够改变页面中的所有 HTML 属性
• JavaScript 能够改变页面中的所有 CSS 样式
• JavaScript 能够对页面中的所有事件做出反应

宏任务与微任务

宏任务便是 JavaScript 与宿主环境产生的回调，需要宿主环境配合处理并且会被放入回调队列的任务都是宏任务

微任务和宏任务皆为异步任务 ，它们都属于一个队列，主要区别在于他们的执行顺序，Event Loop的走向和取值。

setTimeout(function(){
    console.log('1');
});
new Promise(function(resolve){          
    console.log('2');
    resolve();
}).then(function(){         
    console.log('3');
}).then(function(){
console.log('4')
});         
console.log('5');
// 2 5 3 4 1
​

分析：

1.遇到setTimout，异步宏任务，放入宏任务队列中 2.遇到new Promise，new Promise在实例化的过程中所执行的代码都是同步进行的，所以输出2 3.而Promise.then中注册的回调才是异步执行的，将其放入微任务队列中 4.遇到同步任务console.log(‘5’);输出5；主线程中同步任务执行完 5.从微任务队列中取出任务到主线程中，输出3、 4，微任务队列为空 6.从宏任务队列中取出任务到主线程中，输出1，宏任务队列为空

setTimeout(()=>{
  new Promise(resolve =>{ //这里是一个宏任务包裹了一个微任务
    resolve();
  }).then(()=>{
    console.log('test');
  });
​
  console.log(4);
});
​
new Promise(resolve => {
  resolve();
  console.log(1)
}).then( () => {
  console.log(3);
  Promise.resolve().then(() => {
    console.log('before timeout');
  }).then(() => {
    Promise.resolve().then(() => {
      console.log('also before timeout')
    })
  })
})
console.log(2);
​
//2 1 3  bt abt 4 test

总结：

宏任务：由宿主（Node/浏览器）发起的任务。 JavaScript 与宿主环境产生的回调（script ， setTimeout，UI/setImmediate）后

微任务：由js发起的任务。他们都是异步任务 先

• interval对象或timeout对象，这两种定时器对象只会随着窗口对象的销毁才从栈空间回收。无法通过更改变量的指针指向null的方式通知垃圾回收机自动回收。 如果打算在窗口对象关闭之前销毁窗口对象的栈内存中的interval对象只能通过interval的销毁函数销毁它，interval的销毁函数为clearInterval，timeout的销毁函数为clearTimeout。 interval先 timeout后