JS day09—BOM

2023-10-03 18:56:04

1.BOM

Broswer Object Mode（浏览器对象模型）

结论:所有的属性和方法在被调用时，必须有前缀

凡是省略前缀的属性和方法，它的父级对象都是window

全局变量和方法的父级元素都是window

2.window的三个弹出框：

window对象常用的属性和方法：

三个弹出框: 特点阻塞代码执行

alert("内容") 弹出框

confirm("提示信息") 确认框确定返回true 取消返回false

prompt("提示信息","默认值") 输入框返回数值为字符串

3.window的一个事件：

onload：延迟加载，必须在页面其他模块加载完毕后在执行事件体的代码

window.onload = function(){

console.log("页面加载完成");

}

console.log("页面正在加载");

解决问题：

script可以写在html的任意位置，当body中写入代码，当在tml下面写script则没有任何问题

但当写在head中时则会出现报错：因为代码是自上而下的运行的。则需要加入.onload来解决。

4.location：地址对象

属性的读写：

1.href地址的读写：

读：

location.href

写：

location.href ="地址";

当前页面地址 读
	     document.write(location.href);
页面在三秒后跳到外网
    setTimeout(function(){
       location.href = "http://www.baidu.com";
        },3000);

2.replace(替换的网站）：

读：

location.replace

写：

location.replace("地址");

location.replace("url")//加地址则会跳转到该地址所在页面
	 //location.replace("index.html");
	location.replace("http://www.baidu.com");   覆盖原先网页 没有浏览痕迹

3.reload:刷新

5.history：对象用户访问过的url

1.back（）加载history列表的前一个url

2.forward（）加载history列表的后一个url

3.go（） history列表的某一个具体页面

6.document：文档对象

每个载入浏览器的 HTML 文档都会成为 Document 对象。

document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问

document 对象是 window 对象的一部分，可通过 window.document 属性对其进行访问

1.write：

作用1：

字符串解析：能转换成html元素的则转换，转换不了的就原样返回

document.write("<br>");//换行
	    document.write("laolv");//输出laolv
	    document.write("<font color='#FF69B4'>" + "heihei" + "</font>");//输出粉色的heihei

作用2：

当write与事件连用时, 会直接覆盖原页面

	 var oBtn = document.getElementById("test");//获取body里id为test的元素
		
		 	oBtn.onclick = function(){
		 		document.write("xixi");
			}

7.获取HTML元素的方法：

1.getElementById("id名")

返回id所对应的单个元素

2.getElementsByTagName("标签名")

批量返回标签所对应元素，存放在数组中

3.getElementsByClassName("类名")

批量返回类名对应的元素，存放在数组中

4.getElementsByName("name名")

批量返回name名所对应的元素，存放在数组中

5.querySelector("选择器")

通过选择器来获取单个元素（标签，类，id）

6.querySelectorAll("选择器")

通过选择器来批量获取元素，存放在数组中（标签，类）

码农公寓