JS-各种标签及用法（第四周总结）

BOM操作 : 浏览器对象模型,都是操作浏览器的

1,三大弹出层

 window.alert()     提示框
    window.prompt()    输入框
    window.confirm()   确认框

2,地址栏信息

window.location            地址栏信息
window.location.reload     重新加载页面
window.location.href       浏览器地址/设定跳转地址
decodeURIComponent()       地址栏中文正常显示
window.location.host       主机名称
window.location.prot       主机端口
window.location.search     地址栏参数

3,浏览器的跳转

window.history             浏览器跳转
window.history.length      浏览器跳转次数
window.history.back        浏览器跳转上一个页面
window.history.forward     浏览器跳转下一个页面
window.history.go()        浏览器跳转次数设定

4,浏览器信息对象

 window.navigator            浏览器信息对象
    window.navigator.userAgent  浏览器版本,名称等信息
    window.navigator.appName    浏览器名称---网景
    window.navigator.appVersion 浏览器版本
    window.navigator.platform   浏览器所在操作系统

5,运动条

 document.documentElement.scrollTop || document.body.scrollTop
    document.documentElement.scrollLeft || document.body.scrollLeft

6,常见事件

window.onload      浏览器加载事件
window.onscroll    浏览器滚动条监听事件
window.onresize    浏览器大小改变
window.open()      新窗口打开
window.close()     关闭当前窗口

DOM操作 : 文档对象模型,操作HTML文件的

1,获取标签对象,通过获取的标签对象,来操作标签

document.getElementById()         通过id属性值,获取一个标签对象
document.getElementsByClassN()    通过class属性值,获取标签对象,伪数组
document.getElementsByTagName()   通过标签名称,获取标签对象伪数组
document.getElementsByName()      通过标签name属性值,获取标签对象伪数组,可以forEach

document.querySelector()          通过设定内容,获取一个标签对象
document.querySelectorAll()       通过设定内容,获取标签对象,为数组,可以forEach

2,操作,设定标签对象

属性操作
    标签对象本身就具有的, console.dir(标签对象),可以看到的
        通过 点语法 或者 []语法,直接操作
                id,className,checked...

    通过JavaScript方法操作
        标签对象.setAttribute('属性' , 属性值)     设定
        标签对象.getAttribute('属性')             获取
        标签对象.removeAttribute('属性' , 属性值)  删除

样式操作
    设定 : 标签对象.style.属性 = 属性值
            标签对象.style[属性] = 属性值

    获取 : window.getComputedStyle(标签对象).属性   一般浏览器
            标签对象.currentStyle.属性               低版本IE浏览器

标签参数 
    标签对象.value

标签占位
    标签对象.offsetHeight   标签对象.offsetWidth
        宽高+padding+border

    标签对象.clientHeight   标签对象.clientWidth
        宽高+padding  
        
    标签对象.clientLeft   标签对象.clientTop
        左 / 上 边框线宽度

    标签对象.offsetLeft   标签对象.offsetTop
        与父级定位对象 标签对象.offsetParent 之间的间距

3,事件

事件类型
    鼠标事件
        click        左键单击
        dblclick     左键双击
        contextmenu  右键单击
        mousedown    鼠标按下
        mouseup      鼠标抬起
        mouseover    鼠标经过,子级也会触发
        mouseenter   鼠标经过.子级不会触发
        mouseout     鼠标移出,子级也会触发
        mouseleave   鼠标移出.子级不会触发
        mousemove   鼠标移动

    键盘按键事件
        keydown      按键按下
        keyup        按键抬起
        e.keyCode    按键数值
        e.altKey     alt按键是否按下
        e.ctrlKey    ctrl按键是否按下
        e.shiftKey   shift按键是否按下

    表单事件
        focus        获取焦点
        input        输入事件
        change       失去焦点,并且数值改变
        submit       提交表单

    触摸事件
        touchstart   触摸开始
        touchend     触摸结束
        touchmove    触摸移动

    特殊事件
        transitionend    过渡结束
        animationend     动画结束


浏览器视窗窗口的宽度高度

    包含滚动条
        window.innerHeight
        window.innerWidth

    不包含滚动条
        document.documentElement.clientHeight || document.documentElement.clientWidth
        document.body.clientHeight || document.body.clientWidth


事件对象  e   event
    定义在事件对象处理函数的参数,浏览器会自动向其中存储数据
    只需要定义形参,浏览器会自动存储赋值实参

    e = e || window.event


事件对象的坐标
    e.offsetX    e.offsetY    事件对象,内容左上角的坐标    
    e.clientX    e.clientY    事件对象,视窗窗口左上角的坐标    
    e.pageX      e.pageY      事件对象,页面左上角的坐标
    
事件对象的内容
    e.target     存储其中的属性 id  className...
    
事件的传播:
    点击子级标签,也会触发父级标签对象,相同类型的事件

    冒泡机制: 从子级到父级
    捕获机制: 从父级到子级

    阻止事件传播
        e.stopPropagation()     普通浏览器
        e.cancelBubble = true   低版本IE

事件的委托
    给父级标题,添加事件,通过判断触发事件的对象,来执行不同的操作
    一般用于动态生成的标签

事件的监听
    添加监听事件
        标签对象.addEventListener('事件类型' , 事件处理函数)   一般浏览器
        标签对象.attachEvent('on事件类型' , 事件处理函数)      低版本IE浏览器

    移出监听事件
        标签对象.removeEventListener('事件类型' , 事件处理函数)

    注意:
        如果没有参数,可以直接添加事件处理函数
        如果有参数,要用 function(){} 来包裹事件处理函数
        如果需要删除,必须绑定的是标签名称或者变量名称

特别提示: 浏览器的兼容性,一定要知道,面试基本都会问到

 目前可以回答的内容是:
        HTML的兼容性: 对于HTML标签的兼容和对音频视频播放的兼容
        css 的兼容性: 弹性盒子 过渡 动画 2d,3d....
        JavaScript的兼容性: 我给你们总结的