ASCII码 ASCII码

访问器属性原理与应用场景，获取DOM元素的2个方法

发布于：2022-04-21 15:32:35  栏目：技术文档

1. 访问器属性原理与应用场景

  1.       let user = {
  2.         //常规属性
  3.         data: {
  4.           name: "唐太宗",
  5.           age: 18,
  6.         },
  7.         // 将传统的方法，修改一个伪装成属性的方法
  8.         get age() {
  9.           return this.data.age;
  10.         },
  11.         //设置年龄，将方法修改成一个属性
  12.         set age(age) {
  13.           if (age >= 18 && age <= 120) {
  14.             this.data.age = age;
  15.           } else {
  16.             console.log("非法数据");
  17.           }
  18.         },
  19.       };
  20.       console.log(user.age);
  21.       user.age = 150;
  22.       console.log(user.age);
  24.       // 访问器属性,本质上还是方法,调用时,用的属性访问的语法

2. 获取DOM元素的2个方法

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  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>获取DOM元素</title>
  8. </head>
  9. <body>
  10.     <ul>
  11.         <li class="item">item1</li>
  12.         <li class="item">item2</li>
  13.         <li class="item">item3</li>
  14.         <li class="item">item4</li>
  15.         <li class="item">item5</li>
  16.     </ul>
  17.     <script>
  18.         let items = document.querySelectorAll('.item'); //返回数组，获取DOM里面class为‘.item’的所有元素
  19.         let length = items.length;
  20.         for(i=0;i<length;i++){
  21.             items[i].style.color='red';
  22.         }
  24.         let item = document.querySelector('.item')  //返回第一个匹配的元素
  25.         item.style.color='blue';
  27.         // querySelectorAll 批量获取元素，返回数组
  28.         // querySelector    获取符合条件的第一个元素
  29.     </script>
  30. </body>
  31. </html>

DOM

相关推荐
阅读 +

© 2020 asciim码

人生就是一场修行