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

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

      let user = {
        //常规属性
        data: {
          name: "唐太宗",
          age: 18,
        },
        // 将传统的方法，修改一个伪装成属性的方法
        get age() {
          return this.data.age;
        },
        //设置年龄，将方法修改成一个属性
        set age(age) {
          if (age >= 18 && age <= 120) {
            this.data.age = age;
          } else {
            console.log("非法数据");
          }
        },
      };
      console.log(user.age);
      user.age = 150;
      console.log(user.age);
      // 访问器属性,本质上还是方法,调用时,用的属性访问的语法

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取DOM元素</title>
</head>
<body>
    <ul>
        <li class="item">item1</li>
        <li class="item">item2</li>
        <li class="item">item3</li>
        <li class="item">item4</li>
        <li class="item">item5</li>
    </ul>
    <script>
        let items = document.querySelectorAll('.item'); //返回数组，获取DOM里面class为‘.item’的所有元素
        let length = items.length;
        for(i=0;i<length;i++){
            items[i].style.color='red';
        }
        let item = document.querySelector('.item')  //返回第一个匹配的元素
        item.style.color='blue';
        // querySelectorAll 批量获取元素，返回数组
        // querySelector    获取符合条件的第一个元素
    </script>
</body>
</html>

DOM

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

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

更多相关文章

随机推荐