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编程的知识点内容能对你带来一定的帮助，同时非常感谢各位大佬们的点赞与支持，咱们下一篇不见不散。