瀏覽器中的JavaScript
瀏覽器上的JS主要包含以下的部分
JavaScript核心
BOM (Browser Object Model)
DOM (Document Object Model)
前端人員就可以透過BOM和DOM的API來操控,瀏覽器上的內容
和瀏覽器的行為。
BOM是什麼?
是瀏覽器所有功能的核心,與網頁內容無關。
BOM核心是window物件。
BOM的WINDOW物件是全域物件
在「全域作用範圍」所宣告的變數,雖然是window物件的屬性,但是,這些屬性是無法用delete
移除的。
ex:
1 | var a = 10; |
若直接透過指定window物件的屬性建立,此時,用delete
就可以刪除這些屬性。
ex:
1 | window.a = 10; |
window物件是JavaScript與瀏覽器溝通的窗口
ex:
1 | window.alert('Hello'); |
以上就是BOM提供的API,來讓JS可以使用瀏覽器內建的功能。
DOM是什麼?
若JavaScript想要操縱網頁的內容的話,就要透過DOM提供的API來對HTML做存取與操作。
ex:
1 | <html> |
以上這張圖,就是範例中的DOM樹狀圖。
DOM API就是讓JS可以存取、改變HTML架構、樣式和內容的方法,甚至是對節點綁定的事件。
DOM 和 BOM 的區別?
兩者最大區在別於
DOM: JS用來控制「網頁」的節點和內容。
BOM: JS與「瀏覽器」溝通的窗口,不涉及網頁內容。
ex:
1 | ---BOM api--- |