0%

008重新認識JS-Day03-筆記1

瀏覽器中的JavaScript

瀏覽器上的JS主要包含以下的部分
JavaScript核心
BOM (Browser Object Model)
DOM (Document Object Model)

前端人員就可以透過BOM和DOM的API來操控,瀏覽器上的內容
和瀏覽器的行為。

BOM是什麼?

是瀏覽器所有功能的核心,與網頁內容無關。
BOM核心是window物件。

BOM的WINDOW物件是全域物件

在「全域作用範圍」所宣告的變數,雖然是window物件的屬性,但是,這些屬性是無法用delete移除的。
ex:

1
2
3
4
var a = 10;
console.log(window.a); //10
delete window.a; // false
console.log(window.a); //10

若直接透過指定window物件的屬性建立,此時,用delete就可以刪除這些屬性。
ex:

1
2
3
4
window.a = 10;
console.log(window.a); // 10
delete window.a; // true
console.log(window.a); // undefined

window物件是JavaScript與瀏覽器溝通的窗口

ex:

1
window.alert('Hello');

以上就是BOM提供的API,來讓JS可以使用瀏覽器內建的功能。

DOM是什麼?

若JavaScript想要操縱網頁的內容的話,就要透過DOM提供的API來對HTML做存取與操作。

ex:

1
2
3
4
5
6
7
8
9
<html>
<head>
<title>抬頭一</title>
</head>
<body>
<h1>標題一</h1>
<p>這是個<i>簡單的</i>網頁</p>
</body>
</html>

以上這張圖,就是範例中的DOM樹狀圖。
DOM API就是讓JS可以存取、改變HTML架構、樣式和內容的方法,甚至是對節點綁定的事件。

DOM 和 BOM 的區別?

兩者最大區在別於
DOM: JS用來控制「網頁」的節點和內容。
BOM: JS與「瀏覽器」溝通的窗口,不涉及網頁內容。

ex:

1
2
3
4
5
6
---BOM api---
window.alert('hello');

---DOM api---
document.querySelector('#greet').textContent = 'Hello';