BOM

1、梳理知识点

内置对象 ： Array  String  Date  Math

Array : 排序  去重  增删改查   

Date ： 获取日期  倒计时   设置几天后的时间 

Math ：获取随机的整数 

function rand(min,max){    

}  

 

2、BOM

什么是BOM ： 浏览器对象模型

window 对象 是BOM模型的 根  

window对象 包含的子对象（window对象的属性、window对象的内置对象） ： 

    document  文档对象     

    event   事件对象

    location  地址对象

    history  历史记录对象

    navigator  浏览器对象

    screen   屏幕对象

 

3、window对象

window对象的属性和方法在使用时 可以 省略 window.

所有的全局变量都是window对象的属性  

所有的全局函数都是window对象的方法

 

window对象的常见方法 ： 

三个弹出框 ： 

    alert()  警告框

    prompt()  输入框     

    confirm()  确认框    返回布尔值  点击确定 返回true  点击取消返回false

两个定时器 ： 

    setInterval( 要执行的任务，间隔时间 )   连续执行     

    用法一 ：

        setInterval( function(){  ....  } , 1000 )  函数不可调用

    用法二 ： 

        setInterval( fn , 1000 )

        function fn(){     }   这个函数可以重复使用

    clearInterval( 定时器名称 )  清除定时器

特点:连续执行

 

    setTimeout( 要执行的任务 ， 间隔时间 )  间隔时间--毫秒    

    clearTimeout(  )  停止定时器

特点:只执行一次 ，多数用于延迟一次时使用 

     

定时器都是异步执行（定时器后面的代码会先执行且不受影响）

 

一个弹出窗口  

    open（“url”，“名称”，“外观”）    返回弹出的子窗口

    外观 ： width  height  left  top

子窗口随主窗口一起关闭

window.onunload=function(){子窗口.close();}

 

4、location对象 和 history对象

location.href 或 location 或 location.assign()

location.reload()刷新

history.go(0)刷新

history.go(1) 前进   history.forward()

history.go(-1) 后退 history.back()

 

5、document对象

文档对象  ： document   作用 ：查找页面元素  

 

document.getElementById()   根据给定的id查找页面元素  结果唯一

document.querySelector( css选择器 ) 根据给定的css选择器查找页面元素  结果唯一   document.querySelector("p")  document.querySelector(".box")

 

 

document.getElementsByTagName("标签") 根据给定的标签名查找页面元素  结果是一个集合(伪数组) 使用时要加下标 只找到一个 加下标[0]

document.getElementsByName("")  根据给定的name值查找页面元素  结果是一个集合 用法同上   一般只使用在表单标签上 

document.getElementsByClassName("类名")  根据给定的class名查找页面元素 结果是一个集合 用法同上   

document.querySelectorAll(css选择器) 根据给定的css选择器查找页面元素 结果是一个集合  用法同上  document.querySelectorAll("#box")[0]

 

document.body  找body

document.head 找head

document.title 找到title       

document.documentElement  找到html   

 

5、操作页面元素

操作样式 ：

    设置样式

        对象.style.样式 = "值"  

        对象.className = "类名"  前提定义一个class

        对象.style.cssText = "css的写法"（了解）

    获取样式 

        对象.style.样式 （只能获取行内样式）   

        对象.className 

操作属性 ： 

    设置属性:

        对象.属性  = "值" 

    获取属性：

        对象.属性

内容操作 ：

    设置非表单标签内容 ：

        对象.innerHTML = "值"   识别html标记

        对象.innerText = "值"  纯文本 且 火狐不兼容   火狐兼容写法--- textContent

    获取非表单标签内容 ： 

        对象.innerHTML或 对象.innerText  纯文本

    设置表单标签内容 ：

        对象.value = ""

    获取表单标签内容: 

        对象.value

 

 

6、this关键字    ---  当前对象

this如果出现在事件中 ，指向的是事件的触发者(事件源)

document.onclick = function(){

    alert( this );

}

 

this如果出现在某个方法或函数中，指向方法或函数的调用者(多数应用在面向对象中)

function fn(){

    alert( this );

}

window.fn()

 

如果不确定是哪个事件触发 或 哪个对象调用的   默认指向window

setTimeout( function(){

    alert( this );

},1000 )