web前端 js学习 第十一天 （BOM DOM 延时器）

延时器

	定时器    循环在执行
    延时器    延迟执行一次

    定时器和延时器都是异步

    定时器和延时器不做区分
        定时器和延时器存储的都是编号
        clearInterva  和  clearTimeout 可以混用

    延时器可以改成定时器
        setTimeout(fn,1000);
        function fn(){
            console.log(666);
            setTimeout(fn,1000);
        }

    定时器和延时器不做区分   都存储编号

    延时器   setTimeout
    clearTimeout   清除延时器,也可以清除定时器
    clearInterval  清除延时器,也可以清除定时器

BOM

ECMAScript     解释器、翻译    兼容性：完全兼容
    BOM        浏览器对象      兼容性：不兼容(例如IE，谷歌，火狐，不可能兼容) 
    DOM        文档对象        兼容性：部分不兼容

    BOM(Browser Object Model) 浏览器对象模型
    BOM是js的核心 window

DOM

DOM    
	    document object model   文档对象模型
        document 根节点
        documentElement    ==   html节点
        body 
        head
        title   可读可写
        
DOM内容
  	    操作元素的内容
        表单  value  
        普通标签   
            innerHTML   识别标签
            innerText    原样输出
            
DOM属性
		attributes  获取标签上的所有属性 
        自有属性
        自定义属性
   	    getAttribute()  获取某一个属性值

        ele.id  自有属性可以用

        ele.getAttribute() 获取自定义属性

 	    setAttribute()  添加属性 / 修改属性值

        removeAttribute()

    特殊属性  class
        className   字符串
        classList   数组
            add()    添加
            remove()  删除
            replace()   替换

window

window对象   不同的页面不会共享window
        变量实际上是window对象的自定义属性
        函数实际上是window对象的自定义方法
        直属于window对象的属性和方法在使用的时候可以省略window
        
window对象的属性
navigator   浏览器相关信息
            userAgent

        history   历史记录
            length  
            back()  回退
            forward()  前进
            go(-1)   前进和后退都可以

        location    地址栏的相关信息
            host  www.mi.com
            href  http://www.mi.com
            protocal  http / https
            pathname  斜杠后面的部分  /
            hash    #后面  -- 锚点
            search  ?username=aa&pwd=123  表单提交

            reload()  刷新页面
            assign()  直接替换当前网址，有返回
            replace()  直接替换当前网址，没有返回
        document   DOM
        
window对象的事件
	// onload  等页面资源加载完毕之后再执行   
    window.onload = function(){
        var oH1 = document.getElementById('h1');
        console.log(oH1.innerHTML)
    }

    // 获取焦点
    window.onfocus = function(){
        console.log(666)
    }

    // 失去焦点
    window.onblur = function(){
        console.log(777)
    }

    // 浏览器窗口大小发生变化时触发次事件
    window.onresize = function(){
        console.log(888)
    }

    // 滚动条事件  
    window.onscroll = function(){
        console.log(999)
    }

网页高度

 浏览器的可视宽高
        document.documentElement.clientWidth 
        document.documentElement.clientHeight


 页面的实际宽高
        document.documentElement.scrollWidth
        document.documentElement.scrollHeight
        document.body.scrollWidth
        document.body.scrollHeight

 页面被卷去的宽高
        主流浏览器
            document.documentElement.scrollLeft ;  宽度
            document.documentElement.scrollTop ;   高度
        IE 
            document.body.scrollLeft ;  宽度
            document.body.scrollTop ;   高度
        兼容写法
            document.documentElement.scrollLeft || document.body.scrollLeft 

示例：返回顶部

 css:
    body{
        height: 3000px;
    }
    p{
        padding: 20px;
        background-color: pink;
        position: fixed;
        right: 0;
        bottom: 0;
    }
<p id="p">返回顶部</p>
<script>
    var root = document.documentElement || document.body ;
    var oP = document.getElementById('p');
    oP.onclick = function(){
        // root.scrollTop = 0 ;

        var t = setInterval(function(){
            root.scrollTop -= 50 ;
            if(root.scrollTop <= 0) {
                // 如果还剩 -10
                root.scrollTop = 0 ;
                clearInterval(t)
            }
        },20)
    }
</script>