js-基础（三）访问器原理与应用场景、获取dom元素

发布于：2022-04-26 17:48:54  栏目：技术文档

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

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

// 设置一个常规的类
        let userInfo={
            data:{
                name:'Jason',
                birthday:[2000,12,04],
                height:'1.75m',
                weight:'70kg'
        },
        // 获取姓名
        // getName(){
        //     return this.data.name;
        // },
        // 改写
        get Name(){
            return this.data.name;
        },
        // 修改姓名
        // ChangeName(name){
        //     if (name.length <= 20 ){
        //         this.data.name=name;
        //     }else{
        //         console.log('名字过长')
        //     }
        // },
        // 改写
        set Name(name){
            if (name.length <= 20 ){
                this.data.name=name;
            }else{
                console.log('名字过长')
            }
        },
        // 获取年龄
        get Age(){
            return (2022-this.data.birthday[0])
        },
        // 获取身高
        get Height(){
            return `${this.data.height[0]}${this.data.height[2]}${this.data.height[3]} cm`
        },
        // 修改身高
        set Height(height){
                return this.data.height=height;
        }
    }
    // 打印属性
    console.log(userInfo.data);
    console.log(userInfo.Name);
    console.log(userInfo.Age);
    console.log(userInfo.Height);
    userInfo.Height='1.88';
    userInfo.Name='Authur';
    console.log(userInfo.data);
    console.log(userInfo.Name);
    console.log(userInfo.Age);
    console.log(userInfo.Height);

获取dom元素

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

相关推荐