访问器的原理及DOM元素

访问器的原理和属性

代码：

  // 访问器属性
     let  user = {
       // 常规属性
        data:{
         mane:'欧阳老师',
         age : '22',
       },
       // 获取年龄
       getAge(){
           return  this.data.age ;
       },
       //设置年龄
       setAge(age){
         if(age  >  18  &&  age < 120){
           this.data.age =age;
         }else{
           console.log('非法操作');
       }
        }
     };
     console.log(user.getAge());
     user. setAge(130);
    console.log(user.getAge());
    // 对于用户来说通常获取年龄，习惯用这种方法
// console.log(user.age)
// console.log(user.data.age)

 // 访问器属性
   let  user = {
        // 常规属性
        data:{
          mane:'欧阳老师',
          age : '22',
        },
        // 将传统方法修改一个伪装成属性方法
        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);
 user.age=150;
 console.log(user.age);
// 访问器属性，本质上还是方法，调用时，用的是属性访问的语句

获取DOM元素

代码：

   <ul class="list">
      <li class="ltem">itme1</li>
      <li class="ltem">itme2</li>
      <li class="ltem">itme3</li>
      <li class="ltem">itme4</li>
      <li class="ltem">itme5</li>
  </ul>
  <script>    
    // querySelectorAll 返回一组元素
    //获取（ltem）这一组元素
    console.log(documet. querySelectorAll('.ltem'))；
    //定义一个变量
    conts  itmts =documet. querySelectorAll('.ltem');
    //使用for循环获取这一组的值，全部改成红色
    for（ i= 0 ; i<itmts.length; i++){
    console.log(itmts.[i]);
    itmts.[i].style.color ='red';
    }
    // querySelector 返回一组中的第一个，只返回一个 不是一组
    //将第一个改成蓝色
    conts  firsIttem =documet.querySelector('.ltem')
    //打印一下看是否取的是第一个
    console.log(firsIttem);
    //将第一个改成蓝色
    firsIttem.style.color= 'blue';
    //获取body元素documentElement
    console.log(document.body)
    //获取head元素
    console.log(document.head)
    //获取title
    console.log(document.title)
    //获取html
    console.log(document.documentElement)
  </script>