js第十天---BOM、DOM、BOM的history、BOM的location

BOM: browser  object model  浏览器对象模型，提供了一系列操作浏览器的方法

   

     BOM：核心对象，顶级对象叫window

     对象的方法：

    window. 可以省去

     window.alert('弹出框')

     window.prompt('输入框')

        返回值: 输入的内容

     window.confirm('输入框')：

        返回值：点击确定返回true， 点击取消，返回false

   

    window.open("网址"): 一般会点击按钮，打开网址

    window.close()

 

    var 定时器的名字 = window.setInterval(函数,毫秒)  开启间隙性定时器

    window.clearInterval(定时器的名字)               关闭间隙性定时器

    var timer = setInterval(function(){},1000)

    window.clearInterval(timer)

 

     过了几秒后弹出一次

    超时定时器：  window.setTimeOut(函数,毫秒)  开启超时定时器

    超时定时器：  window.clearTimeOut(函数,毫秒)   关闭超时定时

    

     var flag = window.confirm('亲，你确定要删除吗？')

     console.log(flag);

     if (flag == true) {

          执行删除操作

     }

 

     var num= prompt('')

     console.log(num);

 

    

     获取元素：

     var oOpen = doc

 history：window的子对象，浏览器历史记录的一个对象

        history.go(1)/history.forward(): 前进一个页面

        history.go(-1)/history.back(): 后退一个页面

        history.go(0): 刷新当前页面

     在history中演示

 window的子对象：localtion对象

      localtion.reload(): 刷新

      localtion.href = "网址"  跳转页面

 DOM：文档对象模型：document object model

  DOM提供了一套操作文档（页面）的api

1、获取页面元素

     常规元素：
        语法1: document.getElementById('box')  只能找到一个
        语法2: document.getElementsByTagName('div') 获取的是所有标签名叫div (获取的是一组数据，伪数组)    
               document.getElementsByTagName('div')[0]  获取的是所有div的第一个   
        语法3:    
                document.getElementsByClassName('box')获取的是所有类名叫box的(获取的是一组数据，伪数组)    
                document.getElementsByClassName('box')[0] 获取的是所有div的第一个  
        语法4:
                document.getElementsByName('text') 获取的是所有name值叫text的 ( 获取的是一组数据，伪数组)
                                                    获取页面中所有name值叫text的元素
                document.getElementsByName('text')[0]   获取页面中所有name值叫text的第一个元素  
        语法5:
            通过选择器( .box   #box   ul>li)来获取页面元素
            document.querySelector('.box') 获取页面中类名叫box的第一个
            document.querySelectorAll('.box') 获取页面中所有类名叫box的元素
      非常规的：
        document.documentElement   ---》获取html标签          
        document.body   ---》获取body标签          
        document.title   ---》获取title标签          
        document.head   ---》获取head标签          
            
    

     2、 操作页面元素

       2.1 操作元素的内容
          支持标签
            获取元素的内容：对象（获取的元素）.innerHTML
            设置元素的内容：对象（获取的元素）.innerHTML = 

          不支持标签
            获取元素的内容：对象（获取的元素）.innerText
            设置元素的内容：对象（获取的元素）.innerText = 

          针对于表单控件：
            获取元素的内容：对象（获取的元素）.value
            设置元素的内容：对象（获取的元素）.value =

          不常用：<div>张三</div>
            获取元素的内容：对象（获取的元素）.outerHTML   标签的内容+标签本身（是一个字符串形式） <div>张三</div>
            设置元素的内容：对象（获取的元素）.outerHTML = 

        2.2 操作元素的样式
            
            设置样式： 对象（获取的元素）.style.属性名=属性值       获取样式：对象（获取的元素）.style.属性名 （没啥用）
                      
                      对象（获取的元素）.className = '类名'

                      对象（获取的元素）.classList.add('类名')
                      对象（获取的元素）.classList.remove('类名')
        
        2.3 操作元素的属性：
            <div id='' xx='' class='' aa=''></div>
            <img src='' y=''>

            属性分为固有属性（元素自身携带的属性）和自定义属性（aa，xx，y）

            自定义属性的设置和修改   <div></div>
            设置自定义属性：
               对象（获取的元素）.setAttribute('属性名','属性值')
            获取
               对象（获取的元素）.getAttribute('属性名')
            删除
               对象（获取的元素）.removeAttribute('属性名')

          <div index="1"  id="box" class='box'></div>

          <img src=''>
          <input type='text' value='neir'>

            设置(修改)固有属性：
                对象（获取的元素）.属性名 = '属性值'  oImg.src = '图片地址'
            获取固有属性：
                对象（获取的元素）.属性名    
                oImg.src
                oIpt.value

     history：window的子对象，浏览器历史记录的一个对象
       history.go(1)/history.forward(): 前进一个页面
       history.go(-1)/history.back(): 后退一个页面
       history.go(0): 刷新当前页面

     在history中演示

     window的子对象：localtion对象
      localtion.reload(): 刷新
      localtion.href = "网址"  跳转页面

    var oBtn = document.getElementById('btn')
    var oBtn1 = document.getElementById('btn1')

    oBtn.onclick = function () {
        location.reload();
    }
    oBtn1.onclick = function(){
        location.href = "http://www.baidu.com"
    }