JavaScript:BOM编程

今天我要介绍的是JS中有关于BOM编程的知识点内容：BOM编程；

介绍：BOM全名（Browser Object Model（浏览器对象模型））。是浏览器提供的与浏览器窗口交互的接口，其核心对象是 window。与 DOM（文档对象模型）不同，BOM 关注浏览器窗口、导航、历史记录等浏览器层面的操作。

接下来我将逐一介绍BOM编程的相关内容；

以下图解为BOM树：

window对象 意解：document**：文档（包含当前窗口所显示页面文档的所有内容）；history:历史记录（访问历史纪录）；location:地址栏（操作地址栏）；sreen(查看屏幕信息)（剩下内容后续文章将会介绍）**

所有JS全局对象，函数以及变量均自动成为window对象的成员，实际使用上述对象时可以省略window,例如：window.location和location时一样的。

注：document对象: HTML标签对象也是一个节点Node对象它处于DOM树的上级。

javascript 复制代码

var a = 10;
			console.log(a);
			console.log(window.a);
			//函数
			function add(a, b) {
				return a + b;
			}
			console.log(add(1, 2))
			console.log(window.add(1, 2));
			// //对象
			console.log(parseInt('123'))

效果：

注解：console.log(window.parseInt('123')) 也属于window对象的成员==》console.log(parseInt('123')) ，可以通过window对象访问；

window内容详细：

close:关闭窗口；setInterval:循环定时器；setTimeout:定时器；clearInterval:清除循环定时器；clearTimeout:清除定时器；parseInt:转整数；parseFloat:转小数；innerHeight / innerWidth:网页显示区域高度 / 网页显示区域宽度；

注意：以上在前面的位置都可以加 window ;

innerHeight / innerWidth:网页显示区域高度 / 网页显示区域宽度：

javascript 复制代码

<div id ='dd' style="background: red;width: 100px;"></div>
		<button onclick="window.open('CSwj.html')">点击一下</button>
		<button onclick="window.location='CSwj.html'">location跳转</button>
		<!-- <button onclick="window.history.forward()">history前进</button> -->
		
			dd.style.width=window.innerWidth;
			console.log(window.innerHeight)
			dd.style.height=window.innerHeight+'px';

效果：

注解：以上内容效果的宽度不会随着其屏幕的放大缩小，但是它在会刷新的时候会根据你屏幕的大小取它的高度

location内容详细先知：

herf:跳转页面；reload:重载页面；

javascript 复制代码

<button onclick=" window.open('CSwj.html')">点击一下</button>
		<button onclick="window.location='CSwj.html'">location跳转</button>

效果：

跳转后:

区别==》<button οnclick="window.open('CSwj.html')">点击一下</button>

<button οnclick="window.location='CSwj.html'">location跳转</button>

javascript 复制代码


<input type="text" />
		<button onclick="window.open('CSwj.html')">点击一下</button>
		<button onclick="window.location.reload()">location重载</button>

效果：

一个为新开窗口，一个在当前窗口打开；后者可以省略window,单加location的，但是一般是不省略，方便可以理解。

history内容详细先知：

back**:返回；forword:前进；go:指定;**

javascript 复制代码

<input type="text" />
		<button onclick="window.open('CSwj.html')">点击一下</button>
		<button onclick="window.location='CSwj.html'">location跳转</button>
		<button onclick="window.history.forward()">history前进</button>   &&
		 <button onclick="window.history.go(1)">go前进</button>      &&
		<button onclick="window.location.reload()">location重载</button>

效果：

跳转后：

注解：{ go(-1) } 回退；

document内容详细先知:

ById ：根据id属性获取指定的元素（单个获取）；byTagName :根据标签获取指定的元素（多个获取）；byClassName :根据类样式class获取指定的元素（多个获取）；querySelector :根据class样式查找元素（单个）；querySelectorAll：根据class样式查找所有满足的元素（多个）。

ById：根据id属性获取指定的元素（单个获取）

javascript 复制代码

<ul>
			<li id = "li1">Scratch</li>
			<li id = "li2">Java</li>
			<li>HTML</li>
			<li>CSS</li>
			<li>JavaScript</li>
		</ul>
		<div class="box">
			<p class="c1">苹果</p>
			<p class="c1">香蕉</p>
			<p class="c2">西瓜</p>
		</div>
		<div class="box">
			<p class="c1">苹果</p>
			<p class="c1">香蕉</p>
			<p class="c2">莲雾</p>
		</div>
		<p>茄子</p>
		<script>
			// 根据id属性获取指定的元素（单个获取）
			 let li = document.getElementById('li1');
			  console.log(li)
			 // let lk = li2;  //非常规写法，不推荐这个做法
			 console.log(ll)

效果

byTagName:根据标签获取指定的元素（多个获取）

javascript 复制代码

 //byTagName:根据标签获取指定的元素（多个获取）
			 let kk = document.getElementsByTagName('li')
			// let kk = document.getElementsByTagName('p')
			 //for 循环  for of 
			 // 其中 kk属于被(遍历)循环集合，
			 // s属于每次循环所得之变量
			 for (let s of kk) {
			 	console.log(s)
			 }

效果：

byClassName:根据类样式class获取指定的元素（多个获取）

javascript 复制代码

 // byClassName:根据类样式class获取指定的元素（多个获取）
			 let ss = document.getElementsByClassName('c1')
			 for (let s of ss) {
			 	console.log(s)
			 }

效果：

querySelector:根据class样式查找元素（单个）

javascript 复制代码

//querySelector:根据class样式查找元素（单个）
			 let ss =document.querySelector(".box.c2")
			 console.log(ss);

效果：

querySelectorAll：根据class样式查找所有满足的元素（多个）

javascript 复制代码

 //querySelectorAll：根据class样式查找所有满足的元素（多个）
			 let ss = document.querySelectorAll('.box .c2')
			 for (let s of ss) {
			 	console.log(s)
			 }

效果：

注解：复制给定的 SS 在遍历再通过循环多个之后，所要得到的内容才可以一个一个打印出来，查找方式，只要是样式之类的，都可以用这个；

总结：希望本篇有关于JS BOM编程的知识点内容能对你带来一定的帮助，同时非常感谢各位大佬们的点赞与支持，咱们下一篇不见不散。

JavaScript:BOM编程

window内容详细 ：

location内容详细先知：

history内容详细先知：

document内容详细先知:

window内容详细：