BOM操作

[oJbK]發表於2022-02-09

目錄

一:BOM與DOM操作

  • 引入
目前為止，我們已經學習了javaScript的一些簡單的語法。但是這些簡單的語法，並沒有和瀏覽器有任何互動。也就是我們還不能製作一些我們經常看到的網頁的一些互動，我們需要繼續學習BOM和DOM相關知識。
Javascript 由三部分構成，ECMAScript，DOM和BOM。

image

1.BOM與DOM操作
BOM
瀏覽器物件模型  Browser Object Model
js程式碼操作瀏覽器 提供一些屬性和方法可以操作瀏覽器 
它使 javaScript有能力與瀏覽器進行 "對話"
		
DOM
文件物件模型	  Document Object Model
js程式碼操作標籤 提供操作頁面元素的方法和屬性
通過它 可以訪問HTML檔案的所有元素

image

二:BOM操作

1.常用的Window方法:
window物件指代的就是瀏覽器視窗

window.innerHeight - 瀏覽器視窗的內部高度
window.innerWidth - 瀏覽器視窗的內部寬度
window.open() - 開啟新視窗
window.close() - 關閉當前視窗
2.案例實操
window.innerHeight  # 當前瀏覽器視窗的高度
900

window.innerWidth   # 當前瀏覽器視窗的寬度
1680
3.開啟新視窗
window.open('https://www.mzitu.com/','','height=400px,width=400px,top=400px,left=400px') 

解析內容:
新建視窗開啟頁面 第二個引數寫空即可 第三個引數寫新建的視窗的大小和位置

image

4.關閉當前頁面
window.close()  關閉當前頁面

擴充套件父子頁面通訊window.opener() 瞭解

三:window的子物件

1.navigator物件
瀏覽器物件，通過這個物件可以判定使用者所使用的瀏覽器，包含了瀏覽器相關資訊。
2.navigator常用方法
navigator.appName　　		 // Web瀏覽器全稱
navigator.appVersion　　  // Web瀏覽器廠商和版本的詳細字串
navigator.userAgent　　  // 客戶端絕大部分資訊
navigator.platform　　　// 瀏覽器執行所在的作業系統
3.navigator實際使用
navigator		: 瀏覽器物件

1.瀏覽器全稱    
window.navigator.appName

輸出結果:
"Netscape"  


2.瀏覽器廠商和版本的詳細字串
window.navigator.appVersion

輸出結果:
"5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"  


3.用來標識\效驗當前是否是一個瀏覽器 是否存在(userAgent)引數
window.navigator.userAgent	 

輸出結果:
"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36"

image

4.擴充套件(user-agent)網站仿爬措施
1.最簡單最常用的一個就是校驗當前請求的發起者是否是一個瀏覽器 userAgent

    user-agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36

如何破解該措施？
        在你的程式碼中加上上面的user-agent配置即可
5.檢視當前平臺
window.navigator.platform
'Win32'
6.提醒:

如果是window的子物件 那麼window可以省略不寫(習慣性建議寫一下)
navigator.platform

四:history物件

1.window.history 物件包含瀏覽器的歷史
window.history 物件包含瀏覽器的歷史
瀏覽器歷史物件，包含了使用者對當前頁面的瀏覽歷史，但我們無法檢視具體地址，可以簡單的用來前進或者後退一個頁面。
2.history使用
window.history.back()  回退到上一頁
window.history.forward()  前進到下一頁
  • history對應的就是你瀏覽器左上方的兩個的箭頭
    image

五:location物件

1.location
window.location 物件用於獲取當前頁面的地址(URL),並把瀏覽器重定向到新的頁面。
2.常用屬性方法
window.location.href	# 獲取當前頁面的url
window.location.href = url  # 跳轉到指定的url('https://www.mzitu.com')
window.location.reload()  # 重新載入頁面   瀏覽器左上方的小圓圈
3.實踐location物件
3.1獲取當前頁面的url

window.location.href
image

3.2跳轉到指定的url

window.location.href = ('https://www.mzitu.com')
image

3.3重新載入頁面 瀏覽器左上方的小圓圈

window.location.reload()
image

六:彈出框

  • 警告框
    alert()

  • 確認框
    confirm()

  • 提示框
    prompt()

作用:會彈出一個視窗

1.警告框
alert('你不要過來啊！！！')  
undefined

image

2.確認框
confirm('你確定真的要這麼做嗎?能不能有其他方式能夠滿足你...')
false
confirm('你確定真的要這麼做嗎?能不能有其他方式能夠滿足你...')
true

image

3.提示框
prompt('手牌號給我看一下','22號消費888')

image

七:計時器相關

  • 過一段時間之後觸發(一次)
  • 每隔一段時間觸發一次(迴圈)
1.過一段時間之後觸發(一次)
3秒後觸發一次
也可以取消定時任務，就不會進行執行

<script>
    function func1() {
        alert(123)
    }
    // 毫秒為單位 3秒之後自動執行func1函式
    let t = setTimeout(func1,3000);  
    
// 取消定時任務  如果你想要清除定時任務 需要提前用變數指代定時任務
  	clearTimeout(t)      
</script>

image

2.每隔三秒時間觸發一次(迴圈)
限制每隔3秒觸發執行一次，九秒後觸發 停止執行。

<script>	
	function func2() {
        alert(123)
    }
    function show(){
        let t = setInterval(func2,3000);  // 每隔3秒執行一次
        function inner(){
            clearInterval(t)  // 清除定時器
        }
        setTimeout(inner,9000)  // 9秒中之後觸發/執行
    }
    show()
</script>

image

注意:
	在HTML中 script 可以放head內，也可以放在body內。

相關文章