DOM - 图1
DOM - 图2
DOM - 图3

DOM - 图4
它就是整个html网页文档，这点我们在浏览器控制台输入它即可展开查看
DOM - 图5

延迟执行(js代码可以写在html节点前面)

DOM - 图6
例如这段代码

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>test</title>
  8. </head>
  9. <body> 
  10.     <script>
  11.         // 得到盒子1
  12.         var box1 = document.getElementById('box1');
  13.         // 得到盒子2
  14.         var box2 = document.getElementById('box2');
  15.         console.log(box1);
  16.         console.log(box2);
  17.     </script>
  18.     <div id="box1">我是盒子1</div>
  19.     <div id="box2">我是盒子2</div>
  20. </body>
  21. </html>

这样只能找前面的，所以找不到为null，因此一般我们将script标签放在最后或者相关联html结构的后面
DOM - 图7

不过当然也有将script标签对书写在前面的办法，不仅如此还能放在head标签对中
DOM - 图8
事件对象

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  8.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  9.     <title>test</title>
  10.     <script>
  11.         // 给windows对象添加onlad监听。onlad表示页面都加载完毕了
  12.         window.onlad= function() {
  13.             // 得到盒子1
  14.         var box1 = document.getElementById('box1');
  15.         // 得到盒子2
  16.         var box2 = document.getElementById('box2');
  17.         console.log(box1);
  18.         console.log(box2);
  19.         };
  20.     </script>
  21. </head>
  22. <body> 
  23.     <div id="box1">我是盒子1</div>
  24.     <div id="box2">我是盒子2</div>
  25. </body>
  26. </html>

至于这个事件，后续进行讲解，我们现在只需知道怎么用就行了