BOM 和 DOM

188 阅读3分钟

BOM

    全称browser object model -->浏览器对象模型,使用由对象组成的结构操作浏览器
    
    navigator -- 存储浏览器信息
    
    history  -- 操作浏览器的历史记录 、
             history back() 后退一个页面
             history forward() 前进一个页面
             history go() 前进或后退多个页面 正数是前进,负数是后退,前进后退几个页面就看数字是几,0是刷新
    location -- 操作地址栏url
             href    设置完整的地址 -- location.href =新地址
                    获取完整的地址 -- location.href
                    
            search   设置地址栏参数 -- location.search=?键=值&键=值
                    获取地址栏参数 -- location.search
                    
            hash     设置锚点      --  location.hash=#单词
                    获取锚点      --  location.hash
     
     窗口大小:
          innerWidth   滚动条的宽度
          innerHeight  滚动条的高度
         
    事件
          window.onload                 当所有资源加载完成后,触发执行
          window.onresize               当浏览器窗口大小发生改变,触发执行
          window.onscroll               当浏览器卷去的距离发生改变,触发执行
    
    BOM的方法
          弹出层
              alert()
              confirm()
              prompt()
          
          全局定义的函数,都属于window的方法
          全局定义的变量,都属于window的属性
    
    定时器
           setInterval(函数,毫秒数)   让函数每隔毫秒数,就执行一次,会不停的执行下去
           setTimeout (函数,毫秒数)   让函数延迟毫秒数执行一次,就这一次 
           返回值都代表当前页面的第几个定时器 - 数字 
           停止定时器,使用返回值     clearInterval(返回值)
                                    clearTimeout(返回值)
                                    
     打开新的标签页               window.open(url)
     设置卷去的距离               window.scrollTop(x,y)
     关闭窗口                     widow.close()
     

DOM

    全称 -- document object model   --  文档对象模型
    
    获取标签 
           document.querySelector(css选择器) -- 获取满足css选择器的第一个标签
           document.querySelectorAll(css选择器) -- 获取所有满足css选择器的标签
           document.getElementById()
           document.getElementsByClassName()
           document.getElementsByTagName()
           document.getElementsByName()
           
    获取html基本结构标签
            html   --  document.documentElement
            body   --  document.body
            head   --  document.head
            网页标题  -- document.title  可获取标题  
                                        可设置标题    
   
   获取标签名 -- 标签.tagName
   
   操作内容
           双标签   文本内容   设置   标签.innerText = 值
                              获取   标签.innerText
                   带标签的内容   设置   标签.innerHTML = 值
                                 获取   标签.innerHTML
           表单    设置      标签.value = 值
                   获取      标签.value
                   
  操作属性      设置属性      
                      设置属性   标签.setAttribute(属性名,值)
                      获取属性   标签.setAttribute(属性名)
                      删除属性   标签.setremove(属性名)
  样式操作     获取样式     getComputedStyle(标签)      返回由所有CSS键值对组成的对象                       设置样式    标签.style.css键 = 值        设置到行内   
  
  类名操作     直接操作class属性值    标签.className = 值
              标签.className
              
              classList add()   添加一个类名
              classList remove()  删除一个类名
              classList contains()  判断是否有这个类名
              classList toggle()  让类名在删除和添加之间切换
              
  获取卷去的距离   有文档声明    document.documentElement.scrollTop 
                  没有文档声明  document.body.scrollTop 
                  万能(兼容)写法  var t=document.documentElement.scrollTop || document.body.scrollTop 
                  document.documentElement.scrollTop = document.body.scrollTop = 数字
                  
短路运算      使用逻辑运算符&&和||给变量进行赋值                   
                    var 变量=值1&&值2     如果左边为true,就会将右边的值赋值给变量
                                         如果左边为false,就会将左边的值赋值给变量
                                         
                    var 变量=值1||值2     如果左边为true,就会将左边的值赋值给变量
                                         如果右边为false,就会将右边的值赋值给变量