[妙味 DOM] 第二课：DOM、BOM相关方法及属性

知识点总结

• 获取样式、增加样式、删除样式函数的封装
• 表格

        tHead
        tBodies
        tFoot
            rows  行
            cells 列

• 表单

    表单可以通过name来获取元素：表单.name值
    onchange   当值发生改变时触发
        text:    当光标移开时触发
        radio/checkbox:    标准下点击改变就触发，非标准下改变并光标离开时才触发(推荐使用onclick),判断是否选中checked
        select: 值发生改变时触发

    onsubmit 事件  当提交表单时触发
    submit() 方法，比如：页面加载时过几秒setTimeout跳转到另一个页面

    onreset  事件  当重置表单时触发
    选择对话框 confirm() 确定和取消，有返回值，确定为true,取消为false
　　 输入对话框 prompt('内容','结果')，有返回值，返回为结果,取消和关闭，返回null

• BOM

    BOM 浏览器对象模型
    open(url,打开窗口的方式)，返回值为新窗口的window对象。如果不写参数，默认打开一个新的空白窗口
    第一个参数为空，则默认是空白页面
    第二个参数为空，则默认打开新窗口
　　 window.open('http://www.baidu.com','_self')  在本窗口打开页面
　　 window.open('http://www.baidu.com','_blank')  =  window.open('http://www.baidu.com')   在新窗口打开页面

    存在一个返回值，返回值为新打开窗口的window对象

　　　　opener = window.open();
　　　　opener.document.body.style.background = 'blue';  //新打开的窗口，背景设置成blue，注：跨域无法处理。

       window.close();

        存在兼容性问题：
        1、IE ：询问是否关闭
        2、FF、safari ：无法关闭
        3、chrome  ：关闭窗口
    close()，可以关闭用open()方法打开的窗口

    window.navigator.userAgent  浏览器信息
    window.navigator.userAgent.indexOf('MSIE')

    window.location  url地址，是一个对象，因此有属性
    window.location.href  url信息
    window.location.search  url?后面的内容,包括?号
    window.location.hash url#后面的内容,包括#号
    window.location.hash或window.location.hashname 域名

• 窗口尺寸和大小

可视区尺寸：
        document.documentElement.clientWidth
        document.documentElement.clientHeight
    滚动距离：
        document.documentElement.scrollLeft/scrollTop
        document.body.scrollLeft/scrollTop   =>针对chrome

        处理兼容性：
        var scroll = document.documentElement.scrollTop || document.body.scrollTop

    内容高(盒子里除边框外，能放东西的高）：
        document.body.scrollHeight/scrollWidth
        元素.scrollHeight/scrollWidth

    文档高度：
        document.body.offsetHeight(推荐)
        document.documentElement.offsetHeight使用会存在兼容问题,在IE下成可视区的高了

　　clientHeight = height+padding
　　offsetHeight = height+padding+border    /   clientHeight+border

 

• window对象常用事件

onscroll  当滚动条滚动的时候触发  
　　例子：让BOX在窗口的中间位置，布局的方法position:fixed，IE6采用onscroll+运动框架(可以解决抖动的问题)来实现。
onresize  当窗口大小发生改变的时候触发