前端瀏覽器對象模型BOM常用對象用法介紹

2021-01-12 黑馬程式設計師

  前端瀏覽器對象模型BOM常用對象介紹,BOM即Broswer Object Model 瀏覽器對象模型,在JavaScript中可以理解為window對象,用來進行與瀏覽器相關的一些操作,學習BOM就是學習 JavaScript中的window對象。

  一、window對象  BOM的核心對象是 window,它代表瀏覽器的一個實例。在瀏覽器中,window有著雙重的角色:JavaScript訪問瀏覽器的接口對象,ES中的Global對象意味著網頁中的任何一個對象,變量,函數都是以window作為其Global對象。  1、全局作用域,在ECMAScript中,window對象扮演著Global對象的角色,也就是說,所有在全局作用域聲明的變量,函數都會變成window的屬性和方法,都可以通過 window.屬性名(或方法名) 直接調。  2、導航和打開窗口,通過 window.open() 既可以導航到一個特定的URL,也可以打開一個新的瀏覽器窗口  二、location對象  [^location 是最有用的BOM對象之一,它提供了與當前窗口中加載的文檔有關的信息]: JavaScript高級程序設計。  註: window.location 和 document.location?引用的是同一個對象。location 既是 window 對象的屬性,也是 document?對象的屬性。  三、 navigator對象  navigator 對象主要用來獲取瀏覽器的屬性,區分瀏覽器類型;  navigator 對象屬性較多,且兼容性比較複雜。  四、history對象  history 對象保存著用戶上網的歷史記錄,從窗口被打開的那一刻算起,因為 history 是 window 對象的屬性,因此每個瀏覽器窗口,每個標籤乃至每個框架,都有自己的 history對象與特定的 window 對象關聯。  總結瀏覽器對象模型BOM中常用的對象有navigator,window, location, history  window既是 JavaScript 的全局對象,也是BOM的一個實例,所有的全局方法,屬性,BOM中的屬性,都可以通過 window. 來調用;  window作為BOM的實例,最常用的幾個方法分別是:window.open(),window.close(),分別用來打開和關閉瀏覽器窗口頁面,這裡需要注意的是,通過 open 方法打開的頁面,才能通過close 方法關閉;  location對象也是用的比較多的一個BOM對象,主要用來操作URL相關的一些信息,除了修改 Hash 之外的任何屬性,頁面都會重新加載,歷史記錄會多加一條歷史記錄;  location對象還有一個 reload() 方法用於手動重新加載頁面,該方法接收一個可選參數,為 true 的時候表示從伺服器重新加載,否則可能從瀏覽器緩存中重新加載頁面;  location對象 還有一個比較特殊的方法,location.replace(),該方法可以覆蓋當前頁面並重新加載,同時不會在 history 中生成歷史記錄;  navigator對象主要用來獲取瀏覽器相關的一些信息,使用的時候需要注意兼容性。可以用來獲取瀏覽器類(Chrome,safrai,FireFox,Edge,IE)等;  history對象主要用來操作瀏覽器URL的歷史記錄,可以通過參數向前,向後,或者向指定URL跳轉。可以通過 length 屬性獲取記錄數,判斷當前頁面是否是打開的首個頁面;

