今天我要介紹的是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編程的知識點內容能對你帶來一定的幫助，同時非常感謝各位大佬們的點贊與支持，咱們下一篇不見不散。