ASCII码 ASCII码

浏览器中的JS和获取dom元素

发布于：2022-06-13 10:45:41  栏目：技术文档
  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.     <script src="demo7.js"></script>
  8.     <title>浏览器中的JS</title>
  9. </head>
  10. <body>
  11.     <!-- js的工作环节/宿主环境：浏览器和服务器node.js -->
  13.     <!-- 1.事件属性，写到元素的事件属性 -->
  15.     <button onclick="console.log('hello world');">按钮1</button>
  16.     <button onclick="setBg(this)">按钮2</button>
  18.     <!-- 获取dom元素 -->
  19.     <ul class="list">
  20.         <li class="item">item1</li>
  21.         <li class="item">item2</li>
  22.         <li class="item">item3</li>
  23.         <li class="item">item4</li>
  24.         <li class="item">item5</li>
  25.     </ul>
  27.     <script>
  28.         // TODDD 获取一组  querySelectorALL(css选择器)
  29.         console.log(document);
  30.         const items = document.querySelectorAll(".list > .item");
  31.         console.log(items);console.log(document);
  32.         for(let i = 0;i < items.length; i++){
  33.             items[i].style.color = "red";
  34.         }
  37.         // TODDD 获取一个 querySelector(css选择器)
  38.         const first = document.querySelector(".list > .item");
  39.         console.log(first);
  40.         first.style.backgroundColor = "yellow";
  42.         const third = document.querySelector(".list > .item:nth-of-type(3)");
  43.         console.log(third);
  44.         third.style.backgroundColor = "yellow";
  46.     </script>
  49. </body>
  50. </html>
相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行