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树的上级。
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:网页显示区域高度 / 网页显示区域宽度：
<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:重载页面；
<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>
<input type="text" />
<button onclick="window.open('CSwj.html')">点击一下</button>
<button onclick="window.location.reload()">location重载</button>
效果：
一个为新开窗口，一个在当前窗口打开；后者可以省略window,单加location的，但是一般是不省略，方便可以理解。
history内容详细先知：
back:返回；forword:前进；go:指定;
<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属性获取指定的元素（单个获取）
<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:根据标签获取指定的元素（多个获取）
//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获取指定的元素（多个获取）
// byClassName:根据类样式class获取指定的元素（多个获取）
let ss = document.getElementsByClassName('c1')
for (let s of ss) {
console.log(s)
}效果：
querySelector:根据class样式查找元素（单个）
//querySelector:根据class样式查找元素（单个）
let ss =document.querySelector(".box.c2")
console.log(ss);
效果：
querySelectorAll：根据class样式查找所有满足的元素（多个）
//querySelectorAll：根据class样式查找所有满足的元素（多个）
let ss = document.querySelectorAll('.box .c2')
for (let s of ss) {
console.log(s)
}效果：
注解：复制给定的 SS 在遍历再通过循环多个之后，所要得到的内容才可以一个一个打印出来，查找方式，只要是样式之类的，都可以用这个；
总结：希望本篇有关于JS BOM编程的知识点内容能对你带来一定的帮助，同时非常感谢各位大佬们的点赞与支持，咱们下一篇不见不散。