访问器属性

用访问器属性改造后：调用和设置方法更简单

访问器属性，本质上还是方法，调用时，用的是属性访问的语法

<!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>访问器属性</title>
  </head>
  <body>
    <script>
      let users = {
        data: {
          id: 1,
          username: "游戏人生",
          salary: "9999",
        },
        // 获取工资
        getSalary() {
          return this.data.salary;
        },
        // 设置工资
        setSalary(salary) {
          if (salary > 100 && salary < 1000000) {
            this.data.salary = salary;
          } else {
            console.log("工资收入有误");
          }
        },
      };
      //   打印查看
      console.log(users.getSalary());
      users.setSalary(6000);
      console.log(users.getSalary());
      //   上面收入的获取方法：console.log(users.data.salary)
      //   访问器属性改造示例
      //   改造后的获取方法：console.log(users.salary)
      //   用访问器属性改造后：调用和设置更简单
      // 访问器属性，本质上还是方法，调用时，用的是属性访问的语法
      users = {
        data: {
          id: 1,
          username: "游戏人生",
          salary: "9999",
        },
        // 获取username
        get username() {
          return this.data.username;
        },
        // 获取工资
        get salary() {
          return this.data.salary;
        },
        // 设置工资
        set salary(salary) {
          if (salary > 100 && salary < 1000000) {
            this.data.salary = salary;
          } else {
            console.log("工资收入有误");
          }
        },
      };
      console.log("---------------");
      console.log(users.username);
      users.salary = "6000";
      console.log(users.salary);
    </script>
  </body>
</html>

应用场景：

1、修改访问器属性动态修改相关联的数据属性。

2、监听访问器属性的修改去操作其它业务逻辑。

dom元素的二个重要方法

1.获取一组元素用选择器：querySelectorAll(selector)

2.获取一个元素用选择器:querySelector

<!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 class="list">
      <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>
      // 1.获取一组元素用选择器querySelectorAll(selector)
      //   将所有的li.item变成红色
      //   console.log(document);
      console.dir(document);
      //   querySelectorAll(selector):选择器，功能是返回一组元素
      //   console.dir(document.querySelectorAll);
      //   拿到一组item
      console.dir(document.querySelectorAll(".item"));
      const items = document.querySelectorAll(".item");
      for (let i = 0; i < items.length; i++) {
        //   遍历每一行的item
        console.log(items[i]);
        // 设置前景色为红色
        items[i].style.color = "red";
      }
      //   用forEach更容易，改为蓝色
      items.forEach((item) => (item.style.color = "blue"));
      console.log("----------------");
      //   2.获取一个元素用选择器:querySelector
      //   querySelector返回的是一组元素中的第一个
      //   将第二个改为红色
      const firstItem = document.querySelector(".item");
      console.log(firstItem);
      firstItem.style.color = "green";
      //   获取页面中的唯一元素的方法很多。示例
      console.log(document.querySelector("body"));
      console.log(document.body);
      console.log(document.head);
      console.log(document.title);
      //   获取html,专门用documentElement
      console.log(document.documentElement);
    </script>
  </body>
</html>

随机推荐

访问器属性原理和应用场景及dom元素的两个重要方法

访问器属性

用访问器属性改造后：调用和设置方法更简单

访问器属性，本质上还是方法，调用时，用的是属性访问的语法

应用场景：

1、修改访问器属性动态修改相关联的数据属性。

2、监听访问器属性的修改去操作其它业务逻辑。

dom元素的二个重要方法

1.获取一组元素用选择器：querySelectorAll(selector)

2.获取一个元素用选择器:querySelector

更多相关文章

随机推荐