[妙味 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 当窗口大小发生改变的时候触发
原文地址:https://www.cnblogs.com/joya0411/p/3554377.html