BOM （Browser Object Model ）浏览器对象模型总结

1、BOM ： Browser Object Model 浏览器对象模型

2、window对象

window对象的所有属性和方法都是全局的
window对象的所有属性和方法在使用时都可以省略 window.
所有的全局变量都是window对象的属性
所有的全局函数都是window对象的方法

方法和函数 区别：

方法属于函数 函数包含方法
window对象的方法（都是全局方法）：

三个对话框 ：
alert() 警告框
prompt() 弹出输入框 点击确定返回输入的内容点击取消返回null
confirm() 弹出确认框 点击确定 返回true 点击取消返回false

一个弹出新窗口（页面跳转）
open( “url” , “name” , “外观”) 该方法返回弹出的子窗口
外观 ：width height top left（位置、大小）
location 是否有地址栏；resizable是否可调整窗口大小；scrollbars是否有滚动条；status 状态栏；titlebar 标题栏； toolbar工具栏（兼容性）
yes | 1 表示有
no | 0 表示没有

两个定时器方法 ：
a、asetInterval( 要执行的任务 ，间隔时间 )连续执行的定时器使用clearInterval() 停止
b、setTimeout( 要执行的任务 ，间隔时间 )延时器只执行一次的定器
clearTimeout() 停止延时器 用法和setInterval一样

定时器特点 ： 定时器都是异步执行的 事件也是异步执行

思考 ： 页面打开后，弹出的广告窗口在5秒后自动关闭

    //给opener 一个点击关闭时间
    $id("btn2").onclick = function (){
    	opener.close();
    }
    //延时5秒执行关闭
    setTimeout( function(){
    	opener.close();
    },5000)

3、location 地址栏对象

location.href = "url"页面跳转把当前页面替换成指定的url页面
location.href 获取当前打开页面的路径
location.assign(“url”) 页面跳转
location.replace(“url”)页面跳转
location = “url” 页面跳转
window.open() 页面跳转
location.reload() 页面刷新
history.go(0) 刷新

4、history 历史记录对象

history.go(1) 前进 == history.forward()
history.go(-1) 后退 == history.back()
history.go(0) 刷新

5、document对象 页面对象（重点）

document.write() 浏览器打印

查找页面元素的方式 ：

document.getElementById() 根据id查找页面元素 结果是唯一的
document.getElementsByTagName()根据给定的标签名称查找页面元素 结果是一个集合，使用的时候需要用下标
document.getElementsByClassName() 根据给定的类名 查找页面元素 结果是一个集合 兼容性
document.getElementsByName() 根据给定的name值查找页面元素 一般适用于表单元素 结果是集合
document.querySelector() 根据给定的css选择器查找元素 结果是唯一的，一般用于id选择器 兼容性
用法 ： document.querySelector("#id") .classname html标记

document.querySelectorAll() 根据给定的css选择器查找元素 结果是集合 兼容性

document.html 错误的

总结 ：
查找的结果是一个类数组（伪数组）的方法有：
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()
document.querySelectorAll()

6、对页面元素的操作（核心操作）

属性:
设置属性 ： obj.属性 = 值
获取属性 ： obj.属性
获取自定义(非自定义)属性值 ： getAttribute()
设置属性 ： setAttribute()

内容
innerHTML 操作标签；识别html标记；扩展:outerHTML改变了元素本身
innerText 操作标签 ；文本内容操作：不识别html标记
value 操作表单
设置内容 ：
obj.innerHTML = “内容”
obj.innerText = “内容”
obj.value = “内容”
获取内容 ：
obj.innerHTML
obj.innerText
obj.value

样式
设置样式 ：
obj.style.样式 = 值；一次只能操作一个样式oDiv.style.color = “red”
obj.style.cssText = “css编写格式”（了解）
oDiv.style.cssText = “color:red;”
obj.className = “类名” 复用性好

获取 ：
obj.style.样式 只能获取行内样式 或 obj.className

获取非行内元素的样式 ： getComputedStyle( 元素 )["样式属性"] 兼容性  高版本浏览器

元素.currentStyle[“样式属性”] 低版本浏览器

7、this 当前对象（重点）

在事件中，this表示当前事件的触发者
在函数中，this表示当前函数的调用者
在方法中，this表示当前方法的调用者（面向对象）

function fn(){
    alert( this )  输出window对象
}
fn();

//全选框设置

//案例一、选项卡核心思路

第一步 ：注意布局保证标题和对应的内容下标一致
第二步 ：使用循环为标题添加事件注意for循环中事件内部的循环变量 i 暂时不能使用
第三步 ： 事件中表示当前触发的元素 使用this表示
第四步 ：获取当前操作元素的下标　　根据下标查找内容
先在标题的标签上　添加自定义属性 index 手动输入下标序号

//找到四个标题a标签
var as = document.getElementsByTagName("a");
//找到四个内容div标签
var divs = document.querySelectorAll(".content");
//为每一个标题添加一个onclick事件
//使用循环： 同一类标签添加同样的事件可以使用循环
for( var i = 0 ; i < as.length ; i++){
	//为每一个标题添加自定义属性，用来记录下标
	as[i].index = i;
	as[i].onclick = function(){
		for( var j = 0 ; j < as.length ; j++){
			as[j].className = "";     //将所有的标题样式清空
			divs[i].style.display = "none";	//隐藏所有的标题内容
		}
		//改变当前操作的标题样式
		//this 在事件中表示当前时间的触发者
		//给当前标签增加样式
		this.className = "on";
		//记录当前操作的下标
		var index = this.index;
		//让当前标签对应的盒子显示
		divs[index].style.display = "block";
	}
}