访问器属性原理与应用场景，演示获取dom元素方法

发布于：2022-04-02 11:52:20  栏目：技术文档

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

// 访问器属性
//声明一个user对象
let user = {
  // 设置user常规属性
  data: {
     name: '小刘同学',
     age: 18,
  },
  // 通过方法获取年龄
  getAge() {
    return this.data.age;
  },
  // 通过方法设置年龄
  setAge(age) {
     if (age >= 18 && age <= 110) {
        this.data.age = age;
     } else {
        console.log('非法数据');
     }
  },
};
//获取user对象中的年龄属性值
console.log(user.getAge());
//设置年龄，然后重新获取打印
user.setAge(80);
console.log(user.getAge());
// 用户习惯这样获取年龄,所以我们将上面的代码改进如何
console.log(user.age);
user = {
  // 设置user常规属性
  data: {
     name: '小刘同学',
     age: 18,
  },
  // 将传统的方法,修改一个伪装成属性的方法get 关键字
  get age() {
     return this.data.age;
  },
  // 设置年龄,将之前的设置方法修改成了一个属性
  // 方法 -> 属性: 伪装成方法的属性,  "访问器属性"
  set age(age) {
      if (age >= 18 && age <= 110) {
          this.data.age = age;
      } else {
         console.log('非法数据');
      }
   },
};
console.log(user.age);
user.age = 150;
console.log(user.age);
// 访问器属性,本质上还是方法,调用时,用的属性访问的语法

演示获取dom元素方法

<ul class="content">
        <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. 将所有的li.item 背景变成红色
        // querySelectorAll(selector):返回一组元素
        const items = document.querySelectorAll('.item');
        for (let i = 0; i < items.length; i++) {
            // console.log(items[i]);
            items[i].style.background = 'red';
        }
        // 2. 将第一个改为蓝色
        // querySelector: 返回一组元素中的第一个,只返回一个,而不是一组
        const firstItem = document.querySelector('.item');
        // console.log(firstItem);
        firstItem.style.background = 'blue';
        //获取页面页面页面body
        console.log(document.querySelector('body'));
        console.log(document.body);
        //获取页面页面页面head
        console.log(document.head);
        //获取页面页面title
        console.log(document.title);
        // 获取页面html
        console.log(document.documentElement);
    </script>

相关推荐