相關焦點

  • 什麼是JavaScript對象?如何創建並引用?這就告訴你!
    主要內容:對象的創建鍵名和鍵值對象的引用Math對象Date對象學習目標:為什麼要使用對象?1.2 什麼是對象對象:就類中的一個具體的實物。人類-具體某一個人(張三丰)。動物類-(一個具體的動物-東北虎),家電類-(具體一個比如說電視。)js 中我們包含哪些對象呢?內置對象(本地對象):Math對象,Number對象,Date對象等,系統給我們提供好的,我們拿過來用就可以了。
  • JSON對象和簡單練習
    JSON對象和簡單練習前面一篇我們查找的圖書的name都是通過逗號隔開,然後拼接成一個字符串傳給瀏覽器。其實我們可以把多個圖書名稱用數組格式傳給瀏覽器,前端JS代碼通過遍歷這個數組,也是可以拿到這些name數據。現在,我們一般不用數組,而是用JSON這格式。
  • 你應該知道的前端小知識
    10.前端工程化一提到前端工程化很多人想到的都是webpack,這是不對的,webpack僅僅是前端工程化中的一環。在整個工程化過程中他幫我們解決了絕大多數的問題,但並沒有解決所有問題。前端工程化是通過工具提升效率,降低成本的一種手段。
  • JavaScript基礎-內置對象
    1 - 內置對象1.1 內置對象 JavaScript 中的對象分為3種:
  • 和大家分享JS編程知識之JS內置對象實例詳解
    大家好,本次和給大家分享JS的內置對象。本次主要是通過實例來和大家一起分享學習,分享學習什麼是對象,以及String字符串對象,Data日期對象,Array數組對象,Math對象的常用方法的使用。String字符串對象字符串對象常用的方法示例代碼演示:1、length:字符串的長度,示例代碼如下:
  • JavaScript - Math對象
    Math對象在我們js中其實是有很多數學計算的需求的,不過不必擔心系統給我們提供了大量的數學運算的方法供我們使用而這些方法全都存在於我們的Math對象中Math常用的屬性:Math.PI 相當於π 3.14159Math對象常用的函數
  • UML對象圖和類圖關係解析
    UML對象圖和類圖關係解析 UML共有九種視圖,它們之間各有自己的特點和作用,它們之間有什麼聯繫嗎,這裡就向大家介紹一下UML對象圖和UML類之間的聯繫,希望通過本文的學習你對UML的圖形之間的關係有一定的認識。
  • Web前端和後端有什麼區別(上)
    (1)能夠書寫語義合理,結構清晰,易維護的HTML結構; (2)能夠還原視覺設計,併兼容業界承認的主流瀏覽器; (3)了解ECMAScript基礎內容,掌握1-2種js框架,如JQuery; (4)對常見的瀏覽器兼容問題有清晰的理解,並有可靠的解決方案;
  • 谷歌詳細介紹MediaPipe對象檢測與追蹤系統
    日前,谷歌撰文介紹了又一個MediaPipe示例:Object Detection and Tracking。谷歌首次描述了新發布的Box Tracking解決方案,並解釋了它是如何與Object Detection結合併提供一個對象檢測與追蹤系統。
  • 七天學會javascript第一天javascript介紹
    前幾周寫了幾篇關於入門php的文章,反響還不錯,之前簡單的提到了JavaScript,這周小編重點介紹JavaScript讓大家可以在一周時間內掌握這門前端語言的基本用法。javascript介紹javascript數據類型javascript運算符javascript對象javascript Date對象javascript String對象JavaScript常用於實現一些前端效果。前些年流行的flash已經慢慢的被淘汰,js盛行起來。javascript :客戶端編程。javascript是由客戶端去解釋運行的。
  • web前端開發常用工具有哪些
    Web前端是一個新興職業,市場需求大,薪資待遇高,吸引了很多人加入學習。無論是初學小白亦或是自身前端開發人員,好用的軟體工具可以幫助他們更好的工作。下面為大家介紹一些常用的web前端開發工具:1、BootstrapBootstrap 是快速開發 Web 應用程式的前端工具包。它是一個 CSS 和HTML 的集合,它使用了最新的瀏覽器技術,給你的 Web 開發提供了時尚的版式,表單,buttons,表格,網格系統等等。
  • Numpy的ndarray:一種多維數組對象
    每個數組都有一個shape(一個表示各維度大小的元組)和一個dtype(一個用於說明數組數據類型的對象)。它接受一切序列型的對象(包括其他數組),然後產生一個新的含有傳入數據的Numpy數組。np.array會嘗試為新建的這個數組推斷出一個較為合適的數據類型。數據類型保存在一個特殊的dtype對象中。
  • JavaScript中常用es6語法整理總結
    最常用的方法有兩個將字符串轉成數組合併數組展開運算符常用的方法最後其他es6常用的語法可以參考之前的文章比如 :1. es6模塊化 中 import和export 用法 (前端工程化以及如何通過Node.js中babel來編譯es6模塊化代碼)2.es6的 promise對象 (
  • JavaScript的內置對象Math
    各位小夥伴們大家好,這次小編要介紹的是JavaScript的一個內置對象Math。Math對象:執行常見的算數任務常用方法:round():四捨五入random():返回0-1之間的隨機數max():返回最高值min():返回最低值abs():返回絕對值js代碼如下:四捨五入:document.write(Math.round(2.5));(輸出的結果是三)隨機數:document.write(Math.random
  • 面向對象編程
    什麼是對象和類簡單地說,Python中的一切都是對象,類是對象的藍圖。所以當我們寫下:a = 2b = "Hello!"我們正在創建一個int類的對象a,該對象的值為2,str類的對象b的值為「Hello!」(在默認情況下,用兩個引號來提供字符串)。
  • 「乾貨滿滿」1.5w字初中級前端面試複習總結
    當查找一個變量時,會優先在本身的對象上查找,如果找不到就會去該對象的 prototype 上查找,以此類推,最終以 Object.prototype 為終點。多個 prototype 連接在一起被稱為原型鏈。原型繼承原型繼承的方法有很多種,這裡不會全部提及,只記錄兩種常用的方法。
  • python中常見的對象辨析(可迭代對象、迭代器對象、生成器對象)
    一 可迭代對象IterableA.定義可作用於for循環的對象叫可迭代對象B.包括1.集合數據類型 序列,字典,集合2.迭代器對象C.訪問可迭代對象1.集合數據類型使用各自的訪問方法2.迭代器對象使用迭代器對象訪問的方法D.注意1.具有
  • JavaScript:對象都是這樣生成的!
    頭圖 | CSDN下載自視覺中國作者 | flydean 責編 | 張文來源 | 程序那些事(ID:flydean-tech)本文將會深入講解面向對象在 javascript 中的應用,並詳細介紹三種對象的生成方式:構造函數、原型鏈、類。
  • 通過Monk AI輕鬆進行對象檢測
    介紹對象檢測是一種計算機視覺技術,用於定位圖像或視頻中的對象實例。對象檢測算法通常利用機器學習或深度學習來產生有一定意義的結果。雖然有各種各樣的架構用於對象檢測,本文將使用MX-RCNN(Multi-View X-Ray RCNN),其架構如下圖所示:
  • CAD新手福利 對象捕捉的詳細介紹不容錯過
    CAD的對象捕捉有多重要相信大家都非常了解,我們不妨在往後的繪圖中做一個實驗,隨便畫點什麼圖形,你把對象捕捉全關了,然後你會發現整個人都是蒙圈的,因為你會發現,你根本就無法完成整個繪圖,不接受反駁。還可以通過輸入各種捕捉對應的英文縮寫來進行捕捉,下面舉個例子把所有對象捕捉都不勾選,在執行繪圖命令之後,並沒有捕捉到任何對象,但是輸入END(此為端點)後,滑鼠捕捉到了端點。