1 DOM

document object model 文档对象模型

  1.         <!-- DOM document object model 文档对象模型 -->
  2.     <!-- DOM树有节点组成 -->
  3.     <!-- 节点的关系：父子兄弟 -->
  4.     <!-- 获取节点 -->
  5.     <div id="app" class="one">hello</div>
  6.     <p class="one">hello</p>
  7.     <div>good</div>
  8.     <script>
  9.         /*  通过id获取 */
  10.         var app = document.getElementById("app")
  11.         console.log(app)
  12.         /* 通过class名获取节点 */
  13.         var one = document.getElementsByClassName("one")
  14.         console.log(one)
  15.         /* 通过class名获取节点 */
  16.         var tags = document.getElementsByTagName("div")
  17.         console.log(tags)
  18.         /* 通过选择器 */
  19.         var divs = document.querySelectorAll("body div")
  20.         console.log(divs)

2 点击事件

  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>Document</title>
  8.     <style>
  9.         #app {
  10.             width: 50px;
  11.             height: 50px;
  12.             border:1px solid #333;
  13.         }
  14.     </style>
  15. </head>
  16. <body>
  17.     <div id="app"></div>
  18.     <script>
  19.         var app = document.getElementById("app")
  20.         /* 事件后面一般对应的就是一个函数 */
  21.         app.onclick = function(){
  22.             app.style.background = "red"
  23.         }
  24.     </script>
  25. </body>
  26. </html>