访问器属性原理与应用场景、获取dom元素的二个重要方法

访问器属性

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

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);

应用场景：

1、修改访问器属性动态修改相关联的数据属性。
2、监听访问器属性的修改去操作其它业务逻辑。

获取DOM元素

querySelectorAll(selector):返回一组元素

const items = document.querySelectorAll('.item');
for (let i = 0; i < items.length; i++) {
    // console.log(items[i]);
    items[i].style.color = 'red';
}

querySelector: 返回一组元素中的第一个,只返回一个,而不是一组

const firstItem = document.querySelector('.item');
// console.log(firstItem);
firstItem.style.color = 'blue';

其他元素获取方式

console.log(document.body);
console.log(document.head);
console.log(document.title);
// 获取html
console.log(document.documentElement);