原生webAPI加事件,属性操作,改样式,改内容,入口函数,定时器,页面滚动事件和滚动距离,游览器对象,本地存储等面试知识点

1.加事件

   var box=document.getElementById('box');

   box.onclick=function(){//鼠标单击事件

   console.log('代码会在点击box盒子后执行');

  }

//可能出现:Uncaught TypeError:Cannot set property 'onclick' of null

//原因:游览器先加载按钮节点在执行js,当游览器自顶向下解析,找不到onclick绑定的按钮节点

//1.在js中用window.onload=function(){}包裹起来

//2.将script中语句放在body下面

2.属性操作

    //找到标签,直接点击属性名,就可以获取值和设置值

      var myImg=document.getElementById('pic');

      myImg.src="新的图片地址";

     //如果写等号,就是赋值,不写等号,就是取值

       myImg.src=" ";//赋值

      myImg.src;//取值

3.改样式 

   var box=document.getElementById('box');

   box.style.width='100px';

   box.style.height='100px';//通过样式属性设置宽高位置属性 需要加px

   box.style.backgroundColor='red';

   //修改标签的className相当于修改标签的类名

   box.className='show';//类名改为show了

4.改内容

   var box=document.getElementById('box');

   //box.innerHTML='我是文本<p>我会生成标签</p>';

    box.innerText='我是文本<p>我不会生成标签</p>'

5.入口函数 onload事件

    window.onload=function(){//页面加载时完成执行

    }

 //js写的位置:head结束之前或body结束标签之前

6.定时器

  //单次定时 setTimeout()和clearTimeOut()只执行一次

    例:创建一个空的定时器,1000毫秒后执行,返回定时器标志

     var timeId=setTimeout(function(){
           console.log('hello');
      },1000)

    clearTimeout(timeId);     //取消定时器的执行

   //多次定时 setInterval()和clearInterval()

   例子:创建一个空定时器,没隔1s调用一次

          var timeId=setInterval(function(){

            var date=new Date();

             console.log(date.tolocalDateString());//当前时间

           },1000)

7.页面滚动事件和滚动距离

    //页面滚动事件 window.onscroll=function(){}

    document.documentElement.scrollTop;//获取页面滚动距离

    document.body.scrollTop;//获取页面滚动距离 //兼容性写法

   [注意:要给body设置高,并且要有滚动条]

8.事件的另外一种写法

   function keyevent(){

    if(event.keyCode==13){

         alert('123');

   }

}

document.onkeydown=keyevent;

9.游览器对象;游览器对象也属于window对象的子对象,window可以省略

   location对象   href跳转的地址

   assign()  让页面跳转到指定的网页(可以后退)

                  history对象的方法 go() 1前进 -1后退

10.本地存储

    1.localstorage扩展了cookie的4k的限制

     2.localstorage可以将第一次请求的数据存储到本地

        比cookie节约带宽,只有在高版本游览器中使用

        if(!window.localstorage){

         alert("游览器支持localstorage");

        return false;

       }else{

        }

    localStorage.setItem('属性名','属性值');

    localStorage.getItem('属性名');

    localStorage.removeItem('属性名)