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

今天药忘吃喽~ 2022-01-12 16:23 200阅读 0赞

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

## 2、window对象 ##

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

方法和函数 区别：

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

**三个对话框** ：  
alert() 警告框  
prompt() 弹出输入框 点击确定返回输入的内容点击取消返回null  
confirm() 弹出确认框 点击确定 返回true 点击取消返回false  
![对话框实测][20190617211319659.png]  
**一个弹出新窗口（页面跳转）**  
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) 刷新  
![location 地址栏对象][location]

## 4、history 历史记录对象 ##

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

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

document.write() 浏览器打印  
![浏览器打印][20190617212536926.png]  
**查找页面元素的方式 ：**

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()  
![元素查找实测][20190617212634870.png]

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

属性:  
设置属性 ： obj.属性 = 值  
获取属性 ： obj.属性  
获取自定义(非自定义)属性值 ： getAttribute()  
设置属性 ： setAttribute()  
![属性操作][20190617213005823.png]  
内容  
innerHTML 操作标签；识别html标记；扩展:outerHTML改变了元素本身  
innerText 操作标签 ；文本内容操作：不识别html标记  
value 操作表单  
设置内容 ：  
obj.innerHTML = “内容”  
obj.innerText = “内容”  
obj.value = “内容”  
获取内容 ：  
obj.innerHTML  
obj.innerText  
obj.value  
![内容操作][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]  
样式  
设置样式 ：  
obj.style.样式 = 值；一次只能操作一个样式oDiv.style.color = “red”  
obj.style.cssText = “css编写格式”（了解）  
oDiv.style.cssText = “color:red;”  
obj.className = “类名” 复用性好  
![样式操作][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]  
获取 ：  
obj.style.样式 只能获取行内样式 或 obj.className

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

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

## 7、this 当前对象（重点） ##

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

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

//全选框设置  
![全选框设置][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]

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

第一步 ：注意布局保证标题和对应的内容下标一致  
第二步 ：使用循环为标题添加事件注意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";
    	}
    }

[BOM]: /images/20220112/a8700630a5854e799a05d81c0372f6b5.png
[20190617211319659.png]: /images/20220112/d12ae94bfee74d64b50953228acccb84.png
[location]: /images/20220112/797adc23ddac433682fb2ee02123e18c.png
[20190617212536926.png]: /images/20220112/03c92342ca524652a91acd558efcac05.png
[20190617212634870.png]: /images/20220112/b4c81642cc2445fda0eda24febb676b2.png
[20190617213005823.png]: /images/20220112/072222a03f5e445f8c0891e2b60b57c5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70]: /images/20220112/144da45f8e0e4d0ea3ffc64059742c2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 1]: /images/20220112/8f3665922e494ab08feae5e839d0ad9a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1pIQU5HSklOOTU0Ng_size_16_color_FFFFFF_t_70 2]: /images/20220112/bc91bdfddd01451293c595fada8c72f2.png