JS访问器属性以及dom元素的两种方法的练习 -

访问器属性演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>访问器属性</title>
</head>
<body>
</body>
<script>
     let User={
                data:{
                    name:"李四",
                    password:"123123",
                    email:"123123@qq.com"
                },
                //没有使用访问器属性的时候修改以及获取属性是这样的
                getName:function(){
                     return this.data.name;
                },
                getPassword(){
                    return this.data.password;
                },
                getEmail(){
                    return this.data.email;
                },
                setName(name){
                        this.data.name=name;             
                },
                setPassword(password){      
                        this.data.password=password;                       
                },
                setEmail:(email)=>{                   
                          this.data.email=email                 
                },       
        }   
        User.setName("张三");
        console.log(User.getName());
         //  访问器属性不包含数据值，它们包含一对getter和setter函数                 
            //我们来写访问器属性
        User={
            data:{
                    name:"李四",
                    password:"123123",
                    email:"123123@qq.com"
            },
            get name(){
                return    this.data.name
            },
            get password(){
                return this.data.password
            },
            get email(){
                return this.data.email
            },
            set name(name){
                if(name!=''){
                 this.data.name=name;
                }else{
                    console.log("非法数据");
                }
            },
            set password(password){
                 this.data.password=password;
            },
            set email(email){
                this.data.email=email;
            }
        }
        User.name='牛逼';
        console.log(User.name);
</script>
</html>

如下这张图片是访问器属性的页面效果

dom元素的两个方法的演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js获取dom元素</title>
    <style>
        .list{
            background-color:seagreen ;
        }
    </style>
</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>
        <li class="item">item6</li>
        <li class="item">item7</li>
        <li class="item">item8</li>
    </ul>  
</body>
<script>
    //   获取dom元素有多种方法
            // 只写两种比较常用方法
            // document:获取整个html的文档,是个对象
            // 我们先来简单认识 document 
            // 打印一下查看document , 到底是个什么东西
            console.log(document); //就是整个html元素
        //再来说  document.querySelectorAll()
            //获取一组dom元素,参数可以写对应的类名,id名
            // 类名以.点号, id名以# 
            let items=document.querySelectorAll('.item');
            // console.log(items);
            // 如果我们想获取一组中的某个dom元素, 
            // 可以在querySelectorAll()后面添加一个[参数]中括号,也叫索引,
            // 即 document.querySelectorAll('.item')[参数]
            // 这个索引也是跟数组一样,索引从0开始
            // 我们来获取第二个dom元素,即索引为1
            items=document.querySelectorAll('.item')[1];
            //我们来使用已经获取到的dom元素改变下css样式
            items.style.color='red'; //字体颜色为红色
            // console.log(items);
            // 看完上面的querySelectorAll(),在看
            //  这个 querySelector()的话,简单易懂
                //获取一组元素的第一个
                items=document.querySelector('.item');
                items.style.color='blue'; //蓝色
                console.log(items);
</script>
</html>