访问器属性和获取dom元素的方法 -

首页 > 博客列表 > 访问器属性和获取dom元素的方法

博主信息

博文 12

粉丝 0

访问量 16125

专题推荐

更多>

访问器属性

从名字上来看，访问器依然是一个属性，只是一个伪装成方法的属性，是一对 get 和 set 函数。

常规属性的读写

//常规属性
let user = {
    data:{
        name:'张三',
        age:18,
    },
    //获取年龄
    getAge() {
        return this.data.age;
    },
    //设置年龄
        setAge(age) {
            if (age > 0 && age <= 100){
                this.data.age = age;
            }else{
                console.log('非法数据');
            }
        },
};
console.log(user.getAge());//  18
user.setAge(80);
console.log(user.getAge());//  80

访问器属性的读写

//访问器属性
let user = {
    data:{
        name:'张三',
        age:18,
    },
    get age() {
        return this.data.age;
    },
    set age() {
        if (age > 0 && age <= 100){
                this.data.age = age;
            }else{
                console.log('非法数据');
            }
        },
};
console.log(user.age);//    18
user.age = 120 ;
console.log(user.age);//    非法数据

总结：访问器属性调用时，用的是属性访问的语法，同时在语法上更简洁，语义更清晰。例如：在项目中别人需要知道你写的对象终端饿属性值，就可以直接使用 get 来直接获取，不需要再去翻找获取询问，同时我们也可以限制种种条件来保护属性。

获取dom元素的方法

document.querySelectorAll()获取一组元素

<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>
</body>
<script>
//拿到所有的 .item
const items = document.querySelectorAll('.item');
//将所有的 .item变成红色
const length = items;
for (let i = 0 ;i < length; i++) {
    item[i].style.color = 'red';
}
</script>

document.querySelector()获取第一个元素

//获取第一个元素
const firstItem = document.querySelector('.item');
//改变颜色
firstItem.style.color = 'blue';
//获取唯一元素
console.log(document.body);
console.log(document.head);
console.log(document.title);
//获取html
console.log(document.documentElement);

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

Markdown与html标签

2022-03-18 09:52:46